2020-10-29日笔记

< input> < /input>输入框
< button >< /button>按钮

string ==> number (parseInt)解析后进行数学运算

例一

<input id="num1" /> * <input id="num2"/>

<button onclick="cal()"> = </button>

<input id="num3" />

<script>
    function cal() {
        num3.value = parseInt(num1.value) * parseInt(num2.value);
    }
</script>

例二

<button onclick="jian()"> - </button>
<input style="width: 40px;" value="1" id="num1" readonly> 
//readonly 限制用户不能自己更改数值
<button onclick="add()"> + </button>
<script>
    function add() {
        if (num1.value <= 9){
            num1.value = parseInt(num1.value) + 1;
        }
    }
    function jian() {
        if (num1.value >= 1){
            num1.value = parseInt(num1.value) - 1;
        }

    }
</script>

例三

<!--开关灯-->
<meta charset="UTF-8">
<img id="pic" src="pic_bulboff.gif"/>
<button id="btn" onclick="kaideng()">开灯</button>

<script>
    function kaideng() {
        if (btn.innerHTML == "开灯"){
            pic.src = "pic_bulbon.gif"
            btn.innerHTML = "关灯"
        }else {
            pic.src = "pic_bulboff.gif"
            btn.innerHTML = "开灯"
        }

    }
</script>

//if for
// input out if

//input <input />, prompt
//out alert console document.write

//变量:number, string, boolean
//undefined, null, object, function

//连等比值，三等比类型 ==（值）   ===（类型）

//获得编码值  "字".charCodeAt(0)