JavaScript实现的开关灯泡点击切换特效示例


Posted in Javascript onJuly 08, 2019

本文实例讲述了JavaScript实现的开关灯泡点击切换特效。分享给大家供大家参考,具体如下:

准备

首先要准备两张图片,一张是灯泡亮的图片,取名为on.jpg,另一张是灭的图片,取名为off.jpg,都放置到当前的目录下。

代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
  <script>
    function change(){
      var img = document.getElementById('img');
      var src = img.src;
      if(src.indexOf('on') >=0 ){
        img.src = 'off.jpg';
      }else{
        img.src = 'on.jpg';
      }
    }
  </script>
</head>
<body>
  <h1>开关灯泡</h1>
  <img id='img' src="on.jpg" onclick="change();" width='200' height="200">
</body>
</html>

运行结果图

JavaScript实现的开关灯泡点击切换特效示例
JavaScript实现的开关灯泡点击切换特效示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
JavaScript语言对Unicode字符集的支持详解
Dec 30 Javascript
JavaScript返回网页中超链接数量的方法
Apr 03 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
AngularJS实现全选反选功能
Dec 08 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
用Webpack构建Vue项目的实践
Nov 07 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 Javascript
原生js调用json方法总结
Feb 22 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
JavaScript实现的联动菜单特效示例
Jul 08 #Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 #Javascript
JavaScript定时器设置、使用与倒计时案例详解
Jul 08 #Javascript
Vue实现拖放排序功能的实例代码
Jul 08 #Javascript
JavaScript中Dom操作实例详解
Jul 08 #Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 #Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 #Javascript
You might like
PHP 编程的 5个良好习惯
2009/02/20 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
2017/06/02 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
Node.js 路由的实现方法
2019/06/05 Javascript
python字典排序实例详解
2015/05/20 Python
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
python创建文本文件的简单方法
2020/08/30 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
优秀应届毕业生自荐信
2013/11/16 职场文书
银行柜员应聘推荐信范文
2013/11/24 职场文书
大专生自我评价
2014/01/28 职场文书
自主招生自荐信指南
2014/02/04 职场文书
医院总经理岗位职责
2014/02/04 职场文书
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
二手房买卖协议书
2014/04/10 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
医院病假条范文
2015/08/17 职场文书
公证书
2019/04/17 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python