jQuery和JavaScript分别实现开关灯
程序员文章站
2024-03-20 20:08:40
...
JavaScript代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript代码实现开关灯</title>
<script src="jquery-1.10.2.min.js"></script>
<script>
// js实现开灯关灯
window.onload=function () {
//窗口加载事件：等网页中所有元素/内容(包括图片，外部引入的文件等)都加载完后才会触发
var btn1=document.getElementById("btn1");//获取id并赋值给变量btn1
btn1.onclick=function(){//绑定点击事件
if (btn1.value=="开灯"){//判断是否为开灯状态
this.style.backgroundColor='white';//背景颜色
this.style.color='black';//文字颜色
this.innerHTML="关灯";//可见文字内容改为“关灯”
btn1.value="关灯";//按钮赋值“开灯”
}else{
this.innerHTML="开灯";//可见文字内容改为“开灯”
this.style.backgroundColor="black";//背景颜色
this.style.color='white';//文字颜色
btn1.value="开灯";//按钮赋值“开灯”
}
}}
</script>
</head>
<body>
<p>js:</p>
<button value="开灯" id="btn1" style="height: 100px;width: 100px">开灯</button>
</body>
</html>
jQuery代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery代码实现开关灯</title>
<script src="jquery-1.10.2.min.js"></script>
<script>
// jQuery实现开灯关灯
$(document).ready(function(){//网页document加载事件：等网页中的标签元素加载完后会触发
$('#btn2').click(function () {//绑定点击事件
if ($('#btn2').val()=='开灯'){//判断是否为开灯状态
$('#btn2').css({//改变按钮的CSS样式
'background-Color':'white',//背景颜色
'color':'black'//文字颜色
});
$('#btn2').html('关灯');//视图的文字改为“关灯”
$('#btn2').val('关灯');//给按钮赋值“关灯”
}else{
$('#btn2').css({//改变按钮的CSS样式
'background-Color':'black',//背景颜色
'color':'white'//文字颜色
});
$('#btn2').html('开灯');//试图的文字改为“开灯”
$('#btn2').val('开灯');//给按钮赋值“开灯”
}
})}
);
</script>
</head>
<body>
<p>jQuery：</p>
<button value="开灯" id="btn2" style="height: 100px;width: 100px">开灯</button>
</body>
</html>
开关灯就实现了，欢迎点赞留言关注！！！????????????????