分享一個我之前刷知乎,刷出抖音上的一個有意思的視頻,然後我仿照着做了一個網頁版的。
原視頻找不到了,找到一個類似的視頻。
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事件。