通过定位,定时,使得页面上的星星在固定屏幕上跑动 效果图 代码
<!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>