js实现开关灯效果


Posted in Javascript onMarch 30, 2020

本文实例为大家分享了js实现开关灯效果的具体代码,供大家参考,具体内容如下

开关灯

<style>
 body{background: black;cursor: pointer;}
 .lamp{width: 100px;height: 100px;border-radius: 50%;background: #ccc;}
 .pole{width: 10px;height: 400px;background: brown;margin-left: 45px;}
 .toggle{width: 80px;height: 40px;background: green;border-radius: 5px;margin-left: 10px;color: white;line-height: 40px;text-align: center;} 
</style>
<body id="bg">
 <!-- 灯 -->
 <div class="lamp" id="lamp"></div>
 <!-- 灯线 -->
 <div class="pole"></div> 
 <!-- 开关 -->
 <div class="toggle" id="toggle">开灯</div>
 <script>
// web前端三门语言
// html
// css 
// javascript===>脚本语言,丰富动画,操作事件等
// 需要写在script标签内,script标签可以放置在html的任意位置
// 比较常见的三个位置,
// 1.body体内,html标签下面
// 2.body体外的下面
// 3.head头部style标签的下面

// js动效的操作思路:
// 1.操作谁先获取谁;
// var 创建、声明变量
// toggle 变量名
// document事件元素,事件流
// getElementById 获取元素通过ID名的形式。 
 var toggle = document.getElementById('toggle');
 var lamp = document.getElementById('lamp');
 var bg = document.getElementById('bg')
// 2.操作用什么事件
 toggle.onclick = function(){
 //验证当前操作
 // console.log代表打印某某某。
 // console.log(123456789) 
// 3.事件发生时需要做什么
// if,else事件判断逻辑
// innerHTML===>元素的内容
 if(toggle.innerHTML=='开灯'){
 lamp.style.background='yellow';
 bg.style.background='white'; 
 //开灯之后要将toggle改变为'关灯'
 toggle.innerHTML='关灯' 
 }else{
 lamp.style.background='#ccc';
 bg.style.background='black';
 toggle.innerHTML='开灯' 
 }
 } 

 </script> 
</body>

效果图

js实现开关灯效果

js实现开关灯效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript自动显示最后更新时间
Mar 15 Javascript
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
js 第二代身份证号码的验证机制代码
May 12 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
Mar 10 Javascript
基于javascript实现按圆形排列DIV元素(二)
Dec 02 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
浅谈JS验证表单文本域输入空格的问题
Feb 14 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
微信小程序云开发之使用云存储
May 17 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
Vuex的热更替如何实现
Jun 05 Javascript
JS实现灯泡开关特效
Mar 30 #Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 #Javascript
javascript网页随机点名实现过程解析
Oct 15 #Javascript
javascript随机变色实例代码
Oct 15 #Javascript
vue中axios的二次封装实例讲解
Oct 14 #Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 #Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 #Javascript
You might like
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
文字幻灯片
2006/06/26 Javascript
JAVASCRIPT对象及属性
2007/02/13 Javascript
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
最短的IE判断代码
2011/03/13 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
基于js Canvas实现二次贝塞尔曲线
2018/12/25 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
python获取豆瓣电影简介代码分享
2014/01/16 Python
python在命令行下使用google翻译(带语音)
2014/01/16 Python
Python中基础的socket编程实战攻略
2016/06/01 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
tensorflow多维张量计算实例
2020/02/11 Python
python def 定义函数,调用函数方式
2020/06/02 Python
python通过cython加密代码
2020/12/11 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
面向对象编程OOP的优点
2013/01/22 面试题
小学社会实践活动总结
2014/07/03 职场文书
2014年居委会工作总结
2014/12/09 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
浅谈MySQL user权限表
2021/06/18 MySQL
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS