情侣浪漫表白动态爱心js特效-教程代码

情侣浪漫表白js特效代码，动态打字机文字效果，动态绘画爱心，动态时间计时，这样的特效，可以用来表白，或者放在婚纱摄影的网站上，也可以放在个人博客网站中，也是一个不错的特效，

更改教程说明：

1，文字信息：以及心形中的文字，大概位置：在下载源码后，更改25-67行，代码如下：

<div id="content">
    <div id="code">
      <span class="comments">/**</span><br />
      <span class="space"/><span class="comments">*2016—01-01,</span><br />
      <span class="space"/><span class="comments">*2016-07-26.</span><br />
      <span class="space"/><span class="comments">*/</span><br />
      Boy name = <span class="keyword">Mr</span> LI<br />
      Girl name = <span class="keyword">Mrs</span> ZHANG<br />
      <span class="comments">// Fall in love river. </span><br />
      The boy love the girl;<br />
      <span class="comments">// They love each other.</span><br />
      The girl loved the boy;<br />
      <span class="comments">// AS time goes on.</span><br />
      The boy can not be separated the girl;<br />
      <span class="comments">// At the same time.</span><br />
      The girl can not be separated the boy;<br />
      <span class="comments">// Both wind and snow all over the sky.</span><br />
      <span class="comments">// Whether on foot or 5 kilometers.</span><br />
      <span class="keyword">The boy</span> very <span class="keyword">happy</span>;<br />
      <span class="keyword">The girl</span> is also very <span class="keyword">happy</span>;<br />
      <span class="placeholder"/><span class="comments">// Whether it is right now</span><br />
      <span class="placeholder"/><span class="comments">// Still in the distant future.</span><br />
      <span class="placeholder"/>The boy has but one dream;<br />
      <span class="comments">// The boy wants the girl could well have been happy.</span><br />
      <br>
      <br>
      I want to say:<br />
      Baby, I love you forever;<br />
    </div>
    <div id="loveHeart">
      <canvas id="garden"></canvas>
      <div id="words">
        <div id="messages">
          亲爱的，这是我们相爱在一起的时光。
          <div id="elapseClock"></div>
        </div>
        <div id="loveu">
          爱你直到永永远远。<br/>
          <div class="signature">- 爱你的人</div>
        </div>
      </div>
    </div>
  </div>
<div id="content">
    <div id="code">
      <span class="comments">/**</span><br />
      <span class="space"/><span class="comments">*2016—01-01,</span><br />
      <span class="space"/><span class="comments">*2016-07-26.</span><br />
      <span class="space"/><span class="comments">*/</span><br />
      Boy name = <span class="keyword">Mr</span> LI<br />
      Girl name = <span class="keyword">Mrs</span> ZHANG<br />
      <span class="comments">// Fall in love river. </span><br />
      The boy love the girl;<br />
      <span class="comments">// They love each other.</span><br />
      The girl loved the boy;<br />
      <span class="comments">// AS time goes on.</span><br />
      The boy can not be separated the girl;<br />
      <span class="comments">// At the same time.</span><br />
      The girl can not be separated the boy;<br />
      <span class="comments">// Both wind and snow all over the sky.</span><br />
      <span class="comments">// Whether on foot or 5 kilometers.</span><br />
      <span class="keyword">The boy</span> very <span class="keyword">happy</span>;<br />
      <span class="keyword">The girl</span> is also very <span class="keyword">happy</span>;<br />
      <span class="placeholder"/><span class="comments">// Whether it is right now</span><br />
      <span class="placeholder"/><span class="comments">// Still in the distant future.</span><br />
      <span class="placeholder"/>The boy has but one dream;<br />
      <span class="comments">// The boy wants the girl could well have been happy.</span><br />
      <br>
      <br>
      I want to say:<br />
      Baby, I love you forever;<br />
    </div>
    <div id="loveHeart">
      <canvas id="garden"></canvas>
      <div id="words">
        <div id="messages">
          亲爱的，这是我们相爱在一起的时光。
          <div id="elapseClock"></div>
        </div>
        <div id="loveu">
          爱你直到永永远远。<br/>
          <div class="signature">- 爱你的人</div>
        </div>
      </div>
    </div>
  </div>
<div id="content">
		<div id="code">
			<span class="comments">/**</span><br />
			<span class="space"/><span class="comments">*2016—01-01,</span><br />
			<span class="space"/><span class="comments">*2016-07-26.</span><br />
			<span class="space"/><span class="comments">*/</span><br />
			Boy name = <span class="keyword">Mr</span> LI<br />
			Girl name = <span class="keyword">Mrs</span> ZHANG<br />
			<span class="comments">// Fall in love river. </span><br />
			The boy love the girl;<br />
			<span class="comments">// They love each other.</span><br />
			The girl loved the boy;<br />
			<span class="comments">// AS time goes on.</span><br />
			The boy can not be separated the girl;<br />
			<span class="comments">// At the same time.</span><br />
			The girl can not be separated the boy;<br />
			<span class="comments">// Both wind and snow all over the sky.</span><br />
			<span class="comments">// Whether on foot or 5 kilometers.</span><br />
			<span class="keyword">The boy</span> very <span class="keyword">happy</span>;<br />
			<span class="keyword">The girl</span> is also very <span class="keyword">happy</span>;<br />
			<span class="placeholder"/><span class="comments">// Whether it is right now</span><br />
			<span class="placeholder"/><span class="comments">// Still in the distant future.</span><br />
			<span class="placeholder"/>The boy has but one dream;<br />
			<span class="comments">// The boy wants the girl could well have been happy.</span><br />
			<br>
			<br>
			I want to say:<br />
			Baby, I love you forever;<br />
		</div>
		<div id="loveHeart">
			<canvas id="garden"></canvas>
			<div id="words">
				<div id="messages">
					亲爱的，这是我们相爱在一起的时光。
					<div id="elapseClock"></div>
				</div>
				<div id="loveu">
					爱你直到永永远远。<br/>
					<div class="signature">- 爱你的人</div>
				</div>
			</div>
		</div>
	</div>

2，自定义时间：源代码的大概位置：76-83行，一般更改年月日，所以改79的日期就可以了。

代码如下：

var offsetX = $("#loveHeart").width() / 2;
var offsetY = $("#loveHeart").height() / 2 - 55;
var together = new Date();
together.setFullYear(2016, 1, 1);
together.setHours(0);
together.setMinutes(0);
together.setSeconds(0);
together.setMilliseconds(0);
var offsetX = $("#loveHeart").width() / 2;
var offsetY = $("#loveHeart").height() / 2 - 55;
var together = new Date();
together.setFullYear(2016, 1, 1);
together.setHours(0);
together.setMinutes(0);
together.setSeconds(0);
together.setMilliseconds(0);
var offsetX = $("#loveHeart").width() / 2;
var offsetY = $("#loveHeart").height() / 2 - 55;
var together = new Date();
together.setFullYear(2016, 1, 1);
together.setHours(0);
together.setMinutes(0);
together.setSeconds(0);
together.setMilliseconds(0);

3，更改英文的天数，以及时分秒单词变成中文。

下载源码后：在文件的/js目录中找到functions.js，在113行左右，整行替换如下，也可以自己参照下面代码更改。

  var result = "<span class=\"digit\">" + days + "</span> 天 <span class=\"digit\">" + hours + "</span>时 <span class=\"digit\">" + minutes + "</span> 分 <span class=\"digit\">" + seconds + "</span> 秒"; 
  var result = "<span class=\"digit\">" + days + "</span> 天 <span class=\"digit\">" + hours + "</span>时 <span class=\"digit\">" + minutes + "</span> 分 <span class=\"digit\">" + seconds + "</span> 秒"; 
	var result = "<span class=\"digit\">" + days + "</span> 天 <span class=\"digit\">" + hours + "</span>时 <span class=\"digit\">" + minutes + "</span> 分 <span class=\"digit\">" + seconds + "</span> 秒"; 

下载地址：