javascript学习笔记2:按钮练习

xiaoxiao2021-02-28  26

开关按钮互相转变练习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="开" ο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>

转载请注明原文地址: https://www.6miu.com/read-2449963.html

最新回复(0)