星星一闪一闪

最新推荐文章于 2023-10-31 14:02:31 发布

XiaoXiongV

最新推荐文章于 2023-10-31 14:02:31 发布

阅读量658

点赞数

分类专栏： js

js 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		#dv{
			position: relative;
			height: 600px;
			width: 500px;
			background-color: black;
			border: 2px dotted yellowgreen;
		}
	</style>
</head>
<body>
	<input type="button" id="btn" value="开始按钮"/>
	<input type="button" id="btn_" value="停止按钮"/>
	<div id="dv">
		
	</div>
	<script>
		function my$(id){
			return document.getElementById(id);
		}					
		
		my$("btn").onclick=function(){
			var timeId=setInterval(function(){
				var x=parseInt(Math.random()*500+1);
				var y=parseInt(Math.random()*600+1);
				//创建一个span
				var spanObj=my$("dv").innerHTML="<span>★</span>";
				my$("dv").firstElementChild.style.color="yellow";
				my$("dv").firstElementChild.style.fontSize="30px";
				my$("dv").firstElementChild.style.top=y+"px";
				my$("dv").firstElementChild.style.left=x+"px";
				my$("dv").firstElementChild.style.position="absolute";					
			},10)
			//停止
			my$("btn_").onclick=function(){
				clearInterval(timeId);
			}
		}
	</script>
</body>
</html>