打开新窗口子窗口父窗口操作红绿灯简单模拟

最新推荐文章于 2021-06-22 18:47:21 发布

weixin_30902251

最新推荐文章于 2021-06-22 18:47:21 发布

阅读量71

点赞数

原文链接：http://www.cnblogs.com/wangxiaozhu/p/7492918.html

版权

子窗口

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>子窗口</title>
 6     <style>
 7         //计时文本框的样式
 8         #con{width:50px;height:30px;text-align: center;line-height: 30px;font-size: 20px;}
 9     </style>
10 </head>
11 <input type="button" value="开始" οnclick="colorTurn()"/>
12 <input type="text" id="con" />
13 <body>
14 <script>
15     opener.creatDiv()  // 在父窗口调用函数
16     //获取
17     var inpObj=document.getElementsByTagName("input")[0];
18     var time=document.getElementsByTagName("input")[1];
19     var divObj=opener.document.getElementsByTagName("div");
20     function colorTurn(){
21     var i=0; //  计数
22     var jsq="";// 声明一个计时器标记
23         function red(){
24             i++;
25             divObj[0].style.background="red"
26             divObj[1].style.background="black"
27             jsq=setTimeout(red,100);
28             if(i>60){
29                 clearTimeout(jsq)
30                 green();
31             }
32           time.value=i;
33         }
34         red();
35       function green(){
36           i--;
37           divObj[1].style.background="green"
38           divObj[0].style.background="black"
39           jsq=setTimeout(green,100)
40           if(i<0){
41               clearTimeout(jsq)
42               red();
43           }
44           time.value=i;
45        }
46     }
47 </script>
48 </body>
49 </html>

父窗口

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>父窗口</title>
 6 </head>
 7 <body>
 8 <script>
 9     // 打开子窗口
10     window.open("son.html","","width=400,height=300",false);
11     function creatDiv(){
12         for(var i=0;i<2;i++){
13         // 创建div (红绿灯)
14             var divObj=document.createElement("div");
15         // 设置div样式
16             divObj.style.width="80px";
17             divObj.style.height="80px";
18             divObj.style.borderRadius="40px";
19             divObj.style.float="left";
20             divObj.style.margin="20px";
21             divObj.style.border="2px solid #000";
22         //将新建div添加到body里
23             document.body.appendChild(divObj)
24         }
25     }
26 </script>
27 </body>
28 </html>

转载于:https://www.cnblogs.com/wangxiaozhu/p/7492918.html

weixin_30902251

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
打开新窗口子窗口父窗口操作红绿灯简单模拟

子窗口 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>子窗口</title> 6 <style> 7 //计时文本框的样式 8...
复制链接

扫一扫