文章标题

一个简单有趣的页面 Do you love me

---

首先是主体部分

本来是在一个素材网上看见的特效，觉得有趣就自己也做了一下。

具体特效就是：每当鼠标移动到No上时，这个方框就移动到页面的其他地方,永远也点不到No。

当点击Yes时会弹出另一个页面写着：I love you too！

<div id="div1">    <p>Do you love me ?</p>    <input type="button" id="btn1" value="No"/>    <input type="button" id="btn2" value="Yes"/></div><div id="div2">    <p>I love you too !</p>    <input type="button" id="btn3" value="Yes"/></div>

设置这个大的方框为div1，里面只有一个p标签写着Do you love me? 这样一句话，然后再加上两个按钮。

div2是与div1大小一样的方框，只有一个p标签写着：I love you too！ 还有一个按钮。

$("btn1").onmouseover=function(){    $("div1").style.top=Math.random()*600+"px";    $("div1").style.left=Math.random()*1200+"px";}$("btn2").onclick=function(){    $("div2").style.display="block";    $("div1").style.display="none";}$("btn3").onclick=function(){    $("div2").style.display="none";    $("div1").style.display="block";   }

当鼠标移入No这个按钮上时，令div1（大方框）的position改变，利用随机值组合使div1在页面上无序移动。

当点击Yes这个按钮时，把div1隐藏，使div2出现。当点击div2上的Yes按钮时，div2消失的同时div1再次出现。

---

背景音乐部分

图一

图二

图三

设置两首背景音乐，并且重新布局了一个播放操作。播放操作在页面的左侧隐藏，只有一个小标签样式，如图一。

当鼠标移动到小标签上时，会如图二一样显示出来。当鼠标移开整个播放操作块1秒后，播放操作又会隐藏起来如图一。

<audio loop autoplay src="music/Because I.mp3" id="audio1"></audio><div id="music">    <div id="play"><img src="img/pause2.png" id="img1"/></div>    <div id="stop"><img src="img/stop2.png" /></div>    <div id="forward"><img src="img/forward2.png" /></div>    <div id="backward"><img src="img/backward2.png" /></div>    <div id="tip"></div></div>

这是播放操作块的布局，tip是图一所示的小标签，利用定位的right:-20px。

music这个块被定位为left:-50px。

var oOn=true;$("play").onclick=function(){    if(oOn){        $("audio1").pause();        $("img1").src="img/play2.png";    }else{        $("audio1").play();        $("img1").src="img/pause2.png";    }    oOn=!oOn;}

因为背景音乐是打开页面后自动播放的，所以一开始的play按钮显示的是暂停，如 。
所以当点击play(pause)按钮时，歌曲暂停，且图片切换为 。
利用布尔值开关达到切换自如的效果。

$("stop").onclick=function(){    $("audio1").pause();    $("audio1").currentTime=0;    $("img1").src="img/play2.png";    oOn=false;}

点击stop（停止）按钮，使歌曲暂停并且回到最初播放0:00的状态。这时需要使play按钮的图片改变为 。

并且使布尔值开关为false，这样再次点击play按钮时就会播放音乐。（再进行if判断时，因为oOn为false所以会直接进入else中，

就能进行播放了。若不写此步骤，会发现需要点击两次play才能播放）

$("forward").onclick=function(){    $("audio1").currentTime=$("audio1").currentTime+3;}$("backward").onclick=function(){    $("audio1").currentTime=$("audio1").currentTime-3;}

点击forward(快进)和backward(快退)按钮会使时间分别加快3秒和倒退3秒。

感觉这两个按钮作用不大，只是为了美观。

var timer=null;$("music").onmouseover=function(){    clearTimeout(timer);    $("music").style.left="0px";}$("music").onmouseout=function(){    timer=setTimeout(function(){        $("music").style.left="-50px";             },1000);}

这是播放操作出现和隐藏的代码，主要是music这个块的定位的移动，还加了一个定时器。

$("btn2").onclick=function(){    $("div2").style.display="block";    $("div1").style.display="none";    $("audio1").src="music/好想你.mp3";    $("img1").src="img/pause2.png";    oOn=false;}

比较特殊的是当点击div1上的Yes后，随着div2的出现背景音乐也改变了。

为防止在点击Yes时，背景音乐已被暂停，而点击Yes后音乐又是自动播放，所以把play的图片默认更改为 表示正在播放。

并且如点击stop时一样默认更改了布尔值开关（oOn）的值,防止出现两次点击才能暂停的错误。

---

大概就先写到这里，等有了新进展再写。