编程 Javascript

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实现的开关灯泡点击切换特效示例

- Author -

webbc

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

使用原生javascript创建通用表单验证——更锋利的使用dom对象

Sep 13 Javascript

JS与C#编码解码

Dec 03 Javascript

jQuery如何取id有.的值一般的方法是取不到的

Apr 18 Javascript

javascript中setTimeout和setInterval的unref()和ref()用法示例

Nov 26 Javascript

js+css实现有立体感的按钮式文字竖排菜单效果

Sep 01 Javascript

jquery ajax后台返回list,前台用jquery遍历list的实现

Oct 30 Javascript

微信小程序学习之数据处理详解

Jul 05 Javascript

Thinkjs3新手入门之如何使用静态资源目录

Dec 06 Javascript

vue中$set的使用(结合在实际应用中遇到的坑)

Jul 10 Javascript

在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟

Nov 28 Javascript

JS实现移动端点击按钮复制文本内容

Jul 28 Javascript

vue中使用mockjs配置和使用方式

Apr 06 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

大师制作的中短波矿石收音机

2020/04/02 无线电

php入门之连接mysql数据库的一个类

2012/04/21 PHP

PHP中Session和Cookie是如何操作的

2015/10/10 PHP

WordPress中限制非管理员用户在文章后只能评论一次

2015/12/31 PHP

php 生成加密公钥加密私钥实例详解

2017/06/16 PHP

yii2实现Ueditor百度编辑器的示例代码

2018/11/02 PHP

Smarty模板配置实例简析

2019/07/20 PHP

javascript 3d 逐侦产品展示(核心精简)

2014/03/26 Javascript

php的文件上传入门教程（实例讲解）

2014/04/10 Javascript

JavaScript中获取鼠标位置相关属性总结

2014/10/11 Javascript

JavaScript实现找质数代码分享

2015/03/24 Javascript

JS显示表格内指定行html代码的方法

2015/03/31 Javascript

jquery不常用方法汇总

2015/07/26 Javascript

js判断当前页面在移动设备还是在PC端中打开

2016/01/06 Javascript

Backbone.js框架中Model与Collection的使用实例

2016/05/07 Javascript

详解Node.js模块间共享数据库连接的方法

2016/05/24 Javascript

jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】

2017/03/23 jQuery

微信小程序-getUserInfo回调的实例详解

2017/10/27 Javascript

[05:16]《大圣！大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访

2016/12/13 DOTA

python微信跳一跳系列之棋子定位像素遍历

2018/02/26 Python

Python采集猫眼两万条数据对《无名之辈》影评进行分析

2018/12/05 Python

python爬虫爬取笔趣网小说网站过程图解

2019/11/18 Python

基于Python实现扑克牌面试题

2019/12/11 Python

django3.02模板中的超链接配置实例代码

2020/02/04 Python

postman和python mock测试过程图解

2020/02/22 Python

Pytorch 高效使用GPU的操作

2020/06/27 Python

CSS3实现类似翻书效果的过渡动画的示例代码

2019/09/06 HTML / CSS

德国富尔达运动鞋店：43einhalb

2020/12/25 全球购物

小学教师的个人自我鉴定

2013/10/24 职场文书

借款担保书范文

2014/05/13 职场文书

优秀志愿者感言

2015/08/01 职场文书

省级三好学生主要事迹材料

2015/11/03 职场文书

《用字母表示数》教学反思

2016/02/17 职场文书

车位出租协议书范本

2016/03/19 职场文书

使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能

2021/08/30 Python

Ajax异步刷新功能及简单案例

2021/11/20 Javascript