杨老师课堂之JavaScript定时器案例的红绿灯设计

简介: 杨老师课堂之JavaScript定时器案例的红绿灯设计

效果图:

代码

<!DOCTYPE html>
<html>
 
 
  <head>
    <meta charset="UTF-8">
    <title>红绿灯倒计时</title>
    <style>
      .box {
        width: 250px;
        height: 52px;
        padding: 15px 30px;
        border: 2px solid #ccc;
        border-radius: 16px;
        margin: 0 auto;
      }
      
      .box .count {
        width: 60px;
        color: #666;
        font-size: 280%;
        line-height: 50px;
        padding-left: 6px;
        margin-left: 5px;
        border: 1px solid #fff
      }
      
      .box div {
        margin-left: 5px;
        float: left;
        width: 50px;
        height: 50px;
        border-radius: 50px;
        border: 1px solid #666;
      }
      
      .gray {
        background-color: #eee;
      }
      
      .red {
        background-color: red;
      }
      
      .yellow {
        background-color: yellow;
      }
      
      .green {
        background-color: #26ff00;
      }
    </style>
  </head>
 
 
  <body>
    <div class="box">
      <div id="red"></div>
      <div id="yellow"></div>
      <div id="green"></div>
      <div class="count" id="count"></div>
    </div>
    <script>
      // 获取红、黄、绿灯以及倒计时的元素对象
      var lamp = {
        red: {
          obj: document.getElementById('red'),
          timeout: 30,
          style: ['red', 'gray', 'gray'],
          next: 'green'
        },
        yellow: {
          obj: document.getElementById('yellow'),
          timeout: 5,
          style: ['gray', 'yellow', 'gray'],
          next: 'red'
        },
        green: {
          obj: document.getElementById('green'),
          timeout: 35,
          style: ['gray', 'gray', 'green'],
          next: 'yellow'
        },
        changeStyle(style) {
          this.red.obj.className = style[0];
          this.yellow.obj.className = style[1];
          this.green.obj.className = style[2];
        }
      };
      var count = {
        obj: document.getElementById('count'),
        change: function(num) {
          this.obj.innerHTML = (num < 10) ? ('0' + num) : num;
        }
      };
      var now = lamp.green;
      var timeout = now.timeout;
      lamp.changeStyle(now.style);
      count.change(timeout);
      setInterval(function() {
        if(--timeout <= 0) {
          now = lamp[now.next];
          timeout = now.timeout;
          lamp.changeStyle(now.style);
        }
        count.change(timeout);
      }, 1000);
    </script>
  </body>
 
 
</html>
目录
相关文章
|
19天前
|
JavaScript 前端开发
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
15 1
|
17天前
|
数据采集 JSON JavaScript
JS逆向-反反爬案例
破解爬虫JS加密反爬, 逆向JS解析
|
18天前
|
JavaScript 前端开发 API
JS案例:在浏览器实现自定义菜单
JS案例:在浏览器实现自定义菜单
14 0
|
18天前
|
JavaScript 前端开发 API
JS案例:前端Iframe及Worker通信解决思路
JS案例:前端Iframe及Worker通信解决思路
16 0
|
19天前
|
JavaScript 算法 中间件
JS案例:接口加解密与防重放
JS案例:接口加解密与防重放
11 0
|
1月前
|
JavaScript
three.js入门第一个案例
three.js入门第一个案例
|
12天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
23 2
|
12天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
26 4
|
12天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
20 4
|
12天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
30 4