今天就跟大家聊聊有关使用JavaScript怎么控制电灯开关,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
JS是JavaScript的简称,它是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,主要用于web的开发,可以给网站添加各种各样的动态效果,让网页更加美观。
方法一:
获取图片元素,通过给按钮绑定点击事件来控制电灯开关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电灯开关案例</title>
</head>
<body>
<img src="./img/关.gif" alt="">
<button id="open">开灯</button>
<button id="close">关灯</button>
</body>
<script>
var open=document.getElementById("open");
var close=document.getElementById("close");
var img=document.getElementsByTagName("img")[0];
open.onclick=function(){
img.src="./img/开.gif"
}
close.onclick=function(){
img.src="./img/关.gif"
}
</script>
</html>
总结:这种方式比较简单,也不容易出错,通过按钮绑定,直接获取对应的电灯开关图片
运行结果:
相关方法:
document.getElementById():通过id名获取对应的元素,
document.getElementsByTagName():通过元素名获取对应的元素,获取出来的是一个类数组对象
onclick:单击事件,通过鼠标点击触发
方法二:
获取图片元素,直接给图片绑定开关事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电灯开关案例</title>
</head>
<body>
<img src="./img/关.gif" alt="">
</body>
<script>
var img=document.getElementsByTagName("img")[0];
var flag=false;
img.onclick=function(){
if(flag){
img.src="./img/关.gif";
flag=false;
}else{
img.src="./img/开.gif";
flag=true;
}
}
</script>
</html>
注意:这种方法需要先做一个标记(flag)来判断电灯初始的状态,直接给图片绑定点击事件的时候,需要注意标记(flag)的初始赋值为false。
运行结果:点击电灯泡时,电灯明暗依次交替
看完上述内容,你们对使用JavaScript怎么控制电灯开关有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。