红绿灯简单模拟

最新推荐文章于 2023-12-31 14:43:24 发布

张张张96

最新推荐文章于 2023-12-31 14:43:24 发布

阅读量2.1k

点赞数

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/Girl_0919/article/details/73340651

版权

Javascript 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

红绿灯简单模拟

子文件

 <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>子窗口</title>
    <style>
        //计时文本框的样式
        #con{width:50px;height:30px;text-align: center;line-height: 30px;font-size: 20px;}
    </style>
</head>
<input type="button" value="开始" onclick="colorTurn()"/>
<input type="text" id="con" />
<body>
<script>
    opener.creatDiv()  // 在父窗口调用函数
    //获取
    var inpObj=document.getElementsByTagName("input")[0];
    var time=document.getElementsByTagName("input")[1];
    var divObj=opener.document.getElementsByTagName("div");
    function colorTurn(){
    var i=0; //  计数
    var jsq="";// 声明一个计时器标记
        function red(){
            i++;
            divObj[0].style.background="red"
            divObj[1].style.background="black"
            jsq=setTimeout(red,100);
            if(i>60){
                clearTimeout(jsq)
                green();
            }
          time.value=i;
        }
        red();
      function green(){
          i--;
          divObj[1].style.background="green"
          divObj[0].style.background="black"
          jsq=setTimeout(green,100)
          if(i<0){
              clearTimeout(jsq)
              red();
          }
          time.value=i;
       }
    }
</script>
</body>
</html>

父文件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>父窗口</title>
</head>
<body>
<script>
    // 打开子窗口
    window.open("son.html","","width=400,height=300",false);
    function creatDiv(){
        for(var i=0;i<2;i++){
        // 创建div (红绿灯)
            var divObj=document.createElement("div");
        // 设置div样式
            divObj.style.width="80px";
            divObj.style.height="80px";
            divObj.style.borderRadius="40px";
            divObj.style.float="left";
            divObj.style.margin="20px";
            divObj.style.border="2px solid #000";
        //将新建div添加到body里
            document.body.appendChild(divObj)
        }
    }
</script>
</body>
</html>