打开新窗口子窗口父窗口操作红绿灯简单模拟
子窗口
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="开始" onclick="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>
