一闪一闪亮晶晶

最新推荐文章于 2022-09-29 15:51:04 发布

Cc.＇沐艿伊℡

最新推荐文章于 2022-09-29 15:51:04 发布

阅读量277

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_44899153/article/details/90582553

版权

web 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

一闪一闪亮晶晶

通过定位,定时,使得页面上的星星在固定屏幕上跑动
效果图
在这里插入图片描述
代码

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