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


Posted in jQuery onFebruary 19, 2019

本文实例讲述了JS/jQuery实现简单的开关灯效果。分享给大家供大家参考,具体如下:

实现效果:

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

html结构只有两个button标签

<button id="left">开灯</button>
<button id="right">关灯</button>

方法一:用原生js来做

<script>
  //1.获取页面元素
  var left=document.getElementById('left');
  var right=document.getElementById('right');
  //注意获取body的方式有两种
  //第一种:直接使用document的点语法
  //var body1=document.body;
  // console.log ( body1 )
  //第二种:通过标签名来获取,但要注意去标签名后要添加下标,因为用标签名获取的是数组
  var body=document.getElementsByTagName('body')[0]//因为通过标签名获取的是数组,一定要求取下标才可以
  console.log ( body )
  //2.注册事件
  left.onclick=function ( ) {
    body.style.backgroundColor="white";
  }
  right.onclick=function ( ) {
   body.style.backgroundColor = "black";
  }
</script>

方法二:用JQuery来做

<script>
$ ( function () {
 //获取按钮们
 var buttons=$('button');
 //2.开灯
 $ (buttons[ 0 ]).click(function () {
   $('body').css("backgroundColor",'white');
 })
 // $ ( 'body' ).css('backgroundColor','white')
 //3.关灯
 buttons[ 1 ].onclick=function ( ) {
   $('body').css('backgroundColor','black');
 }
} )
</script>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

jQuery 相关文章推荐
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jQuery实现手风琴特效
Jan 11 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 #jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 #jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 #jQuery
jQuery实现的五星点评功能【案例】
Feb 18 #jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 #jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 #jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 #jQuery
You might like
php smarty模版引擎中的缓存应用
2009/12/02 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
几个javascript操作word的参考代码
2009/10/26 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
jquery实现input输入框实时输入触发事件代码
2014/01/28 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
2016/09/14 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
[08:53]DOTA2每周TOP10 精彩击杀集锦vol.9
2014/06/26 DOTA
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
python利用hook技术破解https的实例代码
2013/03/25 Python
python config文件的读写操作示例
2019/09/27 Python
python绘制封闭多边形教程
2020/02/18 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
MADE法国:提供原创设计师家具
2018/09/18 全球购物
工程招投标邀请书
2014/01/30 职场文书
2014年社区庆元旦活动方案
2014/03/08 职场文书
彻底理解golang中什么是nil
2021/04/29 Golang
Java基础之线程锁相关知识总结
2021/06/30 Java/Android