一.代码示例
还是用切换图片做例子,源代码中,我只有两张路径同级图片:img1.jpg和img2.jpg,可是a会一直加1,当a=3时,不存在img3.jpg,那么这时候
就是这种尴尬情况
<body> <input type="text" value="" id="文本"> <input type="button" value="onclickMe" id="按钮"> <br> <figcaption>迪丽热巴,美到极致!</figcaption> <img src="" alt="美到极致!" id="img" width="500px" height="500px"> </body> </html> <script type="text/javascript"> var text=document.getElementById('文本'); var button=document.getElementById('按钮'); var img=document.getElementById('img'); var a=1; button.onclick=function(){ img.src='img'+a+'.jpg'; // 程序的执行顺序就是从上往下,上诉代码执行完之后,a加1 a=a+1; }; </script>
这时候可以用到条件判断语句避免此时的情况发生,代码示例:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>if/else判断语句</title> 6 </head> 7 <body> 8 <input type="text" value="" id="文本"> 9 <input type="button" value="onclickMe" id="按钮"> 10 <br> 11 <figcaption>迪丽热巴,美到极致!</figcaption> 12 <img src="" alt="美到极致!" id="img" width="500px" height="500px"> 13 <!-- 14 格式分三种 15 第一种单条件判断: 16 if(true){ 17 布尔值为真,走的路线 18 }else{ 19 false走的路线 20 } 21 第二种多条件判断: 22 if(true){ 23 24 }else if{ 25 26 }else if{ 27 28 }....else{ 29 30 } 31 第三种嵌套: 32 if(){ 33 if(){}else{} 34 }else{ 35 36 } 37 --> 38 </body> 39 </html> 40 <script type="text/javascript"> 41 var text=document.getElementById('文本'); 42 var button=document.getElementById('按钮'); 43 var img=document.getElementById('img'); 44 var a=1; 45 46 button.onclick=function(){ 47 img.src='img'+a+'.jpg'; 48 // 程序的执行顺序就是从上往下,上述代码执行完之后,a加1 49 a=a+1; 50 if(a>2){ 51 a=2; 52 } 53 }; 54 </script>
点击第一次效果(这时候点击之后执行a自加为2):
点击第二次效果(依旧生效,因为2不大于if里的判断情况,点击之后a自加为3):
点击第三次效果(停留在img2.jpg图片,因为此时a>2,条件为真,执行a=2,图片永远定格在img2.jpg图片):
这图我永远不换(在心不在迹)