JS中用一个button按钮实现开关灯效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><button>关灯</button><script>var btn = document.querySelector('button');var bg = document.querySelector('body');btn.onclick = function () {if (btn.innerHTML === '关灯') {bg.style.backgroundColor = 'black';btn.innerHTML = '开灯';}else {bg.style.backgroundColor = 'transparent';btn.innerHTML = '关灯';}}</script>
</body>
</html>

开灯：

关灯：

JS中用一个button按钮实现开关灯效果相关推荐

PHP——0128练习相关2——js点击button按钮跳转到另一个新页面
js点击button按钮跳转到另一个新页面投稿:whsnow 字体:[增加减小] 类型:转载时间:2014-10-10 我要评论点击按钮怎么跳转到另外一个页面呢?点击图片要跳转到新的页面时,怎 ...
在网页广告栏中经常看到左右来回移动的广告图片。请使用html+js实现一个左右移动的图片效果。图片自选。
在网页广告栏中经常看到左右来回移动的广告图片.请使用html+js实现一个左右移动的图片效果.图片自选. <!DOCTYPE html> <html><head>& ...
帮我用js写一个微信聊天那种气泡效果
当然可以! 下面是一个使用 JavaScript 实现微信聊天气泡效果的示例代码: .bubble {position: relative;background: #f1f1f1;border-rad ...
用js实现一个炫酷的烟花效果
我们要理清整个流程的思路. 首先建立一块画布,用于展示烟花的效果,然后就要去思考烟花燃放的流程,我们都知道烟花通常都是先有一份飞上天,然后再分散成很多个小烟花,并且每一个小烟花都有不同的样式以及运动方 ...
css+js实现一个跳动的loading动画效果
css+js实现跳动的loading动画 <!DOCTYPE html> <html lang="en"><head><meta char ...
android 按钮图片切换动画效果,Button按钮点击图片切换效果
Button按钮图片切换效果设置. 通常在工程中用到图片按钮点击事件,大多都用ImageButton.在这里我们用 Button的点击事件,在图片的切换过程中不再通过setBackgroundReso ...
原生js完成一个简单的抽奖功能
文章目录前言实现过程 1.前期准备 2.CSS美化 3.使用 js 完成抽奖功能 3.1 随机数模块 3.2 随机奖品 3.3 开始抽奖 3.4 点击开始抽奖完整代码 HTML部分 CSS部分 ...
用JS实现一个网页版节拍器
平时练尤克里里经常用到节拍器,突发奇想自己用js开发一个. 最后实现的效果如下:https://ahao430.github.io/metronome/. 代码见github仓库:https://gi ...
c语言自绘按钮例子,MFC自绘Button按钮分析和实现
对于按压式的Button按钮,WM_CTLCOLOR无法完成按钮控件的背景颜色和字体颜色修改,若想要完成外观定制需要添加WM_DRAWITEM消息或者重写CButton类中的DrawItem函数完成按 ...

JS中用一个button按钮实现开关灯效果

JS中用一个button按钮实现开关灯效果

JS中用一个button按钮实现开关灯效果相关推荐

最新文章

热门文章