开关按钮互相转变练习1
注：黑马的js视频学习笔记
方法1黄色，方法2红色
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> 漫天小星星练习</title>
<style type="text/css">
</style>
<script type="text/javascript">
//让页面出现星星
function fn(){
var obj=document.getElementById("d1");
var v=obj.value;
if(v=="开"){
obj.value="关";
}else{
obj.value="开";}
}
var i=0;
function fn2(){
var obj=document.getElementById("d2");
if(i%2==0){
obj.value="关";
i++;
}else{
obj.value="开";
i++;
}
}
</script>
</head>
<body >
<input id="d1" type="button" value="开" onclick="fn()"/>
<input id="d2" type="button" value="开" onclick="fn2()"/>
</body>
</html>
方法3 使用布尔值
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> 开关练习</title>
<style type="text/css">
</style>
<script type="text/javascript">
//开关按钮练习
function fn(){
var obj=document.getElementById("d1");
var v=obj.value;
if(v=="开"){
obj.value="关";
}else{
obj.value="开";}
}
var i=0;
function fn2(){
var obj=document.getElementById("d2");
if(i%2==0){
obj.value="关";
i++;
}else{
obj.value="开";
i++;
}
}
var flag=true;
function fn3(){
var obj=document.getElementById("d3");
if (flag==true){
obj.value="开";
flag=false;
}else{
obj.value="关";
flag=true;
}
}
</script>
</head>
<body >
<input id="d1" type="button" value="开" onclick="fn()"/>
<input id="d2" type="button" value="开" onclick="fn2()"/>
<input id="d3" type="button" value="开" onclick="fn3()"/>
</body>
</html>方法4：使用this：代表当前对象
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> 漫天小星星练习</title>
<style type="text/css">
</style>
<script type="text/javascript">
}
function fn4(obj){
var v=obj.value;
if(v=="开"){
obj.value="关";
}else{
obj.value="开";}
}
</script>
</head>
<body >
<input id="d4" type="button" value="开" onclick="fn4(this)"/>
</body>
</html>this关键字的使用
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> 开关练习</title>
<style type="text/css">
</style>
<script type="text/javascript">
function fn(obj){
var n=parseInt(obj.value);
n++;
obj.value=n;
}
</script>
</head>
<body >
<input type="button" value="1" onclick="fn(this)"/>
<input type="button" value="2" onclick="fn(this)"/>
<input type="button" value="3" onclick="fn(this)"/>
<input type="button" value="4" onclick="fn(this)"/>
</body>
</html>