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

程序员文章站 2024-03-20 20:31:22

...

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

JQuery页面加载事件代码运用：

.val()方法：获取按钮的value属性值
.val("内容")：是设置按钮的value属性的值


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Nearth</title>
		<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script >
        $(function(){
			$("#btn").click(function(){
				if($(this).val()=="关灯"){
					$("body").css("backgroundColor","black");
					$(this).val("开灯");
				}
				else{
					$("body").css("backgroundColor","yellow");
					$(this).val("关灯");
				}
			})
		})			
		</script>
	</head>
	<body>
		<input type="button" name="" id="btn" value="关灯" />
	</body>
</html>

代码是看不会的，永远要学着去敲击它··················小主人················

上一篇： boke | 前后端分离中使用JWT保持前端数据的持久化，并自动登录

下一篇：冒泡/选择排序Demo