每天都在红绿灯前面梭行,不如自己来实现个红绿灯?

交通灯封面

用js实现一个交通灯

  • 🔇前言
  • 🔈一、需求分析 - 交通灯
  • 🔉二、实现版本
    • 1. 版本一:简单粗暴版
    • 2. 版本二:数据抽象版
    • 3. 版本三:过程抽象版
    • 4. 版本四:命令式和声明式
  • 🔊三、在线online
  • 📢四、结束语
  • 📣往期推荐

🔇前言

在我们的日常生活中,每天上班下班,伴随着我们最多的莫过于红绿灯了。那么,在下面的这篇文章中,我们将手动的来实现一个交通灯。瞅瞅每天都在看的红绿灯,它到底是怎么实现的呢?

🔈一、需求分析 - 交通灯

首先,我们想要实现的是可以切换多种交通状态功能的交通灯。如下图所示:

红绿灯

接下来,我们将由浅入深的,讲解多种版本的实现方式。

🔉二、实现版本

1. 版本一:简单粗暴版

下面先附上代码:

HTML 代码:

<ul id="traffic" class="wait"><li></li><li></li><li></li><li></li><li></li>
</ul>

CSS 代码:

#traffic {display: flex;flex-direction: column;
}#traffic li{list-style: none;width: 50px;height: 50px;background-color: gray;margin: 5px;border-radius: 50%;
}#traffic.s1 li:nth-child(1) {background-color: #a00;
}#traffic.s2 li:nth-child(2) {background-color: #aa0;
}#traffic.s3 li:nth-child(3) {background-color: #0a0;
}#traffic.s4 li:nth-child(4) {background-color: #a0a;
}#traffic.s5 li:nth-child(5) {background-color: #0aa;
}

JS 代码:

const traffic = document.getElementById('traffic');(function reset(){traffic.className = 's1';setTimeout(function(){traffic.className = 's2';setTimeout(function(){traffic.className = 's3';setTimeout(function(){traffic.className = 's4';setTimeout(function(){traffic.className = 's5';setTimeout(reset, 1000)}, 1000)}, 1000)}, 1000)}, 1000);
})();

此时浏览器的显示效果为:

交通灯显示效果

ok,到这里,我们就基本上完成了交通灯的基本形态。但是呢,是否有小伙伴觉得,在上面的 JS 代码中,有点暴力实现了。首先它是先创建了一个闭包 ()() ,然后呢,之后呢,要切换状态的时候,通过一层一层的 setTimeout() 去进行状态切换,这样子实现的话,不管是从复杂度来讲,还是其他层面上来讲,都是非常的恐怖的。

因此呢,我们要来进行第二版本的改进,对数据进行抽象

2. 版本二:数据抽象版

先附上代码:

HTML 代码:

<ul id="traffic" class="wait"><li></li><li></li><li></li>
</ul>

CSS 代码:

#traffic {display: flex;flex-direction: column;
}#traffic li {display: inline-block;width: 50px;height: 50px;background-color: gray;margin: 5px;border-radius: 50%;
}#traffic.stop li:nth-child(1) {background-color: #a00;
}#traffic.wait li:nth-child(2) {background-color: #aa0;
}#traffic.pass li:nth-child(3) {background-color: #0a0;
}

JS 代码:

const traffic = document.getElementById('traffic');const stateList = [{state: 'wait', last: 1000},{state: 'stop', last: 3000},{state: 'pass', last: 3000},
];function start(traffic, stateList){function applyState(stateIdx) {const {state, last} = stateList[stateIdx];traffic.className = state;setTimeout(() => {applyState((stateIdx + 1) % stateList.length);}, last)}applyState(0);
}start(traffic, stateList);

此时浏览器的显示效果为:

数据抽象显示效果

在上面的代码中,我们对等待停止通过这三种状态进行数据抽象,首先是接收一组状态,然后再根据这组状态来进行某些指令的操作,比如通过改变元素的 class 来做状态的切换。

我们可以把它理解为是把状态中的数据给封装起来,以此来使得代码更具有扩展性。

但是呢,数据抽象还远远不够,因此呢,接下来我们来介绍第三个版本,过程抽象

3. 版本三:过程抽象版

先附上代码:

HTML 代码:

<ul id="traffic" class="wait"><li></li><li></li><li></li>
</ul>

CSS 代码:

#traffic {display: flex;flex-direction: column;
}#traffic li{display: inline-block;width: 50px;height: 50px;background-color: gray;margin: 5px;border-radius: 50%;
}#traffic.stop li:nth-child(1) {background-color: #a00;
}#traffic.wait li:nth-child(2) {background-color: #aa0;
}#traffic.pass li:nth-child(3) {background-color: #0a0;
}

JS 代码:

const traffic = document.getElementById('traffic');function wait(ms) {return new Promise(resolve => setTimeout(resolve, ms));
}function poll(...fnList){let stateIndex = 0;return async function(...args){let fn = fnList[stateIndex++ % fnList.length];return await fn.apply(this, args);}
}async function setState(state, ms){traffic.className = state;await wait(ms);
}let trafficStatePoll = poll(setState.bind(null, 'wait', 1000),setState.bind(null, 'stop', 3000),setState.bind(null, 'pass', 3000));(async function() {// noprotectwhile(1) {await trafficStatePoll();}
}());

此时浏览器的显示效果为:

过程抽象显示效果

在上面的过程抽象中呢,上面的切换状态呢,是一个典型的轮询操作。所以呢,我们可以抽象出一个轮询方法,来把我们前面的 start 方法抽象成一个轮询方法,然后在这个轮询方法里面呢,我们给它一个 function list ,也就是一系列的操作函数。

之后呢,我们在 fnList 里面取出当前状态的操作函数,最后去执行这个函数。

在上面的这个过程中呢,我们实现的是过程抽象。那其实对于这个例子来说,它是一个异步问题,因此,我们可以通过 promiseasyncawait 等方式来解决这个问题。请看下方。

4. 版本四:命令式和声明式

先附上代码:

HTML 代码:

<ul id="traffic" class="wait"><li></li><li></li><li></li>
</ul>

CSS 代码:

#traffic {display: flex;flex-direction: column;
}#traffic li{display: inline-block;width: 50px;height: 50px;background-color: gray;margin: 5px;border-radius: 50%;
}#traffic.stop li:nth-child(1) {background-color: #a00;
}#traffic.wait li:nth-child(2) {background-color: #aa0;
}#traffic.pass li:nth-child(3) {background-color: #0a0;
}

JS 代码:

const traffic = document.getElementById('traffic');// wait操作,即等待多长时间
function wait(time){return new Promise(resolve => setTimeout(resolve, time));
}// 设置状态
function setState(state){traffic.className = state;
}async function start(){//noprotectwhile(1){setState('wait');await wait(1000);setState('stop');await wait(3000);setState('pass');await wait(3000);}
}start();

此时浏览器的显示效果是:

命令式和声明式结果

交通灯的切换可以把它视为是一个不停的循环,那在这个循环里面呢,他会先 setState 一个状态,之后 await 一段时间。后面继续再 setState 一个状态,然后又 await 一段时间,以此类推。

那在实际的应用中,如果我们要对其进行扩展的时候,可以通过修改 while 的方式来进行操作。

🔊三、在线online

以上四个版本的在线地址:

  • 版本一:简单粗暴版
  • 版本二:数据抽象版
  • 版本三:过程抽象版
  • 版本四:命令式和声明式

📢四、结束语

到这里,由浅入深的四个交通灯版本的实现就讲解结束啦!

如果换在以前,那我我可能用暴力破解和数据抽象的方法多一点,那通过上文的学习,现在我又多学习了过程抽象和命令式和声明式。

所以说, js 还有很多高阶的内容值得我们去探索和挖掘~

如果您觉得这篇文章有帮助到您的的话不妨点赞支持一下哟~~😉

📣往期推荐

👉值得关注的HTML基础知识

👉css还只停留在写布局?10分钟带你探索css中更为奇妙的奥秘!

👉前端只是切图仔?来学学给开发人看的UI设计

👉紧跟月影大佬的步伐,一起来学习如何写好JS(上)

👉紧跟月影大佬的步伐,一起来学习如何写好JS(下)

👉听红宝书译者谈Web视角下的前端开发

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/307867.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Git 常用操作 | 重写 commit 历史

当我们修改完代码&#xff0c;提交了一个 commit&#xff0c;然后发现改错了&#xff0c;怎么修正&#xff1f;这种情况分为两种&#xff1a;修正最近一次提交&#xff0c;和修正历史多个提交。修正最近一次提交如果发现刚刚提交的内容有错误&#xff0c;当场再修改一下再提交一…

leetcode257. 二叉树的所有路径(两种做法)

一:题目 二:上码 1&#xff1a;DFS /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr), …

【LeetCode之C#解法】 移动零、爬楼梯

题目官网链接https://leetcode-cn.com/problems/move-zeroes/283. 移动零给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。示例:输入: [0,1,0,3,12]输出: [1,3,12,0,0]说明:必须在原数组上操作&#xff0c;不能拷…

幂等问题 vs 如何判断是否是4的幂

判断是否是4的幂&#x1f939;序言&#x1f6b4;一、需求分析 - 判断是否是4的幂等&#x1f93e;二、实现版本1. 版本一&#xff1a;中规中矩法2. 版本二&#xff1a;按位与3. 版本三&#xff1a;按位与优化4. 版本四&#xff1a;正则匹配法⛹️三、结束语&#x1f93c;往期推荐…

leetcode404. 左叶子之和

一&#xff1a;题目 二:上码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr), right(n…

切西瓜法实现微信抢红包功能

运用切西瓜法和栅栏法实现微信抢红包功能✅前言☑️一、需求分析 - 分红包问题&#x1f199;二、实现版本1. 版本一&#xff1a;切西瓜法2. 版本二&#xff1a;栅栏法✳️三、在线Online&#x1f197;四、结束语&#x1f19a;往期推荐✅前言 在现实生活中&#xff0c;非常常见…

如何给扑克洗牌才能更公平?

如何给扑克牌洗牌才能更显公平性&#x1f4fb;前言一、&#x1f399;️需求分析 - 洗牌问题二、&#x1f4bf;实现版本1. 版本一&#xff1a;常规思维2. 版本二&#xff1a;验证公平性3. 版本三&#xff1a;交换法则三、&#x1f4fa;在线Online四、&#x1f4f9;结束语&#x…

这些年我是怎么自学成架构师的(转自知乎)

近日在知乎上一则关于程序员能否“自学成才”的问题&#xff0c;引发了激烈的讨论&#xff01;各种各样的说法都有&#xff0c;最终变成程序员晒学习经历的帖子。作为十多年.NET技术老兵&#xff0c;纯自学成架构师&#xff0c;也来分享下观点&#xff1a;自学当然有效&#xf…

创新视角下的复盘 | 2021/08/01-2021/09/30

&#x1f5c2;️序言 七月份的时候第一次做月度复盘&#xff0c;发现如果只有每日计划&#xff0c;还是比较零散的。月度复盘可以更直观地看到自己的时间规划和及时纠正当下存在的一些问题。 在8-9月份中&#xff0c;有一半在暑假&#xff0c;一半开始于新学期。 &#x1f4…

TIOBE 9 月榜单:C#上涨1.18,Java 同比下滑3.18

喜欢就关注我们吧&#xff01;TIOBE 已公布 2020 年 9 月的编程语言排行榜。C 近期发展状态不错&#xff0c;依旧在榜单中排第四&#xff0c;但排名比率保持增长&#xff0c;本月为 7.11%。2003 年是 C 的巅峰时期&#xff0c;当年 8 月&#xff0c;它的 TIOBE 排名峰值为 17.5…

储存引擎InnoDB 索引选择 为何是B+树 而不是 B树 哈希表

一:概述 首先需要澄清的一点是&#xff0c;MySQL 跟 B 树没有直接的关系&#xff0c;真正与 B 树有关系的是 MySQL 的默认存储引擎 InnoDB&#xff0c;MySQL 中存储引擎的主要作用是负责数据的存储和提取&#xff0c;除了 InnoDB 之外&#xff0c;MySQL 中也支持 MyISAM 作为表…

初探react,用react实现一个todoList功能

初探react&#xff0c;用react实现一个todoList功能&#x1f6f0;️前言&#x1f680;一、react基础1. react简介2. 开发环境搭建3. 工程目录文件简介4. react中最基础的JSX语法&#x1f6f8;二、使用react编写TodoList功能1. 页面构思2. React中的响应式设计思想和事件绑定3. …

《五分钟商学院》个人篇学习总结(上)

【商业知识】| 作者 / Edison Zhou这是EdisonTalk的第285篇原创内容商业篇聚焦的是我们与外部的关系&#xff0c;管理篇聚焦的是我们与内部的关系&#xff0c;而个人篇聚焦的则是我们与自己的关系。与自己斗&#xff0c;其乐无穷&#xff0c;本文是个人篇的上半部分学习总结。本…

Git 实用操作 | 撤销 Commit 提交

有的时候&#xff0c;改完代码提交 commit 后发现写得实在太烂了&#xff0c;连自己的都看不下去&#xff0c;与其修改它还不如丢弃重写。怎么操作呢&#xff1f;使用 reset 撤销如果是最近提交的 commit 要丢弃重写可以用 reset 来操作。比如你刚写了一个 commit&#xff1a;写…

react只停留在表层?五大知识点带你梳理进阶知识

五大知识点带你梳理react进阶知识✉️前言&#x1f4e7;一、props1、PropTypes与DefaultProps应用&#xff08;1&#xff09;PropTypes&#xff08;2&#xff09;defaultProps2、props&#xff0c;state与render函数&#x1f4e8;二、React中的虚拟DOM1、什么是虚拟DOM&#xf…

解决 WPF 绑定集合后数据变动界面却不更新的问题

解决 WPF 绑定集合后数据变动界面却不更新的问题独立观察员 2020 年 9 月 9 日在 .NET Core 3.1 的 WPF 程序中打算用 ListBox 绑定显示一个集合&#xff08;满足需求即可&#xff0c;无所谓什么类型的集合&#xff09;&#xff0c;以下是 Xaml 代码&#xff08;瞟一眼就行&…

「offer来了」面试中必考的15个html知识点

「面试专栏」前端面试之html篇⚡序言⭐一、题集内容抢先看&#x1f320;二、规范相关1、你如何理解HTML结构的语义化2、浏览器是怎么对 Html5 的离线储存资源进行管理和加载的呢3、HTML W3C的标准4、Doctype作用? 严格模式与混杂模式如何区分&#xff1f;它们有何意义?5、vie…

leetcode700. 二叉搜索树中的搜索

一:题目 二:上码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr), right(nullptr) {}*…

「offer来了」1张思维导图,6大知识板块,带你梳理面试中CSS的知识点!

「面试专栏」前端面试之css篇⌛序言✏️一、CSS框架先梳理&#x1f58c;️二、基础样式问题1、请你讲一讲css的权重和优先级&#xff08;1&#xff09;权重&#xff08;2&#xff09;优先级2、说一下CSS的position属性3、span 标签是否可以设置宽高&#xff0c; margin 和 padd…

动态代理的理解

一:动态代理和静态代理的区别 静态代理&#xff1a;了解设计模式中的代理模式的童鞋应该都知道&#xff0c;如果想要生成代理类&#xff0c;需要让代理类和被代理类实现同一个接口&#xff0c;并且在代理类中添加被代理类的引用&#xff0c;代理类方法实现中添加代理逻辑&…