网页中的小开关
<!DOCTYPE html>
<html>
<head>
<title>开关</title>
<script>
window.onload=function(){
var oBtn = document.querySelectorAll('button')[0];
var change = 1;
oBtn.onclick=function(){
if(change){
oBtn.style.color="green";
this.innerHTML='ON';
change--;
}
else {
oBtn.style.color="red";
this.innerHTML='OFF';
change++;
}
}
}
</script>
</head>
<body>
<button style="color:red">OFF</button>
</body>
</html>
上面的代码中,用了一个变量"change"来储存开关的状态,通过"change"的变化来关联其他内容的变化。