建设部标准定额研究所网站,品牌策划网站推荐,wordpress 页面 微博,宣传片拍摄预算表效果 实现方式 计时器#xff1a;setTimeout或setInterval来计时。setInterval和 setTimeout 在某些情况下可能会出现计时不准确的情况。这通常是由于JavaScript的事件循环机制和其他代码执行所需的时间造成的。 问询#xff1a;通过getCurrentLight将每个状态的持续时间设置…效果 实现方式 计时器setTimeout或setInterval来计时。setInterval和 setTimeout 在某些情况下可能会出现计时不准确的情况。这通常是由于JavaScript的事件循环机制和其他代码执行所需的时间造成的。 问询通过getCurrentLight将每个状态的持续时间设置为精确的值并使用requestAnimationFrame来递归调用getCurrentLight函数我们可以更准确地控制交通灯的状态。
源码
index.html
!DOCTYPE html
htmlheadtitle交通灯/titlelink typetext/css relstyleSheet href./index.css //headbodydiv classtraffic-lightdiv classtraffic-containerdiv classlight green/divdiv classlight yellow/divdiv classlight red/div/divdiv classtime90/div/divscript typemoduleimport {TrafficLight} from ./TrafficLight.js;const time document.querySelector(.time);const trafficDom document.querySelector(.traffic-light);const light new TrafficLight({red:3,yellow:2,green:5,initial:red,});function raf(){requestAnimationFrame((){raf();const current light.getCurrentLight();time.textContent current.remain;trafficDom.className traffic-light ${current.color};console.log(current.color,current.remain);})}raf();/script/body
/htmlindex.css
* {margin: 0;padding: 0;box-sizing: border-box;
}body{width: 100vw;height: 100vh;margin: 0;/* backgroud: #191c29 */background: #fff;
}.traffic-light{width: 200px;margin: 10px auto;-webkit-box-flex: inherit;text-align: center;
}.light{width: 20px;height: 20px;border-radius: 10px;display:inline-block;background-color: gray;margin: 10px auto;
}.red .red{background-color: red;
}.green .green{background-color: green;
}
.yellow .yellow{background-color: yellow;
}.time{font-family: DS-Digital;font-size: 40px;
}TrafficLight.js
export class TrafficLight {constructor(options) {const {red 60,green 60,yellow 3,initial green,} options || {};this._colors {red:{seconds: red,next:yellow,},green:{seconds: green,next:yellow,},yellow:{seconds : yellow,},};this._switch(initial);}_switch(color){this._currentColor color;this._seconds this._colors[color].seconds;this._time Date.now();}_next(){if(this._currentColor red){this._colors.yellow.next green;} else if(this._currentColor green){this._colors.yellow.next red;} else{}this._switch(this._colors[this._currentColor].next);
}getCurrentLight(){const remain Math.ceil(this._seconds -(Date.now() - this._time)/1000);if(remain0){this._next();return this.getCurrentLight();}return {color: this._currentColor,remain,};}}字体 DS-Digital
下载字体 DS-Digital 注意下载安装字体后需要重启浏览器才生效
