程序员如何提问

最新推荐文章于 2025-03-29 00:30:25 发布

原创最新推荐文章于 2025-03-29 00:30:25 发布 · 890 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

Javascript 同时被 2 个专栏收录

25 篇文章

订阅专栏

Html

8 篇文章

订阅专栏

<!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>