JavaScript之if/else条件判断

一.代码示例

还是用切换图片做例子,源代码中,我只有两张路径同级图片: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图片):

这图我永远不换(在心不在迹)

 

posted @ 2019-01-04 17:36  静心*尽力  阅读(913)  评论(0)  编辑  收藏  举报