一闪一闪亮晶晶
通过定位,定时,使得页面上的星星在固定屏幕上跑动
效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box2{
width: 400px;
height: 400px;
background-color: black;
position: relative;
margin-top: 150px;
}
#xingxing0,#xingxing1,#xingxing2,#xingxing3{
position: absolute;
color: black;
}
</style>
</head>
<body>
<button id="btn3">点我亮瞎你眼</button>
<button id="btn4">点我停止亮瞎你眼</button>
<div id="box2">
<div id="xingxing0">☆</div>
<div id="xingxing1">☆</div>
<div id="xingxing2">☆</div>
<div id="xingxing3">☆</div>
<div id="xingxing4">☆</div>
<div id="xingxing5">☆</div>
<div id="xingxing6">☆</div>
<div id="xingxing7">☆</div>
<div id="xingxing8">☆</div>
<div id="xingxing9">☆</div>
</div>
<script src="common.js"></script>
<script>
//点我亮瞎你眼*************************
var timeId2;
var flag1=true;
myId("btn3").onclick=function(){
if(flag1){
flag1=false;
timeId2=setInterval(function(){
for(var i=0;i<4;i++){
var x=Math.ceil(Math.random()*400);
var y=Math.ceil(Math.random()*400);
var str="xingxing"+i;
console.log(str);
myId(str).style.color="white";
myId(str).style.top=y+"px";
myId(str).style.left=x+"px";
}
},10)
}
}
myId("btn4").onclick=function(){
clearInterval(timeId2);
flag1=true;
for(var j=0;j<4;j++)
myId("xingxing0").style.color="black";
}
</script>
</body>
</html>