分享一个我之前刷知乎,刷出抖音上的一个有意思的视频,然后我仿照着做了一个网页版的。
原视频找不到了,找到一个类似的视频。
https://zhuanlan.zhihu.com/p/38176547?utm_source=qq&utm_medium=social&utm_oi=861196901310152704
我写的代码,效果类似于第二个视频,就是点不喜欢按钮点不到,按钮会乱跑,只能点喜欢,直接上代码:
Git地址:https://github.com/yangss0425/learned.git
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="img/xiao.jpg" ype="image/x-icon" />
<title>小姐姐</title>
<!-- <script>
var x2 = Window.clientWidth;
var y2 = window.clientHeight;
document.getElementById("d1").style.offsetWidth = "x2 * 0.5" + 'px';
document.getElementById("d1").style.offsetHeight = "y2 * 0.5" + 'px';
</script> -->
<style>
#d1 {
float: left;
position: relative;
left: 15%;
width: 1000px;
height: 600px;
background-color: rgb(241, 235, 235);
border: 1px solid black;
border-radius: 2%;
margin-top: 2%;
}
#p1 {
display: table;
margin-top: 10%;
margin-left: 32%;
text-align: center;
font-size: 2em;
}
button {
width: 100px;
height: 40px;
font-size: 100%;
/* border-radius: 2%; */
}
#b1 {
position: absolute;
left: 30%;
top: 50%;
}
#b2 {
position: absolute;
left: 50%;
top: 50%;
}
body {
background-color: aqua;
}
</style>
</head>
<body>
<div id="d1">
<p id="p1">
小姐姐你喜欢我吗?
</p>
<button id="b1">喜欢</button>
<button id="b2">不喜欢</button>
</div>
<script>
var x1 = document.getElementById("d1").clientWidth;
var y1 = document.getElementById("d1").clientHeight;
// var x = document.getElementById("d1").scrollWidth;
// var y = document.getElementById("d1").scrollHeight;
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onmouseover = handleMouseover;
buttons[i].onclick = handleClick;
}
function handleClick(e) {
if (e.target.id == "b1") {
alert("对不起,我是你永远也得不到的男人!");
}
else if (e.target.id == "b2") {
alert("哎呀!点到了!");
}
}
function handleMouseover(e) {
if (e.target.id == "b1") {
e.target.title = "快点我啊!";
}
else if (e.target.id == "b2") {
var doc = document.getElementById("b2");
// document.getElementById("p1").innerHTML += "<br>" + x1;
// document.getElementById("p1").innerHTML += "<br>" + y1;
// document.getElementById("p1").innerHTML += "<br>" + x;
// document.getElementById("p1").innerHTML += "<br>" + y;
e.target.style.left = Math.random() * (x1 - doc.offsetWidth) + "px";
e.target.style.top = Math.random() * (y1 - doc.offsetHeight) + "px";
/*测试按钮位置*/
// e.target.style.left = 1000 - 100 + "px";
// e.target.style.top = 600 - 40 + "px";
/*查看获取高度宽度 边框值*/
// alert(document.getElementById("b2").offsetHeight);
// alert(doc.offsetWidth);
/*测试按钮边框取值*/
// e.target.style.left = 1000 - doc.offsetWidth + "px";
// e.target.style.top = 600 - doc.offsetHeight + "px";
/*测试随机位置仍在鼠标所指位置*/
// e.target.style.left = Math.random() * 100 - doc.offsetWidth + "px";
// e.target.style.top = Math.random() * 60 - doc.offsetHeight + "px";
}
}
</script>
</body>
</html>
再截一张,我自己跑的截图
代码缺点和改进建议:
1、灰色区域的长和宽是固定的,放在另一台电脑上就不一定适配屏幕了。
改进:读取电脑屏幕,根据屏幕设置灰色区域的大小。
2,按钮移动bug,按钮随机移动存在理论几率----按钮的下一次移动恰好在当前鼠标停留位置之下。
改进:设置随机移动,移动位置排除当前鼠标可能停留在按钮的区域(有点复杂了),
或者,循环判断当前按钮位置是否在鼠标停留位置之下,如果是,则按钮继续随机移动,直到结果为否,按钮暂时停留当前位置,直到下次鼠标移动到按钮之上,触发mouserover事件。