js------小案例 电灯开关

简介: js------小案例 电灯开关

实现点击事件,来点击图片来实现图片的切换,模拟电灯的开关

两张图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img id="light" src="./off.gif">
    <script>
        var light=document.getElementById("light");
        var i=1;
           light.onclick= function(){
            if(i==1)
            {
                light.src="on.gif";
                i--;
            }    
            else if(i==0)
            {
                light.src="off.gif";
                i++;
             }    
            }
    </script>
</body>
</html>
相关文章
|
2月前
|
数据采集 Web App开发 JavaScript
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
|
4月前
|
JavaScript 前端开发
杨老师课堂之JavaScript案例全选、全不选、及反选
杨老师课堂之JavaScript案例全选、全不选、及反选
23 1
|
2月前
|
JavaScript 前端开发 UED
Javaweb之javascript的小案例的详细解析
通过上述步骤,我们得到了一个动态更新的实时时钟,这个简单的JavaScript案例展示了定时器的使用方法,并讲解了如何处理日期和时间。这个案例说明了JavaScript在网页中添加动态内容与交互的能力。对于涉足JavaWeb开发的学习者来说,理解和运用这些基础知识非常重要。
36 11
|
2月前
|
JavaScript API 图形学
一个案例带你从零入门Three.js,深度好文!
【8月更文挑战第1天】本教程无需任何Threejs知识!本教程以入门为主,带你快速了解Three.js开发
69 2
一个案例带你从零入门Three.js,深度好文!
|
2月前
|
前端开发 JavaScript 开发者
fuse.js前端搜索简单使用的三个案例
通过这三个例子可以看出,Fuse.js 是一个功能丰富、易于实现的前端搜索库。它使开发者能够便捷地实现从基础到高级的搜索功能,无论是简单的列表搜索还是实时的搜索建议,都能够高效、精确地提供给用户所需的信息。
80 0
|
2月前
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(四):成绩案例
Vue.js 2 项目实战(四):成绩案例
|
2月前
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(三):综合案例-小黑记事本
Vue.js 2 项目实战(三):综合案例-小黑记事本
|
2月前
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(二):图书管理案例
Vue.js 2 项目实战(二):图书管理案例
|
2月前
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(一):图片切换案例
Vue.js 2 项目实战(一):图片切换案例
|
2月前
|
数据采集 存储 JavaScript
JS逆向案例:巨潮资讯数据采集
JS逆向案例:巨潮资讯数据采集
28 0