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 相关文章推荐
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
js中substring和substr的定义和用法
May 05 Javascript
javascript教程:关于if简写语句优化的方法
May 17 Javascript
javascript实现图片循环渐显播放的方法
Feb 24 Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
使用FormData实现上传多个文件
Dec 04 Javascript
jQuery实现消息弹出框效果
Dec 10 jQuery
微信小程序地图实现展示线路
Jul 29 Javascript
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操作XML作为数据库的类
2010/12/19 PHP
PHP实现异步调用方法研究与分享
2011/10/27 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
为什么要使用Vuex的介绍
2019/01/19 Javascript
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
浅谈MySQL中的触发器
2015/05/05 Python
python 模块导入问题汇总
2021/02/01 Python
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
银行出纳岗位职责
2013/11/25 职场文书
初中生物教学反思
2014/01/10 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
农业项目建议书
2014/08/25 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
用python修改excel表某一列内容的操作方法
2021/06/11 Python