JavaScript实现电灯开关小案例

今天学习了JavaScript的一些简单知识，感觉挺有意思，仅仅通过简简单单的几行代码就能模拟出生活中的一些应用场景，Interesting。比如我今天要写的这个模拟电灯开关的小案例。

首先对本案例进行一个分析，过程如下：

1.获取图片对象

2.绑定单击事件

3.每次点击，切换图片

切换规则：如灯是开着的，则切换图片为off状态，如果灯是关着的，则切换图片为on状态，灯的状态用flag标记

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>电灯开关案例</title>
</head>
<body>
 <!--定义一个图片标签-->
 <img src="img/off.gif" id = "light" alt="">

 <script >
  //通过id属性值获取img标签对象
  var light = document.getElementById("light");
  var flag = false; //定义一个灯的标记状态，默认灯是关闭的
  //绑定单击事件
  light.onclick = function () {
   //判断灯的状态，如果flag状态为true，则关闭灯。如果flag状态为false，则开启灯
   if(flag){
    //灯是开着的，关闭灯
    light.src = "img/off.gif";
    //修改灯的状态（关闭状态）
    flag = false;
   }else {
    //灯是关着的，开启灯
    light.src = "img/on.gif";
    //修改灯的状态（开启状态）
    flag = true;
   }
  }
 </script>
</body>
</html>

运行效果：

案例素材：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS/jQuery实现简单的开关灯效果【案例】

    JS/jQuery实现简单的开关灯效果【案例】

    本文实例讲述了JS/jQuery实现简单的开关灯效果.分享给大家供大家参考,具体如下: 实现效果: html结构只有两个button标签 <button id="left">开灯</button> <button id="right">关灯</button> 方法一:用原生js来做 <script> //1.获取页面元素 var left=document.getElementById('left'); v

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

    本文实例讲述了JavaScript实现的开关灯泡点击切换特效.分享给大家供大家参考,具体如下: 准备 首先要准备两张图片,一张是灯泡亮的图片,取名为on.jpg,另一张是灭的图片,取名为off.jpg,都放置到当前的目录下. 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" cont

  • js实现开关灯效果

    js实现开关灯效果

    本文实例为大家分享了js实现开关灯效果的具体代码,供大家参考,具体内容如下 开关灯 <style> body{background: black;cursor: pointer;} .lamp{width: 100px;height: 100px;border-radius: 50%;background: #ccc;} .pole{width: 10px;height: 400px;background: brown;margin-left: 45px;} .toggle{width: 80

  • JS实现灯泡开关特效

    JS实现灯泡开关特效

    JS实现灯泡开关特效的具体代码,供大家参考,具体内容如下 并且显示时间,文字 首先准备两张图片:开灯ON.jpg:关灯OFF.jpg 效果图: 下面是具体实现代码: HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>开关灯特效</title> <link href="css/bulb.css" rel=&

  • JavaScript实现电灯开关小案例

    今天学习了JavaScript的一些简单知识,感觉挺有意思,仅仅通过简简单单的几行代码就能模拟出生活中的一些应用场景,Interesting.比如我今天要写的这个模拟电灯开关的小案例. 首先对本案例进行一个分析,过程如下: 1.获取图片对象 2.绑定单击事件 3.每次点击,切换图片 切换规则:如灯是开着的,则切换图片为off状态,如果灯是关着的,则切换图片为on状态,灯的状态用flag标记 代码实现: <!DOCTYPE html> <html lang="en"&g

  • javascript实现倒计时小案例

    javascript实现倒计时小案例

    本文实例为大家分享了javascript实现倒计时效果的具体代码,供大家参考,具体内容如下 效果如下: 代码思路: 1.这个倒计时是不断变化的,因此需要定时器来自动变化 ( setInterval )2.三个黑色盒子里面分别存放时分秒3.三个黑色盒子利用innerHTML放入计算的小时分钟秒数4.第一次执行也是间隔毫秒数,因此刷新页面会有空白5.最好采取封装函数的方法,这样可以先调用一次这个函数 html部分: <div>         <h4>距离2022-6-14 24:00

  • AngularJS tab栏实现和mvc小案例实例详解

    AngularJS tab栏实现和mvc小案例实例详解

    tab栏: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tab 标签</title> <style> body { margin: 0; padding: 0; background-color: #F7F7F7; } .tabs { width: 400px; margin: 3

  • 全面解析PHP验证码的实现原理 附php验证码小案例

    拓展 我们需要开启gd拓展,可以使用下面的代码来查看是否开启gd拓展. <?php echo "Hello World!!!!"; echo phpinfo(); ?> 然后在浏览器上Ctrl+F查找gd选项即可验证自己有没有装这个拓展,如果没有的话,还需要自己全装一下这个拓展. 背景图 imagecreatetruecolor 默认生成黑色背景 <?php // 使用gd的imagecreatetruecolor();创建一张背景图 $image = imagecr

  • JS学习笔记之闭包小案例分析

    本文实例讲述了JS学习笔记之闭包小案例.分享给大家供大家参考,具体如下: 直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style type="text/css"> *{ list-style

  • vue实现购物车小案例

    vue实现购物车小案例

    本文实例为大家分享了vue实现购物车小案例的具体代码,供大家参考,具体内容如下 最终效果 HTML部分: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>shopcar.html</title> <script src="https://cdn.jsdelivr.net/npm/vue&q

  • vue实现选项卡小案例

    vue实现选项卡小案例

    本文实例为大家分享了vue实现选项卡小案例的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name=

  • JavaScript设计模式组合设计模式案例

    目录 前言 组合设计模式的业务场景 组合设计模式小案例 前言 组合设计模式是用于将多个部分通过组合的方式行成一个整体,就比如我们去吃饭,点了一份米饭和一份鱼香肉丝,这些东西可以看成一个部分,通过组合的方式可以组成一个新的产品,鱼香肉丝盖饭,这就是组合设计模式 组合设计模式的业务场景 表单用于收集用户数据,比如登录,注册,或者一些信息填报,由于这些表单都是类似的,如果我们一个一个去做,里面充满了很多重复的东西,增加了工作量,我们可以使用组合设计模式 组合设计模式小案例 一个餐馆的运转需要一些雇佣一

  • Android组件WebView编写有道词典小案例分享

    Android组件WebView编写有道词典小案例分享

    最近学习了WebView组件,写了一个有道词典的小案例,分享给大家,供大家参考,具体内容如下 效果图: 源码下载:https://coding.net/u/gxs1225/p/YouDaoDictionary/git 代码如下: 布局 activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schema

  • JSP+MySQL实现网站的登录与注册小案例

    为了练手,我就自己试着做了一个网站的登录与注册的小案例.由于没有做美化处理,所以界面并不是很好看. 网站实现的功能如下:  •用户首次注册功能  •用户登录功能 下面我将会分模块展示 注册模块 首先需要一个注册界面,如下register.jsp: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOC

随机推荐