博主信息
博文 30
粉丝 0
评论 0
访问量 27939
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
javascrip小实例之计算器
深海巨兽皮皮虾的博客
原创
1029人浏览过

基本步骤为:1.在按钮点击时触发函数 获取 input1、 input 2与 计算符 通过 switch 判断计算符 进行计算,最后将结果放置到占位符中

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

    <label>数一<input type="number" id="num1"></label>
    <label for="num">
        <select name="" id="num">
            <option value="ca">*</option>
            <option value="cu">/</option>
            <option value="ja">+</option>
            <option value="jn">-</option>
        </select>
    </label>
    <label>数二<input type="number" id="num2"></label>
    <button id="btn">计算器</button>
    <p></p>
<script>
    var btn = document.getElementById('btn');
    var p = document.getElementsByTagName('p')[0];
    btn.onclick = function(){
        var num1 = document.getElementById('num1').value;
        var num2 = document.getElementById('num2').value;
        var math = document.getElementsByTagName('option')[0].value;
        switch(math){
        // p.innerHTML 为改变 p 的 HTML文本
            case 'ca': p.innerHTML = num1 * num2;break;
            case 'cu': p.innerHTML = num1 / num2;break;
            case 'ja': p.innerHTML = num1 + num2;break;
            case 'jn': p.innerHTML = num1 - num2;break;
        }

    }
</script>
</body>
</html>


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

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

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