<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

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

<body>

        <div class="box">

                <div id="red"></div>

                <div id="yellow"></div>

                <div id="green"></div>

                <div class="count" id="count"></div>

            </div>

</body>

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

</html>

js小练习---实现红绿灯的更多相关文章

  1. js小功能整理

    /** * 判断是否包含字符串某字符串 * @param {[type]} str [被检测的字符串] * @param {[type]} substr [检测是否含有的字符串] * @return ...

  2. [转载]Js小技巧||给input type=“password”的输入框赋默认值

    http://www.cnblogs.com/Raywang80s/archive/2012/12/06/2804459.html [转载]Js小技巧||给input type="passw ...

  3. 一些js小题（一）

    一些js小题,掌握这些对于一些常见的面试.笔试题应该很有帮助: var a=10; function aa(){ alert(a); } function bb(){ aa(); } bb();//1 ...

  4. 第24篇 js小知识和“坑”

    前面说了说了js的相关知识,基本上除了语法外,把项目常用的知识做了一个梳理,现在说下js的其它方面的知识,这些知识不成体系,属于不理解对于一般开发没什么太多影响,但如果理解清楚,可以更好去开发. js ...

  5. React.js 小书介绍

    React.js 小书 Github 关于作者 这是一本关于 React.js 的小书. 因为工作中一直在使用 React.js,也一直以来想总结一下自己关于 React.js 的一些知识.经验.于是 ...

  6. 一个js小游戏----总结

    花了大概一天左右的功夫实现了一个js小游戏的基本功能,类似于“雷电”那样的小游戏,实现了随即怪物发生器,碰撞检测,运动等等都实现了,下一个功能是子弹轨迹,还有其他一些扩展功能,没有用库,也没有用web ...

  7. React.js小书总结

    (迁移自旧博客2017 08 27) 第一阶段 react的组件相当于MVC里面的View. react.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合.嵌套,就成 ...

  8. js小技巧总结

    js小技巧总结 1.Array.includes条件判断 function test(fruit) { const redFruits = ["apple", "stra ...

  9. JS小积累（二）— 自动获取浏览器尺寸

    JS小积累-获取浏览器窗口尺寸 作者: 狐狸家的鱼 GitHub:八至 autodivheight(); function autodivheight() { //函数:获取尺寸 //获取浏览器窗口高 ...

随机推荐

  1. SpringBoot系列之集成Dubbo示例教程

    一.分布式基本理论 1.1.分布式基本定义 <分布式系统原理与范型>定义: "分布式系统是若干独立计算机的集合,这些计算机对于用户来说就像单个相关系统" 分布式系统(d ...

  2. Head First设计模式——组合模式

    最近比较忙,有段时间没有更新设计模式的进度了.今天继续学习组合设计模式. 组合模式的例子我们继续延续上篇<Head First设计模式——迭代器模式>的菜单例子,首先声明下迭代器和组合模式 ...

  3. 小小知识点（十五）——origin pro 2018 安装和消除demo字样

    安装 1.安装过成中选择语言为中文或者英文,安装完成后可在注册表中切换语言. 2.安装过程中使用序列号 中文版:DF2W8-9089-7991320英文版:GF3S4-9089-7991320 3.安 ...

  4. C#操作注册表(简单方便,兼容X32和X64)

    C#操作注册表(简单方便,兼容X32和X64) 大家好,我在这里给大家介绍本人实现的操作注册表的类,简单方便,兼容32位系统和64位系统. 一般大家用C#操作注册的方法是使用命名空间Microsoft ...

  5. [技术翻译]Web网页内容是如何影响电池使用寿命的？

    本周再来翻译一些技术文章,本次预计翻译三篇文章如下: 04.[译]使用Nuxt生成静态网站(Generate Static Websites with Nuxt) 05.[译]Web网页内容是如何影响 ...

  6. JVM之GC（三）

    前面介绍了GC和几种主流的GC算法,这节准备说一下垃圾收集器.垃圾收集器可以分为三类,Yong GC, Old GC, Mixed GC Yong GC 1.Serial 单线程处理,采用复制算法,通 ...

  7. Java之IO流用法总结

    Java的IO流概述:1.I/O是Input/Output的缩写,I/O技术是非常实用的技术,用于处理设备之间的数据传输.如读/写文件,网络通讯等.2.Java程序中,对于数据的输入/输出操作以“流( ...

  8. Asp.Net Core 3.0 Kestrel服务器下 高性能 WebSocket Server

    最近研究.net core 的各种高性能类型,内存池之类的东西,基于kestrel 服务器的websocket ,写个例子练下手 把原生的Websocket用ArrayPool<T>,Me ...

  9. Activiti 启动事件（Start Event）

    Activiti 启动事件(Start Event) 作者:Jesai 生活里,没有容易二字,忧伤是一种本能,而微笑是一种能力 版权所有,未经允许,禁止引用.如需引用,请注明出处. 前言: 启动事件是 ...

  10. ORM基础2 字段及其参数和meta

    一.ORM简介 1.概念:ORM(Object Relational Mappingt ),对象关系映射 2.实质:类与数据库之间的映射 3.优点: 开发人员不用写数据库 4.缺点: 开发人员,数据库 ...