【js 实现红绿灯变换】的更多相关文章

js 实现红绿灯变换

class LightFn{ async run(){ while(true){ console.log('this is green 3000'); await this.sleep(3000); console.log('this is yellow 1000'); await this.sleep(1000); console.log('this is red 2000'); await this.sleep(2000); } } sleep(duration){ return new P…

一个 div 手写红绿灯- 分别用css3 和 js 实现

[要求] 一个div,配合 css3 或者 js 实现红绿灯切换的效果. [思路] 使用 css3,要实现红绿灯颜色的变换必然要用到 animation 动画,通过 keyframes 控制颜色的渐变效果. 使用 js,则需要使用定时器,在定时器的方法中改变 div 的类名或者直接修改样式,来控制颜色的变换. [实现] 首先看dom结构,非常简单,一个div: <div class="hld" id="hld"></div> 基本样式: .h…

扑面而来的碎片--图片3D炸裂效果初体验

之前逛园子的时候看到 ChokCoco 的爆炸效果作品:[BOOM]一款有趣的Javascript动画效果 (大神英文有没有拼错呀←.←),觉得蛮有意思的,效果如下: 不过觉得这个爆炸效果还是偏软了一点,没有爆炸那种碎片飞溅的感觉,一直念念不忘想要自己做一个3D效果的爆炸动效.这两天在搞一些小动画,就顺便也把3D爆炸做了出来,动画效果: 实现 原理很简单,就是用很多小图片拼凑成大图片,然后让小图片按照一定规律运动形成爆炸效果.这里的爆炸效果用的是 CSS3 的 3D 变换来做的,通过 js 动态…

Grunt usemin

yeoman/grunt-usemin 用来将 HTML 文件中(或者 templates/views)中没有优化的 script 和 stylesheets 替换为优化过的版本. usemin 暴露两个内置的任务,分别为: useminPrepare 为将指定文件中的 usemin block 转换为单独的一行(优化版本)准备配置.这通过为每个优化步骤生成名为generated 的子任务来完成. usemin 使用优化版本替换 usemin 块,如果在磁盘上可以找到 revisioned 版本…

Micropython TurnipBit 青少年入门编程 交通灯实验

不知道大家小时候对红绿灯的原理有什么研究过,我是农村的孩子直到初中才见到真实的红绿灯,当时我记得很清楚,在那个路口站了五六分钟就盯着红绿灯变换,搞不清原理,只觉得神奇.现在想来实在可笑,今天写这个的很大一部分原因是为了幼时的自己.原理很简单,我不叫他教程,我叫他打开青少年编程大门的钥匙. 所需原器件:    TurnipBit一块    TurniPBit扩展板一块    发光二极管若干    杜邦线若干    usb数据线一条    面包板一块    1k电阻一个(发光二极管很容…

Java中枚举的使用

Java中枚举其实就是静态常量,今天发现枚举里面其实还能加方法,学习了下, 代码如下: package org.pine.test; import java.util.HashMap; import java.util.Map; public enum Color { //静态常量 RED(1,"红色"),GREEN(2,"绿色"),BLUE(3,"蓝色"),YELLOW(7,"黄色"); //属性 private int i…

JavaScript深拷贝—我遇到的应用场景

简述 深拷贝即拷贝实例,其作用是为了不影响拷贝后的数组对起原数组造成影响.这时我们就需要进行深拷贝.(JavaScript的继承) 我遇到的应用场景 我是在用vue的element-ui做项目的时候遇到的,这是一个播放和暂停的按钮切换功能 代码: 图标就是代码中的a标签,下面是实现的js代码部分 //变换播放/暂停按钮 if (this.playClass[tagID] = 'playbtn1') { this.playClass[tagID] = 'playbtn'; this.wavesur…

<JAVA图像学习笔记>十字路口交通模拟--操作系统模拟课后小项目

项目的要求很简单: 模拟出十字路口的交通控制情况: 秒. 当东西(或南北)方向红灯时,所有车辆(除了消防车.救护车.警车)均排队等待,当东西(或南北)方向绿灯时,所有车辆按序行驶(不准超车). 制作这个小框体程序我选择的平台是JAVA,实现结果效果图如下所示: 首先分析整个项目题目上的要求,在十字路口上通过的车辆可以抽象为两类:普通车辆和特殊车辆(包括警车,消防车,救护车等),所谓普通的车辆和特殊种类的车辆之间的差别是是否需要在红绿灯路口之前进行等待操作,特殊车辆享有优先权并且可以直接通过路口,…

JS实现随机背景图片与图片大小变换的效果

经常在网上见一些网站访问一次背景图片改变一次,而且图片的大小不停变换,于是想着自己研究一下. 背景图片可以通过JS的随机数来改变图片的src来实现随机图片,图片的大小变换可以用JS的setInterval实现. img目录下的图片: 测试代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src=&q…

JS实现鼠标移入DIV随机变换颜色

今天分享一个在 JavaScript中,实现一个鼠标移入可以随机变换颜色,本质就是js的随机数运用. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 这里定义一下div(块元素)已下span 标签的宽.高.边框线以及边框线的颜色*/ span{ display: block; wi…