一. 首先创建一个html页面。记事本也行了。
二. 然后把下面代码复制进去（傻瓜式的Ctrl+CV，教学就算了。）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>七夕喔</title>
</head>
<body>
<!-- 这是大标题头 -->
<h1 style="position:absolute; left:280px; top:155px; width:auto; height:210px;">你爱我吗?</h1>
<!-- 这是第一个不会动的按钮 -->
<div id="By" style="position:absolute; left:285px; top:235px;height:30px;">
<input type="button" value=" 爱你！ " onclick="f1()" />
<!-- onclick() 若鼠标点击标签，则会触发函数。 -->
</div>
<!-- 这是第二个到处跑的按钮 -->
<div id="Bn" style="position:absolute; left:360px; top:235px;">
<input type="button" value=" 爱个锤子！ " onmouseover="f()" />
<!-- onmouseover() 若鼠标移动到标签上，则会触发函数。 -->
</div>
<!-- 这是页面的javaScript代码 -->
<script type="text/javascript">
/* onclick()点击：是的！按钮弹出警示框 */
/* alert():显示带有一条指定消息和一个OK（确认）按钮的警告框 */
/* confirm():用于显示一个带有指定消息和OK（确认）及取消按钮的对话框。一般作为判断条件，可以返回true与false*/
/* prompt(String，Default String):用于显示可提示用户进行输入的对话框。可以输入两个参数，一个显示文本，一个输入框默认值*/
function f1() {
alert("爱你爱你爱你爱你爱你~~")
}
/* 定义一个标记判断会动的按钮，以此来改变div的坐标 */
var flag = 1;
/* onmouseover()鼠标移动到标签上，就开始改变其样式 */
function f() {
/* 获取第二个按钮的id，方便以后改变样式 */
var Bn = document.getElementById('Bn');
/* 这里有一个“或”判断 如果左边body标签的（clientWidth）获取实际宽高为空 */
/* 则 返回第二 html 标签的（clientWidth）获取实际宽高 */
var aWidth = document.body.clientWidth || document.documentElement.clientWidth;
var aHeight = document.body.clientHeight || document.documentElement.clientHeight;
/* Math.floor() 一个向下取整的函数。例如： Math.floor(1.89) 结果为 1 */
/* Math.random() 一个返回随机数 介于 0 与 1 之间。 */
var sJs1 = Math.floor(Math.random() * aHeight);
var sJs2 = Math.floor(Math.random() * aWidth);
/* 这里就是不断的if else 改变id为“Bn”的按钮的样式，让他到处移动柜 */
/* Bn.style表示按钮的样式指针，后面可以紧接着各种样式 color、top吧啦吧啦巴拉 */
if (flag == 1) {
Bn.style.top = sJs1 + 'px';
Bn.style.left = sJs2 + 'px';
flag = 2;
} else if (flag == 2) {
Bn.style.top = sJs1 + 'px';
Bn.style.left = sJs2 + 'px';
flag = 3;
} else if (flag == 3) {
Bn.style.top = 235 + 'px';
Bn.style.left = 286 + 'px';
flag = 4;
} else if (flag == 4) {
Bn.style.top = 235 + 'px';
Bn.style.left = 360 + 'px';
flag = 5;
} else if (flag == 5) {
Bn.style.top = 135 + 'px';
Bn.style.left = 460 + 'px';
flag = 6;
} else if (flag == 6) {
Bn.style.top = 335 + 'px';
Bn.style.left = 300 + 'px';
flag = 7;
} else if (flag == 7) {
Bn.style.top = 135 + 'px';
Bn.style.left = 60 + 'px';
flag = 1;
}
}
</script>
</body>
</html>三. 保存txt文件以后改后缀名为 html
四. 双击打开！把文件给对面发过去！七夕结束！然后开始细节讲解！
- 这是大标题
<h1 style="position:absolute; left:280px; top:155px; width:auto; height:210px;">你爱我吗?</h1>- 这是第一个不会动的按钮，onclick() 若鼠标点击标签，则会触发函数。
<div id="By" style="position:absolute; left:285px; top:235px;height:30px;">
<input type="button" value=" 是的！ " onclick="f1()" />
</div>- 这是第二个到处跑的按钮 ， onmouseover() 若鼠标移动到标签上，则会触发函数。
<div id="Bn" style="position:absolute; left:360px; top:235px;">
<input type="button" value=" 喜欢个锤子！ " onmouseover="f()" />
</div>- ● onclick()点击：是的！按钮弹出警示框；
● alert():显示带有一条指定消息和一个OK（确认）按钮的警告框；
● confirm():用于显示一个带有指定消息和OK（确认）及取消按钮的对话框。一般作为判断条件，可以返回true与false；
● prompt(String，Default String):用于显示可提示用户进行输入的对话框。可以输入两个参数，一个显示文本，一个输入框默认值；
<!-- 这是页面的javaScript代码 -->
<script type="text/javascript">
function f1() {
alert("爱你爱你爱你爱你爱你~~")
}- 定义一个标记判断会动的按钮，以此来改变div的坐标
var flag = 1;- onmouseover()鼠标移动到标签上，就开始改变其样式
function f() {
/* 获取第二个按钮的id，方便以后改变样式 */
var Bn = document.getElementById('Bn');- 这里有一个“或”判断 如果左边body标签的（clientWidth）获取实际宽高为空，则返回右边 html 标签的（clientWidth）获取实际宽高
var aWidth = document.body.clientWidth || document.documentElement.clientWidth;
var aHeight = document.body.clientHeight || document.documentElement.clientHeight;- ● Math.floor() 一个向下取整的函数。例如： Math.floor(1.89) 结果为 1。
● Math.random() 一个返回随机数 介于 0 与 1 之间。
var sJs1 = Math.floor(Math.random() * aHeight);
var sJs2 = Math.floor(Math.random() * aWidth);/* 这里就是不断的if else 改变id为“Bn”的按钮的样式，让他到处移动柜 */
/* Bn.style表示按钮的样式指针，后面可以紧接着各种样式 color、top吧啦吧啦巴拉 */
if (flag == 1) {
Bn.style.top = sJs1 + 'px';
Bn.style.left = sJs2 + 'px';
flag = 2;
} else if (flag == 2) {
Bn.style.top = sJs1 + 'px';
Bn.style.left = sJs2 + 'px';
flag = 3;
} else if (flag == 3) {
Bn.style.top = 235 + 'px';
Bn.style.left = 286 + 'px';
flag = 4;
} else if (flag == 4) {
Bn.style.top = 235 + 'px';
Bn.style.left = 360 + 'px';
flag = 5;
} else if (flag == 5) {
Bn.style.top = 135 + 'px';
Bn.style.left = 460 + 'px';
flag = 6;
} else if (flag == 6) {
Bn.style.top = 335 + 'px';
Bn.style.left = 300 + 'px';
flag = 7;
} else if (flag == 7) {
Bn.style.top = 135 + 'px';
Bn.style.left = 60 + 'px';
flag = 1;
}
}
</script>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
