<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html,body{
margin:0;
padding:0;
100%;
height:100%;
}
#box{
1200px;
height:700px;
position: absolute;
top:50%;
left:50%;
margin-top:-350px;
margin-left:-600px;
}
span{
display:block;
300px;
height:60px;
line-height: 60px;
font-size:30px;
color:#FF0000;
position: absolute;
top:50%;
left:50%;
margin-top:-30px;
margin-left:-150px;
}
input{
40px;
height:20px;
}
#btnY{
position: absolute;
top:400px;
left:500px;
}
#btnN{
position: absolute;
top:400px;
left:580px;
}
</style>
</head>
<body>
<div id= "box">
<span>Do you love me ?</span>
<input type="button" value="yes" id="btnY"/>
<input type="button" value="no" id="btnN"/>
</div>
</body>
</html>
<script>
var oBtnY = document.getElementById("btnY");
var oBtnN = document.getElementById("btnN");
oBtnY.onclick = function(){
alert( "哈哈，我也喜欢你" )
}
oBtnN.onmouseover = function(){
oBtnN.style.left = Math.floor(Math.random()*700)+"px";
oBtnN.style.top = Math.floor(Math.random()*700)+"px";
}
function haha(){
oBtnN.style.left = Math.floor(Math.random()*700)+"px";
oBtnN.style.top = Math.floor(Math.random()*700)+"px";
}
</script>