首先说明代码的含义
icon图标主页下载资源里
可自行修改内容和数据
- 先搞一个div用来放按钮,
- 设置div的背景颜色、边缘距离等样式,
- 指定按钮设置js代码,随机改变位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="理查德;1295634075@qq.com" />
<link rel="shortcut icon" href="img/爱心.ico" type="image/x-icon" />
<title>LOVE</title>
<style>
#love1{
/*初始div宽度高度*/
width: 250px;
height: 250px;
/*文字居中*/
text-align: center;
/*边框、背景颜色、盒子*/
border-radius: 0px;
background: #0f26d7;
/*div初始边缘距离*/
margin-top: 200px;
margin-left: 600px;
}
#love1 input{
width: 50px;
height: 50px;
margin: 30px;
border-radius: 41px;
background: #e2121d;
}
</style>
<script>
// yes键
function Fun_Yes() {
// 尝试询问
prompt("您真的爱我嘛?(爱or不爱)","不爱")
}
// no键
function Fun_No(){
var love = document.getElementById("love1");
// 移动div,随机改变边缘距离 1000、500 根据显示器分辨率不同可修改数据
var left = Math.floor(Math.random()*1000);
var top = Math.floor(Math.random()*500);
// 改变边缘距离
love.style.marginTop=top+"px";
love.style.marginLeft=left+"px";
}
</script>
</head>
<body>
<div id="love1">
<hr />
<h2>
<!--文本提示信息-->
Do you <font style="color: red;">LOVE</font> me?
</h2>
<!--是,确定键-->
<input type="button" value="Yes" onclick="Fun_Yes()" />
<!--否,取消键-->
<input type="button" value="No" onmouseover="Fun_No()" />
</div>
</body>
</html>
大概效果图:
触碰到 No 就会自动刷新并改变位置