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 相关文章推荐
js select常用操作控制代码
Mar 16 Javascript
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
关于javascript作用域的常见面试题分享
Jun 18 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
JS实现简易日历效果
Jan 25 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
thinkPHP的表达式查询用法详解
2016/09/14 PHP
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
JavaScript实现实时更新系统时间的实例代码
2017/04/04 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
jQuery实现推拉门效果
2020/10/19 jQuery
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
爬山算法简介和Python实现实例
2014/04/26 Python
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
python tkinter基本属性详解
2019/09/16 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
DataList 能否分页,请问如何实现?
2015/05/03 面试题
高校优秀辅导员事迹材料
2014/05/07 职场文书
高一新生军训方案
2014/05/12 职场文书
考试诚信承诺书
2014/05/23 职场文书
国际商务专业求职信
2014/07/15 职场文书
节能环保演讲稿
2014/08/28 职场文书
2014年派出所工作总结
2014/11/21 职场文书
先进党员事迹材料
2014/12/24 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
母亲去世追悼词
2015/06/23 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
销售会议开幕词
2016/03/04 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang