light.gif

JS实现一个开关灯的效果，这是JS事件的一个基础示例，同学们好好学习一下吧。实现方式其实有很多种的，给大家一个简单的实现。

HTML代码

JS代码

添加框架

window.onload = function(){

}

获取元素

var light = document.getElementById("light");

var button = document.getElementById("button");

设置单击事件

增加一个全局变量，用来保存开关状态。默认状态与HTML初始图片保持一致，即默认为关闭状态。

var open = false;

给开关加上单击事件。通过开关状态判断，设置不同图片。

button.οnclick=function(){

if(open){

this.src="close.png";

light.src="light-off.png";

open = false;

}else{

this.src="open.png";

light.src="light-on.png";

open = true;

}

};

OK，三步完成JS开关灯效果，简单吧~。

JS代码总汇

window.onload = function(){

var light = document.getElementById("light");

var button = document.getElementById("button");

var open = false;

button.οnclick=function(){

if(open){

this.src="close.png";

light.src="light-off.png";

open = false;

}else{

this.src="open.png";

light.src="light-on.png";

open = true;

}

};

图片资源如下：

open.png

close.png

light-on.png

light-off.png

开关灯效果HTML,JS特效：开关灯相关推荐

开关灯效果HTML,js实现开关灯效果
本文实例为大家分享了js实现开关灯效果的具体代码,供大家参考,具体内容如下开关灯 body{background: black;cursor: pointer;} .lamp{width: 100p ...
html js 链接滚动效果,【JS特效】不间断滚动效果通用类
网上发现一个不错的js不间断滚动效果,今天来转载一下吧.这个js的作者应是崔永祥(因其博客已不存在,而无法确认),我这里只简单整理,只为笔记. ??? 需要通过样式,js来实现这个翻滚效果. ??? ...
如何运用JS特效将网页设计变得更加生动有趣
在当今互联网时代,网页设计变得愈加重要.除了考虑到网页的基本框架和功能,特效也成为了设计师用来吸引读者眼球和提高用户体验的重要手段之一.今天我们将探讨如何使用JS特效将网页设计变得更加生动有趣. 动态 ...
JS中用一个button按钮实现开关灯效果
JS中用一个button按钮实现开关灯效果 <!DOCTYPE html> <html lang="en"> <head><meta ch ...
JS实现网页开关灯效果
问题描述:按下网页上的"开关灯"按钮即可实现网页背景颜色变化的功能(变黑/变白)即 "开关灯". <!DOCTYPE html> <html ...
元素的样式设置元素类样式的操作开关灯效果获取兄弟元素当前元素的兄弟元素样式
元素的样式设置 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
开关灯效果HTML,开关灯效果
开关灯效果预览效果 HTML代码 CSS代码 html,body{height:auto} body{ background-color: #000} .lightbulb{ float: left ...
html玫瑰花效果代码,html5渲染3D玫瑰花情人节礼物js特效代码
情人节马上就要到来了,这里给程序员前端设计师们献上一个,html5渲染而成的3D玫瑰花js效果,可以作为虚拟的情人节礼物送给自己的爱人.支持html5的浏览器查看. 查看演示下载资源: 16 次下 ...
JS特效代码大全（十一）超炫的js图片展示效果（三）
在看过上一篇JS特效代码大全(十)超炫的js图片展示效果(二)文章后,相信很多人都想试试把这种效果用到自己的项目中去了.在用的过程当中个性化的需求就来了,比如,想把小图导航放上边去,或者放左边放右边等 ...

开关灯效果HTML,JS特效：开关灯

开关灯效果HTML,JS特效：开关灯相关推荐

最新文章

热门文章