红绿灯简单模拟

谁践踏了优雅 2022-06-14 09:49 188阅读 0赞

## **红绿灯简单模拟** ##

### 子文件 ###

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

发表评论取消回复

表情：

评论列表（有 0 条评论，188人围观）

还没有评论，来说两句吧...

相关阅读

相关简单模拟抛物线

没有阻力计算,质量和重力简单模拟 using System.Collections; using System.Collections.Generic;

Myth丶恋晨/ 2023年10月17日 21:45/ 0 赞/ 28 阅读

相关 js -制作红绿灯倒计时

1、html内容： <body> <div class="box">  <d

电玩女神/ 2023年01月04日 10:29/ 0 赞/ 212 阅读

相关模拟实现红绿灯

模拟实现红绿灯模拟实现红绿灯模拟实现红绿灯利用HTML+CSS+JS实现红绿灯效果： ![在这里插入图片描述][202105172217393

太过爱你忘了你带给我的痛/ 2022年10月20日 12:15/ 0 赞/ 194 阅读

相关红绿灯的html代码,红绿灯.html

红绿灯倒计时 .box\{width:250px;height:52px;padding:15px 30px;border:2px solid \ccc;border-rad

淡淡的烟草味﹌/ 2022年08月30日 13:55/ 0 赞/ 262 阅读

相关激励的红绿灯

2004年4月，盛大网络上上下下都在为纳斯达克上市忙碌着，其新任总裁唐骏更是马不停蹄地出现在各种场合。而辛勤工作的背后，是陈天桥给予唐骏的股权激励。后者手握的260万股期权只有

以你之姓@/ 2022年08月27日 07:52/ 0 赞/ 206 阅读

相关红绿灯简单模拟

红绿灯简单模拟子文件 <!DOCTYPE html> <html> <head lang="en"> <meta char

谁践踏了优雅/ 2022年06月14日 09:49/ 0 赞/ 189 阅读

相关简单模拟LinkedList

底层结构为链表； import java.util.Iterator; //LinkedLink其实是双向链表 public class MyLink

布满荆棘的人生/ 2022年06月12日 14:42/ 0 赞/ 266 阅读

相关红绿灯

今天给大家分享一个很简单有趣的红绿灯演示动画，效果图如下：乍一看你可能会觉得纯CSS动画可能做不到，实际上知道了原理还是比较简单的。首先这里有3盏灯，我们为每一盏灯写了

╰+攻爆jí腚メ/ 2022年03月15日 10:08/ 0 赞/ 238 阅读

相关 JavaScript 实现红绿灯

使用setTimeout、Promise、async await 三种方式实现红绿灯代码，红灯2秒，黄灯1秒，绿灯3秒，循环改变颜色。改变颜色的方法，就简单写成打印出颜色。

墨蓝/ 2022年03月02日 01:28/ 0 赞/ 234 阅读

相关 promise 实现红绿灯

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

ゞ浴缸里的玫瑰/ 2022年01月09日 04:49/ 0 赞/ 280 阅读