JS/jQuery实现简单的开关灯效果【案例】
作者：庚中 发布时间：2024-04-18 09:30:38
标签：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>
希望本文所述对大家JavaScript程序设计有所帮助。
来源：https://blog.csdn.net/xiaodi520520/article/details/83349736
0
投稿猜你喜欢
- 一、前言 JDK(Java Development Kit )是一切java应用程序的基础，可以说，所有的java应用程序是构建
vue + iview 实现一个手机分段的提示框，知识点还没总结，供大家参考，具体内容如下<template> &l- 3月27日，淘宝网获得了由国际权威机构G-CEM颁发的2008年度亚洲区在线客户体验大奖，这是全球互联网企业首次获得此殊荣。如何在让买家更方
- 继续我们的 Javascript 优化计划，上期已经做到怎么尽可能的缩小 Javascript 脚本的文件体积便于传输。不过这样做仅仅是不够
- Sql Server为每个触发器都创建了两个专用表：Inserted表和Deleted表。这两个表由系统来维护，它们存在于内存中
- 本文实例为大家分享了python pygame模块编写飞机大战的具体代码，供大家参考，具体内容如下该程序没有使用精灵组，而是用列表存储对象来
- 在安装wordpress的时候，按照里面的readme.html的步骤进行安装，但是在访问wp-admin/install.php的时候就出
- Python np.argmin()和np.argmax()函数按照axis的要求返回最小的数/最大的数的下标numpy.argmin(a,
- 文本是任何一款游戏中不可或缺的重要要素之一，Pygame 通过pygame.font模块来创建一个字体对象，从而实现绘制文本的目的。该模块的
- 本文实例讲述了Python从序列中移除重复项且保持元素间顺序不变的方法。分享给大家供大家参考，具体如下：问题：从序列中移除重复的元素，但仍然
- 一开始没看懂stddev是什么参数，找了一下，在tensorflow/python/ops里有random_ops，其中是这么写的：def
- 将VS2017上配置OpenCV4.1.0的过程记录于此。准备工具：OpenCV：4.1.0IDE：VS2017安装环境：Win10 &nb
- #coding=utf8__author__ = 'Administrator'# 当函数的参数不确定时，可以使用*args
- 刚开始学习Python的类写法的时候觉得很是麻烦，为什么定义时需要而调用时又不需要，为什么不能内部简化从而减少我们敲击键盘的次数？你看完这篇
- 本文实例讲述了wxPython窗口的继承机制，分享给大家供大家参考。具体分析如下：示例代码如下：import wx class
- 该模块用perl的数组代表一个文件，文件的每一行对应数组的一个元素，第一行为元素0，第二回为1，... 文件本身实际并不加载到内
- 前言：vue-router的切换不同于传统的页面的切换。路由之间的切换，其实就是组件之间的切换，不是真正的页面切换。这也会导致一个问题，就是
- 1、使用mysqli扩展库 预处理技术 mysqli stmt 向数据库添加3个用户<?php /
- 前言自 MySQL5.1.6起，增加了一个非常有特色的功能–事件调度器(Event Scheduler)，可以用做定时执行某些特定任务（例如
- 我们主要讲解一下利用Python实现感知机算法。算法一首选，我们利用Python，按照上一节介绍的感知机算法基本思想，实现感知算法的原始形式
