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>
运行效果:
案例素材:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
JavaScript实现的开关灯泡点击切换特效示例
本文实例讲述了JavaScript实现的开关灯泡点击切换特效.分享给大家供大家参考,具体如下: 准备 首先要准备两张图片,一张是灯泡亮的图片,取名为on.jpg,另一张是灭的图片,取名为off.jpg,都放置到当前的目录下. 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" cont
-
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实现灯泡开关特效的具体代码,供大家参考,具体内容如下 并且显示时间,文字 首先准备两张图片:开灯ON.jpg:关灯OFF.jpg 效果图: 下面是具体实现代码: HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>开关灯特效</title> <link href="css/bulb.css" rel=&
-
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的一些简单知识,感觉挺有意思,仅仅通过简简单单的几行代码就能模拟出生活中的一些应用场景,Interesting.比如我今天要写的这个模拟电灯开关的小案例. 首先对本案例进行一个分析,过程如下: 1.获取图片对象 2.绑定单击事件 3.每次点击,切换图片 切换规则:如灯是开着的,则切换图片为off状态,如果灯是关着的,则切换图片为on状态,灯的状态用flag标记 代码实现: <!DOCTYPE html> <html lang="en"&g
-
javascript实现倒计时小案例
本文实例为大家分享了javascript实现倒计时效果的具体代码,供大家参考,具体内容如下 效果如下: 代码思路: 1.这个倒计时是不断变化的,因此需要定时器来自动变化 ( setInterval )2.三个黑色盒子里面分别存放时分秒3.三个黑色盒子利用innerHTML放入计算的小时分钟秒数4.第一次执行也是间隔毫秒数,因此刷新页面会有空白5.最好采取封装函数的方法,这样可以先调用一次这个函数 html部分: <div> <h4>距离2022-6-14 24:00
-
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实现购物车小案例的具体代码,供大家参考,具体内容如下 最终效果 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实现选项卡小案例的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=
-
JavaScript设计模式组合设计模式案例
目录 前言 组合设计模式的业务场景 组合设计模式小案例 前言 组合设计模式是用于将多个部分通过组合的方式行成一个整体,就比如我们去吃饭,点了一份米饭和一份鱼香肉丝,这些东西可以看成一个部分,通过组合的方式可以组成一个新的产品,鱼香肉丝盖饭,这就是组合设计模式 组合设计模式的业务场景 表单用于收集用户数据,比如登录,注册,或者一些信息填报,由于这些表单都是类似的,如果我们一个一个去做,里面充满了很多重复的东西,增加了工作量,我们可以使用组合设计模式 组合设计模式小案例 一个餐馆的运转需要一些雇佣一
-
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
随机推荐
- MYSQL更新优化实录
- 为你的Win XP瘦身的图文教程第1/2页
- 用Java代码实现栈数据结构的基本方法归纳
- J2EE基础之EJB全面了解
- IOS 简单的本地json格式文件解析的实例详解
- IOS 聊天界面(自适应文字)的实现
- .net重启iis线程池和iis站点程序代码分享
- Android通过LIstView显示文件列表的两种方法介绍
- asp遍历目录及子目录的函数
- 嵌入式iframe子页面与父页面js通信的方法
- c#哈希算法的实现方法及思路
- 用js实现的抽象CSS圆角效果!!
- FLEX 事件机制-自定义事件介绍
- jquery实现弹出窗口效果的实例代码
- linux设置服务开机自启动的三种方式
- JavaScript继承方式实例
- js实现简单登录功能的实例代码
- javascript实现相同事件名称,不同命名空间的调用方法
- Android 中Failed to read key from keystore解决办法
- PHP 压缩文件夹的类代码