Blogger Information
Blog 30
fans 0
comment 0
visits 23465
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
javascrip小实例之计算器
深海巨兽皮皮虾的博客
Original
825 people have browsed it

基本步骤为: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>


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post