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

2024-09-28 14:49:24

本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

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

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/jQuery实现简单的开关灯效果【案例】

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

本文实例讲述了jquery实现简单文字提示效果.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jquery实现简单文字提示</title> &l
jQuery实现简单的点赞效果

本文实例讲解了jQuery实现简单的点赞效果的详细代码,具体内容如下效果图: 下面提供一个"点赞"的实例代码,用ASP.NET MVC4+jQuery Ajax实现. Model: namespace MvcAjaxAdd.Models { public class ClickCountModel { [Key] [DatabaseGeneratedAttribute(System.ComponentModel.DataAnnotations.Schema.DatabaseGener
jquery超简单实现手风琴效果的方法

本文实例讲述了jquery超简单实现手风琴效果的方法.分享给大家供大家参考.核心代码如下: $("#accordion .expanded").hide(); $("a.opening").click(function(){ $(this).next().slideToggle('fast', function(){ $(this).prev("a.opening").toggleClass("active"); }); re
jquery实现简单手风琴菜单效果实例

本文实例讲述了jquery实现简单手风琴菜单效果的方法.分享给大家供大家参考.具体实现方法如下: (function($) { var allPanels = $('.accordion > dd').hide(); $('.accordion > dt > a').click(function() { allPanels.slideUp(); $(this).parent().next().slideDown(); return false; }); })(jQuery); HTML代
js实现的简单图片浮动效果完整实例

本文实例讲述了js实现的简单图片浮动效果.分享给大家供大家参考,具体如下: 利用window对象,实现一个图片的浮动效果 1.现有一个广告div,就是我们要控制的,它的起始点(0,0) 2.设定横向和纵向的速度 3.控制广告div移动 1)广告div是否达到边界 2)如果到达边界后,我们设置速度反向移动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
jQuery实现简单三级联动效果

本文实例为大家分享了jQuery实现简单三级联动的具体代码,供大家参考,具体内容如下首先写一个JSON数据 [ { "province": "吉林省", "cities": [ { "city": "长春市", "counties": ["朝阳区", "经济开发区", "高新区"] }, { "city":
jquery实现简单的弹窗效果

本文实例为大家分享了jquery实现简单弹窗效果的具体代码,供大家参考,具体内容如下效果实现图 css代码 h1,p,h2{ margin: 0; padding: 0; } .modal_info{ display: flex; visibility: hidden; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 200px; height: auto; positio
jquery实现简单拖拽效果

本文实例为大家分享了jquery实现简单拖拽的具体代码,供大家参考,具体内容如下基本思路: 1.首先需要鼠标按下拖动区域,也就是需要调用 mousedown 方法 2.鼠标移动,需要拖动的元素跟着鼠标移动,调用 mousemove 方法 3.鼠标弹起拖动消失,调用 mouseup 方法下面看一下代码: 页面结构: 样式: .drag { width: 200px; height: 200px; background-color: skyblue; position: absolute; }
利用jQuery实现简单的拖曳效果实例代码

前言本文主要给大家介绍了一种利用jQuery实现的简单拖曳效果,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 提出问题如何实现将一个盒子里的元素拉到另外一个盒子里? 实现思路此操作包含的事件有 mousedown mousemove mouseup ,对这三个事件进行监听并进行相应的操作. 操作设计的节点有:原节点,临时节点,新节点节点的移动涉及事件e的坐标操作元素使用JQUERY 代码实现相应的注释在文中已有体现,请认真观看,你可以理解的. 先定义一个对象 dr

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

相关推荐

随机推荐