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 相关文章推荐
斜45度寻路实现函数
Aug 20 Javascript
JavaScript 题型问答有答案参考
Feb 17 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
如何在JavaScript中创建具有多个空格的字符串?
Feb 23 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 Javascript
js实现ajax的用户简单登入功能
Jun 18 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
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
Node.js 路由的实现方法
2019/06/05 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
Python + Requests + Unittest接口自动化测试实例分析
2019/12/12 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
pycharm导入源码的具体步骤
2020/08/04 Python
python 多线程中join()的作用
2020/10/29 Python
利用python绘制正态分布曲线
2021/01/04 Python
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
医学院护理专业应届生求职信
2013/11/12 职场文书
三个儿子教学反思
2014/02/03 职场文书
捐助倡议书范文
2014/04/15 职场文书
2016教师国培研修感言
2015/12/08 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
一文搞懂python异常处理、模块与包
2021/06/26 Python
Redis分布式锁Redlock的实现
2021/08/07 Redis
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python