Nearth===>WEB前端--第6课/JQuery/网页实现开关灯（小案例）

最新推荐文章于 2023-10-15 23:00:40 发布

码字界陈冠希

最新推荐文章于 2023-10-15 23:00:40 发布

阅读量501

点赞数

分类专栏： WEB前端第三季/JQuery

本文链接：https://blog.csdn.net/ly1716/article/details/102721238

版权

这篇博客旨在介绍如何通过点击按钮，利用JQuery设置body背景颜色，从而实现网页的开关灯效果。文中提到了DOM操作和JQuery的页面加载事件代码应用，强调了动手实践的重要性。

摘要由CSDN通过智能技术生成

目的：点击按钮设置body的背景颜色，实现网页开关灯的效果

DOM的方式操作代码：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Nearth</title>
		<script >
			window.onload=function(){
				document.getElementById("btn").onclick=function(){
					if(this.value=="关灯"){
						document.body.style.backgroundColor="black";
						this.value="开灯";
					}
					else{
						document.body.style.backgroundColor="yellow";
						this.value="关灯";
					}
				}
			}
		</script>
	</head>
	<body>
		<input type="button" name="" id="btn" value="关灯" />
	</body>
</html>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

码字界陈冠希

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Nearth===>WEB前端--第6课/JQuery/网页实现开关灯（小案例）

目的：点击按钮设置body的背景颜色，实现网页开关灯的效果DOM的方式操作代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Nearth</title> <script > window.onload=...
复制链接

扫一扫