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 进度条效果实现代码整理
May 21 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
angularjs中的单元测试实例
Dec 06 Javascript
浅谈页面装载js及性能分析方法
Dec 09 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
什么是JavaScript注入攻击?
Sep 14 Javascript
Node.js中process模块常用的属性和方法
Dec 13 Javascript
vscode下的vue文件格式化问题
Nov 28 Javascript
利用angular自动编译andriod APK的绕坑经历分享
Mar 08 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
vue中@change兼容问题详解
Oct 25 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 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
espresso double下 咖啡粉超细时 饼压力对咖啡的影响
2021/03/03 冲泡冲煮
用PHP控制用户的浏览器--ob*函数的使用说明
2007/03/16 PHP
php学习笔记 数组遍历实现代码
2011/06/09 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
点击广告后才能获得下载地址
2006/10/26 Javascript
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
Jquery鼠标放上去显示全名的实现方法
2017/02/06 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
python与caffe改变通道顺序的方法
2018/08/04 Python
python根据url地址下载小文件的实例
2018/12/18 Python
python去重,一个由dict组成的list的去重示例
2019/01/21 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
工会积极分子个人总结
2015/03/03 职场文书
山楂树之恋观后感
2015/06/11 职场文书
公司庆典主持词
2015/07/04 职场文书
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python