用html编写一个红绿灯,红绿灯.html

Document

body {

background-color: yellow;

}

红灯

// 需求：点击灯按钮，交通信号灯红 -》绿 -》黄 -》红....

思路分析

1. 获取事件源：button#btn

2. 确定事件类型：点击事件 onclick

3. 事件处理

3.1 获取按钮文字：innerText

3.2 判定：文字是什么灯，下次就变成什么效果，同时开关永远代表下一个灯

3.3 根据文字做不同的效果

* 改变背景色：body，标签选择器 document.body

* 改变按钮的文字：innerText = 新值

// 1. 获取事件源：button#btn

let btn = document.querySelector('#btn');

// 2. 确定事件类型：点击事件 onclick

btn.onclick = function () {

// 3. 事件处理

// 3.1 获取按钮文字：innerText

let value = this.innerText;

// 3.2 判定：文字是什么灯，下次就变成什么效果，同时开关永远代表下一个灯

// 3.3 根据文字做不同的效果

// * 改变背景色：body，标签选择器 document.body

// * 改变按钮的文字：innerText = 新值

if (value == '红灯') {

document.body.style.backgroundColor = 'red';

this.innerText = '绿灯';

} else if (value == '绿灯') {

document.body.style.backgroundColor = 'green';

this.innerText = '黄灯';

} else {

document.body.style.backgroundColor = 'yellow';

this.innerText = '红灯';

}

};

一键复制

编辑

Web IDE

原始数据

按行查看

历史

用html编写一个红绿灯,红绿灯.html相关推荐

WMI技术介绍和应用——使用VC编写一个半同步查询WMI服务的类
在<WMI技术介绍和应用--VC开发WMI应用的基本步骤>文中,我们介绍了VC使用WMI技术的基本框架.本节我将讲解封装和实现一个用于半同步查询WMI的类.(转载请指明出于breaksof ...
编写一个最简单的.php,学习猿地- 说明如果我们要编写一个简单的PHP脚本，需要学习哪些...
说明如果我们要编写一个简单的 PHP 脚本,需要学习哪些基础知识呢? PHP 基础 PHP 脚本可放置于文档中的任何位置. 标准的 PHP 脚本以 <?php 开头,以 ?> 结尾: ...
python写一个文件下载器_Python3使用TCP编写一个简易的文件下载器
原标题:Python3使用TCP编写一个简易的文件下载器利用Python3来实现TCP协议,和UDP类似.UDP应用于及时通信,而TCP协议用来传送文件.命令等操作,因为这些数据不允许丢失,否则会造 ...
c语言中如何设计和编写一个应用系统？
C程序中,如何设计和编写一个应用系统? 一. C语言文件的操作 1. 文件操作的基本方法: C语言将计算机的输入输出设备都看作是文件.例如,键盘文件.屏幕文件等. 向屏幕输出一个信息,例如" ...
如何编写一个可升级的智能合约
链客,专为开发者而生,有问必答! 此文章来自区块链技术社区,未经允许拒绝转载. 如何编写一个可升级的智能合约区块链信任基础的数据不可修改的特性,让它传统应用程序有一个很大的不同的地方是一经发布于区块 ...
Linux环境下编写一个shell程序，此程序的功能：随机生成一个1-100的数（答案）让用户猜
题目:编写一个shell程序,此程序的功能:随机生成一个1-100的数(答案)让用户猜,如果用户猜的数大于答案,则提示大了,如果用户猜的数小于答案,则提示小了.当用户猜对时提示:猜对了. #! /bi ...
试编写一个汇编语言程序，要求从键盘接收一个四位的十六进制数，并在终端上显示与它等值的二进制数
试编写一个汇编语言程序,要求从键盘接收一个四位的十六进制数,并在终端上显示与它等值的二进制数 data segment data ends stack segment stack dw 30h dup ...
试编写一个汇编语言程序，要求对键盘输入的小写字母用大写字母显示出来
试编写一个汇编语言程序,要求对键盘输入的小写字母用大写字母显示出来 DATA SEGMENT DATA ENDS STACK SEGMENT STACK ENDS CODE SEGMENT ASSUM ...
编写一个程序，实现将c语言源程序中的注释全部删除
<程序设计基础-c语言>杨莉刘鸿翔 ISBN-978-7-03-032903-5 p257 习题8 6.编写一个程序,实现将c语言源程序中的注释全部删除 #include<stdl ...
设计所需的各种输出格式（包括整数、实数、字符串等），用一个文件名format.h把这些信息都包括到此文件内，另编写一个文件，用文件包含命令验证可以使用这些格式
<程序设计基础-c语言>杨莉刘鸿翔 ISBN-978-7-03-032903-5 p241 习题7 16.设计所需的各种输出格式(包括整数.实数.字符串等),用一个文件名"fo ...

用html编写一个红绿灯,红绿灯.html

用html编写一个红绿灯,红绿灯.html相关推荐

最新文章

热门文章