Promise加定时器setInterval实现红绿灯倒计时

最新推荐文章于 2024-05-17 13:52:13 发布
VIP文章 最新推荐文章于 2024-05-17 13:52:13 发布
阅读量636 收藏
点赞数
文章标签： javascript 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43546842/article/details/126412468
版权

红绿灯

<style type="text/css">
			ul{
   
				width: 500px;
				display: flex;
				justify-content: space-around;
				background-color: #333;
				border-radius: 70px;
			}
			li{
   
				list-style: none;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				opacity: .1;
			}
			ul li:last-child{
   
				opacity: 1;
				background-color: #eee;
				line-height: 50px;
				text-align: center;
				
			}
			#green{
   
				background: green;
			}
			#y
最低0.47元/天 解锁文章
weixin_43546842
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
interval-promise:带有setTimeout语义的setInterval用于promise和asyncawait
04-30
间隔承诺 概述 该库提供了一种简单的机制，可以在两次执行之间以给定的时间运行诺言。 标准Javascript»setInterval（） 间隔承诺»interval（） 安装 npm install interval-promise 用法 使用async-await的简单示例 const interval = require ( 'interval-promise' ) // Run a function 10 times with 1 second between each iteration interval ( async ( ) => { await someOtherPromiseReturningFunction ( ) await another ( ) } , 1000 , { iterations : 10 } ) 原料药 interval ( func
html5利用setInterval实现新年元旦倒计时
12-14
html5利用setInterval实现新年元旦倒计时
promise setTimeout setInterval 执行顺序
08-20 1350
promise 马上执行,setTimeout会放到任务队列,最后执行setInterval 2 3 5 4 1 6 setInterval(()=>{ if (!flag){ console.log(6) flag=true } },1000) setTimeout(function () { console.log(1) }, 0); new Promise(...
js Promise
qq_43539854的博客
04-14 524
异步编程 JS异步机制 回调函数 使用多个回调函数嵌套会造成回调地狱，上下两层的代码耦合度高。 Promise Promise是ES6引入的异步编程的解决方案，Promise可以封装异步操作，获取成功和失败的结果。Promise的优点是：支持链式调用，可以解决回调地狱问题。 generator async 当函数内部执行到一个await语句时，如果语句返回一个promise对象，那么函数会等待promise变为resolve状态在继续向下执行。 Promise使用流程 首先创建Promise实例，然后P
Promise中seTimeout和setInterval的使用
阳阳的博客
03-10 805
最近在使用promise过程中突然想到如果在promise的resolve，reject中调用setInterval，会不会持续的触发resolve操作？ function a() { return new Promise((resolve, reject) => { setInterval(()=>{ resolve('resolved') }, 2000) }) } a().then(res =>
用promise封装定时函数setInterval
gunsmoke的专栏
02-29 2663
需求 1秒后打印数字1到30，完成打印后再过1秒打印数字31至60 代码 <script> function timer(callback,time) //这里是封装的函数 { return new Promise((resovle,reject)=>{ let timerId = set...
简单封装一个倒计时函数（Promise版）
weixin_42539854的博客
04-07 213
倒计时函数（Promise版） 函数 /** * 倒计时 * @param { NODE } node 渲染倒计时的结点 * @param { NUMBER } num 从多少秒开始计时 * @return{ PROMISE } 返回PROMISE */ function countDown (node, num) { return new Promise((resolve, reject) => { const timer = setInterval(() => {
封装setTimeout，setInterval定时器
weixin_51042892的博客
03-07 303
function timeout(delay=1000){ return new Promise(resolve=>setTimeout(resolve,delay) ) } timeout(4000).then(value=>{ console.log(1); return timeout(2000) }).then(value=>{ .
详解微信小程序用定时器实现倒计时效果
11-28
如果实现简单的60s倒计时效果，我们可直接使用setInterval即可，但是在微信小程序中，我们需要用微信小程序的语法，这时就会遇到一个难题，那就是怎么关闭定时器的问题，下面给出实例。 WXML代码 倒计时：...
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
12-28
时钟 　最简单的时钟制作办法是通过正则表达式的exec()方法，将时间对象的字符串中的时间部分截取出来，使用定时器刷新即可 <div id=myDiv></div> [removed] myDiv[removed] = /\d\d:\...　简易倒计时就是每
JavaScript定时器设置、使用与倒计时案例详解
01-19
本文实例讲述了JavaScript定时器设置、使用与倒计时案例。分享给大家供大家参考，具体如下： 1、设置定时器 定时器，适用于定时执行的任务中。在BOM的window对象中，有这样的两个函数是用于设置定时器 setTimeout...
JS使用setInterval实现的简单计时器功能示例
12-09
本文实例讲述了JS使用setInterval实现的简单计时器功能。分享给大家供大家参考，具体如下： 使用setInterval实现计时，并且满60秒向分钟进一，满60分钟向小时进一。 <!DOCTYPE html> <html> <head>...
Promise从入门到精通，小白必看
zag666的博客
09-23 567
Promise是什么？ Promise简介 Promise是一门新的技术(ES6规范)，是JS中进行异步编程的新解决方案(旧方案是单纯使用回调函数)。 从语法上看：Promise是一个构造函数(自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法)。 从功能上来说: Promise对象用来封装一个异步操作并可以获取其成功/失败的结果值。 异步编程： ①fs 文件操作 ②数据库操作 ③Ajax ④setInterval Promise的基本流程 Promise封装
js的异步方法：promise与定时器相遇，碰到的火花
weixin_44727080的博客
02-23 942
异步方法promise与定时器 在一起后，他们的顺序
使用setTimeout函数实现setInterval函数的效果，利用Promise来控制异步代码的执行顺序
热门推荐
似水流年的博客
07-18 1万+
如题，今天回顾了《JS高级程序设计》书中关于setTimeout函数和setInterval函数的描述，书中介绍到： 可见，在使用超时调用时，没有必要跟踪超时调用 ID，因为每次执行代码之后，如果不再设置另一次超时调用，调用就会自行停止。一般认为，使用超时调用来模拟间歇调用的是一种最佳模式。在开发环境下，很少使用真正的间歇调用，原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。 而像...
[前端基础]promise的基本使用(包括async,await语法糖)
weixin_62697030的博客
04-27 1419
众所周知,在以往,我们处理异步操作主要是通过回调函数处理例如这个定时器,异步操作会通过时间循环队列实现.但是比如说我们想要执行多个嵌套的异步操作就会变的很麻烦而且可读性非常差,代码像是很多层循环那样,向右延申,这种情况我们称之为"回调地狱"所以我们引入了promise这种东西,来处理回调地狱问题,promise对象会把异步操作封装在then函数的不同操作中,这样就实现了链式的异步调用举个例子,还是定时器let n=2;
【JavaScript】【5】定时器（包含回调函数与Promise）
weixin_51612770的博客
06-04 9309
JavaScript提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务。 回调无处不在，不仅在 DOM 事件中。一个常见的示例是使用定时器： XHR 请求也接受回调，在此示例中，会将一个函数分配给一个属性，该属性会在发生特定事件（在该示例中，是请求状态的改变）时被调用： 回调适用于简单的场景！但是，每个回调都可以添加嵌套的层级，并且当有很多回调时，代码就会很快变得非常复杂 这是一个简单的四
await Promise内部执行setTimeout定时器，提前clearTimeout，导致卡死的情况分析及解决方案
wuyxinu的博客
08-27 551
在我们日常开发中，我们常常需要在某个地方暂停某个动作一段时间。这个时候，我们的通常做法是使用setTimeout，配合promise实现。也就是如下代码。}, ms);});// 等待Promise的resolve操作完成但我们偶尔需要提前终止这个定时器。这时候我们会需要使用JavaScript 自带的clearTimeout方法，这个方法要求我们传入 timeoutId，也就是这个定时器的Id}, ms)
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
最新发布
u010234868的专栏
05-17 195
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
js红绿灯倒计时
05-31
以下是一个简单的红绿灯倒计时的JavaScript代码示例： ```html <!DOCTYPE html> <html> <head> <title>红绿灯倒计时</title> </head> <body> <div id="traffic-light"> <div class="red"></div> <div class="yellow"></div> <div class="green"></div> </div> <p id="timer"></p> <script> var redTime = 10; // 红灯倒计时时间（秒） var yellowTime = 3; // 黄灯倒计时时间（秒） var greenTime = 15; // 绿灯倒计时时间（秒） var redLight = document.querySelector('.red'); var yellowLight = document.querySelector('.yellow'); var greenLight = document.querySelector('.green'); var timer = document.querySelector('#timer'); function startRedLight() { redLight.classList.add('active'); timer.textContent = redTime + ' 秒'; var redTimer = setInterval(function(){ redTime--; timer.textContent = redTime + ' 秒'; if (redTime == 0) { clearInterval(redTimer); redLight.classList.remove('active'); startYellowLight(); } }, 1000); } function startYellowLight() { yellowLight.classList.add('active'); timer.textContent = yellowTime + ' 秒'; var yellowTimer = setInterval(function(){ yellowTime--; timer.textContent = yellowTime + ' 秒'; if (yellowTime == 0) { clearInterval(yellowTimer); yellowLight.classList.remove('active'); startGreenLight(); } }, 1000); } function startGreenLight() { greenLight.classList.add('active'); timer.textContent = greenTime + ' 秒'; var greenTimer = setInterval(function(){ greenTime--; timer.textContent = greenTime + ' 秒'; if (greenTime == 0) { clearInterval(greenTimer); greenLight.classList.remove('active'); startRedLight(); } }, 1000); } startRedLight(); // 开始红灯倒计时 </script> <style> #traffic-light { display: flex; flex-direction: column; align-items: center; margin-top: 50px; } #traffic-light > div { width: 100px; height: 100px; border-radius: 50%; margin-bottom: 20px; } .red { background-color: red; } .yellow { background-color: yellow; } .green { background-color: green; } .active { box-shadow: 0 0 5px 5px rgba(255, 255, 255, 0.5); } #timer { font-size: 30px; text-align: center; margin-top: 20px; } </style> </body> </html> ``` 该代码会在页面上显示一个红绿灯，同时在下方显示倒计时。红灯持续10秒，黄灯持续3秒，绿灯持续15秒，然后再次循环。你可以根据需求修改倒计时的时间。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值