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>
开关灯就实现了，欢迎点赞留言关注！！！