JS实现简单的手电筒的开关灯的效果

最新推荐文章于 2023-06-04 22:10:45 发布

Mr.孔

最新推荐文章于 2023-06-04 22:10:45 发布

阅读量2k

点赞数 2

分类专栏： JS 文章标签： JS实现简单的手电筒的开关灯的效果

本文链接：https://blog.csdn.net/klj13969902329/article/details/83652392

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

简单的几行代码，望您您耐心阅读！

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OnClick</title>
</head>
<body>
<h1 align="center">手电筒的打开与关闭</h1>

<p align="center">
<img src="off.jpg" align="center" id="off">
</p>

<h1 align="center">
<input id="open" type="button" onclick="changeImage(1)" value="打开" >    //设置打开按钮
<input id="close" type="button" onclick="changeImage(0)" value="关闭">     //设置关闭按钮
</h1>

</body>
<script type="text/javascript">

//定义一个带参的方法
    function changeImage(num) {
        var click = document.getElementById("off");  //转换dom对象元素
        if(num == 0){
            click.src="off.jpg";    //调用图片
            alert("手电筒已关闭");
        }
        else{
            click.src="on.jpg";   //调用图片
            alert("手电筒已打开");
        }    
    }
    
    
</script>
</html>

off.jpg和on.jpg如下图

Mr.孔

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JS实现简单的手电筒的开关灯的效果

简单的几行代码，望您您耐心阅读！&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;OnClick&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;h1 align="c
复制链接

扫一扫