js实现开关灯效果
更新时间：2020年03月30日 15:15:26 作者：欧阳manito
这篇文章主要为大家详细介绍了js实现开关灯效果,文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
效果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文很简单，给大家分享了一段使用javascript实现简单的贪吃蛇游戏的代码，算是对自己学习javascript的一次小小的总结，代码参考了网友的部分内容，推荐给大家，希望对大家能够有所帮助。2015-03-03
继承机制是面向对象程序设计使代码可以复用的最重要的手段，它允许程序员在保持原有的特性基础上进行扩展，增加功能，这样产生新的类，称作是派生类。继承呈现了面向对象程序设计的层析结构，体现了由简单到复杂的认知过程。继承是类设计层次的复用2022-12-12
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
本文讲一下js实现兼容IE6/7/8,firefox,chrome浏览器的回车和鼠标焦点事件的代码。2010-04-04
这篇文章主要为大家详细介绍了javascript中replace的使用方法，使用replace和正则表达式共同实现字符串trim方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
在网页开发中,我们经常需要对媒体文件进行处理,其中包括视频文件,有时候,我们可能需要从视频中提取特定的帧,并将其显示在网页上,本文将介绍如何使用JavaScript来实现这一功能,感兴趣的朋友跟着小编一起来看看吧2024-05-05
这篇文章主要为大家详细介绍了JavaScript实现图片切换效果，以及自定义属性的应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章介绍了eval优化输入验证实例代码，有需要的朋友可以参考一下2013-09-09
这篇文章主要介绍了Vuejs通过拖动改变元素宽度实现自适应,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-09-09
今天小编就为大家分享一篇关于js中Array对象的常用遍历方法详解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
这篇文章主要介绍了js实现的捐赠管理完整实例,包括了html页面、js脚本及css样式的完整实现代码,具有一定参考借鉴价值,需要的朋友可以参考下2015-01-01
最新评论