- 源代码<style>部分
- <style>
- #button1{
- background-color:aliceblue;
- }
- </style>
2.源代码<body>部分
<button id="button1">开灯</button>
<img id="myImage" src="../练习/eg_bulboff (1).gif" style="text-align:center;">
3.源代码<script>部分
<script>
var button1 = document.getElementById('button1');
console.log("button1")
var num = 0;
button1.onclick = function(){
if(num == "0"){
myImage.src = "../练习/eg_bulbon.gif";
document.getElementById("button1").innerHTML = '关灯';
button1.style.backgroundColor="red";
num = 1;
}else{
myImage.src = "../练习/eg_bulboff (1).gif";
document.getElementById("button1").innerHTML = '开灯';
button1.style.backgroundColor="white";
num = 0;
}
}
</script>
4.效果图
5.开灯效果图
6关灯效果图