小白入門js第二篇

if語句

if...else
        語法:
            if(條件){
                代碼塊1;
            }else{
                代碼塊2;
            }
        執行規則:
            若條件成立,則執行代碼塊1,否則執行代碼塊2
            可穿插else if 實現多分枝if語句

switch語句

  switch語法
       switch語法
        switch(條件){
            case 值:
                代碼塊;
            break;
            case 值:
                代碼塊;
            break;
            case 值:
                代碼塊;
            break;
            ...
            break;
            deafault:
                代碼塊;
            break;
        }
        執行規則:
            使用條件分別和case後面的值作比較,若相等則執行case對應的語句
            若均不成立,則執行default中的代碼

        注意:該結構只能用於值得比較,不能用於範圍比較
            該結構是全等(===)比較

for循環

循環結構
        for循環

        語法:
        for(循環變量的初始化;循環判斷;循環迭代){
            循環體;
        }

        執行規則:
            第一步:循環變量的初始化   var i=0
            第二步:循環條件的判斷     i<5
                若判斷結果爲真,則執行循環體
                若判斷結果爲假,則結束循環
            第三步:循環迭代           i++
            第四步:回到第二步

循環停止

	if(停止條件){break}

循環嵌套和語句嵌套

語句間可以穿插其他語句實現嵌套
例如: 輸出如下圖形:
               *
              ***
             *****
            *******

            行號:          空格數
            1                   3
            2                   2
            3                   1
            4                   0

            總行:4

    */

    //控制*的行數
    for(var i=1;i<5;i++){
        //輸出空格
        for(var m=0;m<4-i;m++){
            document.write('&nbsp;');
        }
        //輸出一行*
        for(var j=0;j<2*i-1;j++){
            document.write('*');
        }
        //換行
        document.write('<br>');
    }

做一個簡單的計算器

    <body>
<input type="text" id="txt-op1">
<select name="" id="slt">
    <option >+</option>
    <option >-</option>
    <option >*</option>
    <option >/</option>
</select>
<input type="text" id="txt-op2">
<button id="btn">=</button>
<input type="text" id="txt-result">


<script>
    //根據ID查找頁面元素
    var btn=document.getElementById('btn');
    var txt1=document.getElementById('txt-op1');
    var txt2=document.getElementById('txt-op2');
    var txtValue=document.getElementById('txt-result');
    var slt=document.getElementById('slt');
    var endValue;//運算結果
    
    // console.log(btn);
    //添加點擊事件
    btn.onclick=function(){
        // console.log(txt1.value,txt2.value);
        // console.log(slt.value);
        // txt1.value slt.value txt2.value;
        switch(slt.value){
            case "+":
                endValue=parseFloat(txt1.value)+parseFloat(txt2.value);
            break;
            case "-":
                endValue=txt1.value-txt2.value;
            break;
            case '*':
                endValue=txt1.value*txt2.value;
            break;
            case '/':
                endValue=txt1.value/txt2.value;
            break;
            default:
                endValue=txt1.value+txt2.value;
            break;
        }
        // console.log(endValue);
        //將數據展示到頁面中
        txtValue.value=endValue;
    };
</script>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章