博客列表 >javascrip小实例之计算器

javascrip小实例之计算器

深海巨兽皮皮虾的博客
深海巨兽皮皮虾的博客原创
2018年04月09日 20:46:53824浏览

基本步骤为: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 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议