原生js开灯关灯特效

今天练习js写的开关灯特效

老开心了

老有成就感了

嘻嘻嘻~~~

ps:白色效果不明显，我又改成粉色了

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style></style>
<body><button id="lampBtn">关灯</button><script>// 要实现的思路和功能// 默认页面是白色的（开灯状态），按钮显示的文字是关灯// 1点击按钮//   2获取当前开关灯状态//   3如果当前是开灯状态（body的背景颜色是白色），我们让body背景颜色变为黑色（关灯状态），按钮中显示关灯//   4如果当前是关灯状态（body的背景颜色是黑色），我们让body背景颜色变为白色（开灯状态），按钮显示关灯//1想要操作谁就先获取谁 body和按钮let lampBtn = document.getElementById('lampBtn');//获取按钮let body = document.body;//获取body//2事件绑定，点击按钮的时候做什么事情lampBtn.onclick = function(){// 元素.style.xxx =xxx,设置元素的行内样式，元素.style.xxx不赋值的情况下是获取元素的行内样式（记住是行内样式，// 不管在哪设置的样式，只要不是在行内上设置的，都获取不到）//获取body的背景颜色let bg = body.style.backgroundColor;if(bg==='white'){//当前body的北京颜色body.style.backgroundColor="black";lampBtn.innerText="开灯"}else{//当前处于关灯状态body.style.backgroundColor="white";lampBtn.innerText="关灯"}}</script>
</body>
</html>

原生js开灯关灯特效相关推荐

原生JS实现球面展示特效
分享一个由原生JS实现的球面展示效果,效果如下: 实现代码如下: <!DOCTYPE html> <html><head><meta http-equiv=& ...
原生JS实现飘浮关键词特效
分享一个原生JS实现的飘浮关键词的效果,鼠标悬停可让关键词停止运动,点击关键词可跳转到对应的页面,效果如下: 实现的代码如下: <!DOCTYPE html> <html>&l ...
开灯关灯问题的两种解决方式（数学建模线性代数的应用和编程实现）
开灯关灯问题的两种解决方式 1.问题介绍 2.编程实现算法及其代码(详细) 3.就该题进行数学建模–体验线性代数的使用 1.问题介绍有一个按钮组成的矩阵,其中每行有5个按钮,共5行.每个按钮旁边有一 ...
CSS实现开灯关灯的效果
CSS实现开灯关灯的效果 1. html文件 <!DOCTYPE html> <html lang="en"><head><meta ch ...
原生JS实现影集展示特效
分享一个用原生JS实现的影集展示特效,效果如下: 实现的代码如下: <!doctype html> <html><head><meta charset=&qu ...
2021年原生JS实现影集展示特效
JS最全最好的免费教程放在,码蝗网, <!doctype html> <html><head><meta charset="utf-8"& ...
原生JS实现翻书特效
给大家分享一个用原生JS实现的翻书效果图,效果如下: 实现代码如下,欢迎大家复制粘贴. <!doctype html> <html><head><meta c ...
开灯关灯java script_Jquery实现视频播放页面的关灯开灯效果
本示例使用Jquery实现视频播放页面的关灯开灯效果.其中视频显示使用embed 元素,该元素是html5的元素,所以使用支持html5的浏览器效果会更好. 效果预览网址:http://www.kel ...
Compose回忆童年 - 手拉灯绳-开灯/关灯
一.前言偶然间想到小时候顺着那白色开关垂下来的灯绳,拉一下"咔哒"一声,再拉一下又是"咔哒"一声.当时年龄小感觉新奇总是把灯开了关又关了开的拉着玩,以至于好几 ...

原生js开灯关灯特效

原生js开灯关灯特效相关推荐

最新文章

热门文章