前端

作者: 周肸 | 来源:发表于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>

相关文章

  • 前端文章系列

    【前端】从0.1开始,创建第一个项目 【前端】初识HTML 【前端】HTML标签 【前端】HTML属性 【前端】C...

  • Web前端小白入门指迷

    大前端之旅 大前端有很多种,Shell 前端,客户端前端,App 前端,Web 前端和可能接下来很会火起来的 VR...

  • 推荐几个好的前端博客和网站

    前端开发博客前端开发博客-前端开发,前端博客 对前端知识结构的理解人类身份验证 - SegmentFault 脚本...

  • 2020-04-11

    前端工程化相关 前端动画相关 优化前端性能

  • Web前端

    Web前端 web前端是什么- 定义 职责 web前端基础知识和学习路线 web前端学习的资源 1.Web前端是...

  • 2018-05-16

    web前端开发 什么是web前端 web前端开发也戏称“web前端开发攻城狮”,目前这个职位也叫“大前端”。这个职...

  • 前端学习:一个好的前端导航可以更好的学习前端

    前端导航: 前端网课(前端的网络课程,在线网站) 前端资源(有论坛等交流平台) 前端手册(html手册,css手册...

  • 2018-09-25

    前端学习 前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现...

  • 浏览收藏文章列表

    前端 frameset frame前端框架支持ie8选择前端框架选择2前端框架选择weexframeset,fra...

  • 无标题文章

    #Web前端 - web前端是什么 - 定义 - 职责 - web前端基础知识和学习路线 - web前端学习的...

网友评论

      本文标题:前端

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