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

最新推荐文章于 2024-06-15 15:16:22 发布

原创

最新推荐文章于 2024-06-15 15:16:22 发布 · 606 阅读

收录于

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

目的：点击按钮设置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>