注：黑马的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="开" οnclick="fn()"/> <input id="d2" type="button" value="开" οnclick="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="开" οnclick="fn()"/> <input id="d2" type="button" value="开" οnclick="fn2()"/> <input id="d3" type="button" value="开" οnclick="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="开" οnclick="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" οnclick="fn(this)"/> <input type="button" value="2" οnclick="fn(this)"/> <input type="button" value="3" οnclick="fn(this)"/> <input type="button" value="4" οnclick="fn(this)"/> </body> </html>