<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>运营平台</title>
<base href="/">
<style type="text/css">
body,html,#container{
height: 100%;
margin: 0px;
font:12px Arial;
}
button {
position: fixed;
}
</style>
</head>
<body>
<div style="display: flex; width: 100%; height: 100%">
<p>明天去爬山吗?</p>
<button id="yes_btn">好的</button>
<button id="no_btn">不了</button>
</div>
<script>
var width = document.body.offsetWidth ,
height = document.body.offsetHeight ;
var x_y = Math.round(Math.random()*width),
y_y = Math.round(Math.random()*height);
var x_n = Math.round(Math.random()*width),
y_n = Math.round(Math.random()*height);
var yes = document.getElementById('yes_btn');
var no = document.getElementById('no_btn');
console.log(x_y, y_y);
yes.style.top = y_y + 'px';
yes.style.left = x_y + 'px';
no.style.top = y_n + 'px';
no.style.left = x_n + 'px';
no.addEventListener('mouseover', ()=> {
no.style.top = Math.random()*height-20 + 'px';
no.style.left = Math.random()*width-50 + 'px';
});
yes.addEventListener('click', ()=> {
alert('好的明天见!');
});
</script>
</body>
</html>
程序员如何提问
最新推荐文章于 2023-10-24 10:00:50 发布