Js第三天笔记

Document -------------------------------------------------------------------------- Document

<input type="text" id="inp1">
<select name="" id="fuHao">
    <option value="1">+</option>
    <option value="2">-</option>
    <option value="3">*</option>
    <option value="4">/</option>
</select>
<input type="text" id="inp2">
<button id="btn">=</button>
<input type="text" id="result">


<script>
    // 1 先拿对象
    //   尽量不要把拿对象放在点击事件里，因为这个点击事件会执行很多次

    // 2 select的使用
    //   option里面的value要么写要么不写，不能空着，js在获取值的时候，优先拿value值，没有value就拿option里面的内容

    // 3 value不能提前保存

    // 4 等号的问题

    // 拿对象

    var oInp1 = document.getElementById('inp1')
    var oInp2 = document.getElementById('inp2')
    var sl = document.getElementById("fuHao");
    var oBtn = document.getElementById('btn')
    var oInp3 = document.getElementById('result')

    // 绑定点击事件

    oBtn.onclick = function() {

        // 拿两个框的值
        var n1 = oInp1.value;
        var n2 = oInp2.value;

        // 拿符号
        var f = sl.value;
        console.log(f);

        // 判断为空
        if (n1 === '' && n2 === '') {
            alert('输入不能为空')
        }
        // 不是数字
        else if (isNaN(n1) && isNaN(n2)) {
            alert('输入的不是数字')
        }
        // 是数字
        else {
            // 根据选择的符号计算
            if (f === '1') {
                var sum = n1 * 1 + n2 * 1;
                oInp3.value = sum;
            } else if (f === '2') {
                oInp3.value = n1 - n2;
            } else if (f === '3') {
                oInp3.value = n1 * n2;
            } else if (f === '4') {
                oInp3.value = n1 / n2;
            }

        }

    }
</script>

------------------------------------------------------------------------- 闰年 Document 年 月 日 判断

<script>
    // 要求：判断输入的日期是否合法
    //   年1000-2000之间

    // 思路：
    //   先判断年份
    //   再判断月份
    //   再判断日期
    //      日期的最大天数是不确定的，因此设置一个变量maxDay


    // 注意的问题：
    //    变量命名首字母小写  使用驼峰
    //    if嵌套  else必须和if配对
    //    =  ==  ===
    //    赋值 =
    //    判断 ==(值)   ===(值和类型都相等)

    var oYear = document.getElementById('year')
    var oMonth = document.getElementById('month')
    var oDay = document.getElementById('day')
    var oBtn = document.getElementById('btn')


    oBtn.onclick = function() {
        // 先判断年
        var y = oYear.value;
        if (y >= 1000 && y <= 2000 && y % 1 === 0) {
            // 再判断月
            var m = oMonth.value;
            if (m >= 1 && m <= 12 && m % 1 === 0) {
                //  再判断日期
                var d = oDay.value;

                // 日期是根据月份来判断的
                var maxDay;
                if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
                    maxDay = 31
                } else if (m == 4 || m == 6 || m == 9 || m == 11) {
                    maxDay = 30
                } else if (m == 2) {
                    // 2月的天数根据年份来判断
                    if (y % 4 === 0 && y % 100 !== 0 && y % 1 === 0) {
                        maxDay = 29
                    } else {
                        maxDay = 28
                    }

                }
                if (d >= 1 && d <= maxDay && d % 1 === 0) {
                    alert('OK')
                } else {
                    alert('请输入正确的日期')
                }
            } else {
                alert('请输入正确的月份')
            }
        } else {
            alert('请输入正确的年份')
        }
    }
</script>

------------------------------------------------------------------------ switch Document --------------------------------------------------------------- switch简易计算器 Document + - * / =

<script>
    // 先拿对象
    var oBtn = document.getElementById('btn')
    var sl = document.getElementById("fuHao");
    var oInp1 = document.getElementById('inp1')
    var oInp2 = document.getElementById('inp2')


    var oInp3 = document.getElementById('result')

    // 绑定点击事件
    oBtn.onclick = function() {
        var n1 = oInp1.value;
        var n2 = oInp2.value;

        // 拿符号
        // var q = oFuhao.value;

        var f = sl.value;

        if (n1 === '' || n2 === '') {
            alert('输入不能为空')
        }

        if (isNaN(n1) || isNaN(n2)) {
            alert('输入的不是数字')
        }
        // 是数字
        else {
            // 根据选择的符号计算

            switch (f) {
                case '1':
                    {
                        var sum = n1 * 1 + n2 * 1;
                        result.value = sum;

                    }
            }
        }
    }
</script>

------------------------------------------------------------- 分数的判断 Document

<script>

    // 随机一个分数，判断是否及格

    var score = Math.round(Math.random() * 100) ;

    // if(score >= 60 && score <= 70) {
    //     alert(score + '分还可以')
    // }
    // else if(score > 70 && score <= 80) {
    //     alert(score + 'just so so')
    // }

    // else if(score > 80 && score <= 90) {
    //     alert(score + '666')
    // }

    // else if(score > 90 && score <= 100) {
    //     alert(score + 'yyds')
    // }
    // else {
    //     alert('下个班见')
    // }
     
    var score = 45 ;
    score = Math.floor(score / 10) ;
    switch(score) {
        case 10 : {
            alert('yyds') ;
            break ;
        }
        case 9 : {
            alert('yyds') ;
            break ;
        }
        case 8 : {
            alert('666') ;
            break ;
        }
        case 7 : {
            alert('just so so') ;
            break ;
        }
        case 6 : {
            alert('还阔以') ;
            break ;
        }
        // case 5 : 
        // case 4 : 
        // case 3 :
        // case 2 : 
        // case 1 : 
        // case 0 : {
        //     alert('下个班见');
        // }
        default : {
            alert('下个班见')
        }
    }

</script>