前端

作者: 周肸 | 来源:发表于2018-12-05 11:45 被阅读0次

    1.计算器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>计算机</title>
        <script type="text/javascript">
            window.onload = function(){
                var oInput01 = document.getElementById('input01');
                var oInput02 = document.getElementById('input02');
                var oSelect = document.getElementById('select');
                var oBtn = document.getElementById('btn');
    
                oBtn.onclick = function(){
                    var val01 = oInput01.value;
                    var val02 = oInput02.value;
    
                    //不做此判断会弹出“NaN”
                    if(val01=="" || val02==""){
                        alert('输入框不能为空!');
                        return;
                    }
                    if(isNaN(val01) || isNaN(val02)){
                        alert('请输入数字!');
                        return;
                    }
                    switch(oSelect.value){
                        case '0':
                            alert((parseFloat(val01)*100 + parseFloat(val02)*100)/100);
                            break;
                        case '1':
                            alert((parseFloat(val01)*100 - parseFloat(val02)*100)/100);
                            break;
                        case '2':
                            alert((parseFloat(val01)*100) * (parseFloat(val02)*100)/10000);
                            break;
                        case '3':
                            alert((parseFloat(val01)*100) / (parseFloat(val02)*100));
                            break;
                    }
                }
            }
        </script>
    </head>
    <body>
        <h1>计算器</h1>
        <input type="text" name="" id="input01"/>
        <select id="select">
            <option value="0">+</option>
            <option value="1">-</option>
            <option value="2">*</option>
            <option value="3">/</option>
        </select>
        <input type="text" name="" id="input02"/>
        <input type="button" name="" value="计算" id="btn">
    </body>
    </html>
    

    2. switch语句练习

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
            var today = prompt("请输入数字:");
            switch(today){
                case "1":
                    alert("星期一");
                    break
                case "2":
                    alert("星期二");
                    break
                case "3":
                    alert("星期三");
                    break
                case "4":
                    alert("星期四");
                    break
                case "5":
                    alert("星期五");
                    break
                case "6":
                    alert("星期六");
                    break
                case "7":
                    alert("星期日");
                    break
                default:
                    alert("输入不对");
            }
        </script>
    </head>
    <body>
        
    </body>
    </html>

    相关文章

      网友评论

          本文标题:前端

          本文链接:https://www.haomeiwen.com/subject/zbuicqtx.html