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
投稿
猜你喜欢
- Himmelblau函数如下:有四个全局最小解,且值都为0,这个函数常用来检验优化算法的表现如何:可视化函数图像:import numpy
- 先来一个官网链接:https://www.xmind.cn/有钱的也可以支持一波然后开始吧–百度网盘获取地址:链接: h
- SQL2005的存储过程: set ANSI_NULLS ON set QUOTED_IDENTIFIER ON go ALTER PROC
- 本文实例讲述了MySQL使用外键实现级联删除与更新的方法。分享给大家供大家参考,具体如下:MySQL支持外键的存储引擎只有InnoDB,在创
- 一、oracle oracle服务器有Oracle instace 和Oracle database instance有memory str
- 使用pycharm的时候,有时需要重命名文件,该怎么操作呢?下面小编给大家演示一下。首先准备一个要重命名的文件,如下图所示接着右键单击选择R
- 一、前言很多时候,我们都有远程控制电脑的需求。比如正在下载某样东西,需要让电脑在下载完后关机。或者你需要监控一个程序的运行状况等。今天我们就
- 在表中有两个字段:id_no (varchar) , in_date (datetime) ,把in_date相同的记录的in_date依次
- MySQL Shell import_table数据导入1. import_table介绍这一期我们介绍一款高效的数据导入工具,MySQL
- 年初的时候一直在做一个网站MSSQL2000 -> MySQL5的迁移工作,因为采用了不同的程序系统,所以主要问题
- 如下所示:data = np.random.randn(20)factor = pd.cut(data,4)pd.get_dummies(f
- 要想从命令行启动mysqld服务器,你应当启动控制台窗口(或“DOS window”)并输入命令:C
- 天天敲代码的朋友,有没有想过代码也可以变得很酷炫又浪漫?今天就教大家用Python模拟出绽放的烟花,工作之余也可以随时让程序为自己放一场烟花
- 背景:现如今不管什么服务和应用基本都可以在docker里跑一跑了,但是在我个人的印象中,像数据库这种比较重要大型且数据容易受伤的应用是不适合
- 一.摘要做接口自动化测试时,常常需要使用python发送一些json内容的接口报文,如果使用urlencode对内容进行编码解析并发送请求,
- 1. 输入一个百分制成绩,要求输出成绩等级A、B、C、D、E,其中90~100分为A,80~89分为B,70~79分为C,60~69分为D,
- 使用pandas读取xml文件报错“ Unsupported format, or corrupt file: Expected BOF r
- assert断言声明,遇到错误则立即返回在使用python语言开发深度学习模型时,经常会遇到模型运行结束时才会发现的崩溃状态,或者得到的结果
- python可以返回多个值,确实挺方便函数里的return只能返回一个值,但是返回类型是没是限制的因此,我们可以“返回一个 tuple类型,
- 引用是什么在 PHP 中引用意味着用不同的名字访问同一个变量内容。这并不像 C 的指针,替代的是,引用是符号表别名。注意在 PHP 中,变量