博主信息
博文 16
粉丝 0
评论 0
访问量 15424
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
5.10计算器
如花似玉的小牛牛的博客
原创
916人浏览过

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>计算器</h2>

<div>
    <input type="text">
    <select id="option"  >
        <option value="a">+</option>
        <option value="b">-</option>
        <option value="c">*</option>
        <option value="d">/</option>
    </select>
    <input type="text">
    <button>计算器</button>
    <hr>
    <li></li>
</div>
<script>

    var a1 = document.getElementsByTagName("input")[0];
    var a2 = document.getElementsByTagName("input")[1];
    var opt = document.getElementById("option");
    for (i=0; i<opt.length; i++);
    var button = document.getElementsByTagName("button")[0];
    button.onclick =function () {
        var data=0;
        var data1=0;
        if(a1.value.length===0 && a2.value.length===0){
            alert('不能为空');
            a1.focus();
            a2.foucs();
            return false;
        }else if ((isNaN(a1.value)) && (isNaN(a2.value))) {
            alert('只能为数字');
            a1.focus();
            a2.foucs();
            return false;

        }else {
            //转换数值
           data =parseFloat(a1.value);
           data1=parseFloat(a2.value);
        }

        var opction =opt.value;
        var zan=0;
        var falg ='';
        switch (opction) {
            case 'a':
                falg ='+';
                zan=data + data1;
                break;
            case 'b':
                falg ='-';
                zan=data - data1;
                break;
            case 'c':
                falg ='*';
                zan=data * data1;
                break;
            case 'd':
                falg ='/';
                if(data1 ===0){
                    alert('除数不能为0');
                    return falg;
                }else{
                    zan=data / data1;
                    zan =Math.round(zan *100) /100;
                }
                break;
        }
        var li =document.getElementsByTagName("li")[0];
        var p =document.createElement("p");
        p.innerText= data1 + falg +data1 + '=' + zan ;
        li.appendChild(p);
    }
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


批改状态:未批改

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学