练手用的

最新推荐文章于 2024-05-11 00:06:17 发布

爱lv行

最新推荐文章于 2024-05-11 00:06:17 发布

阅读量203

点赞数

分类专栏： javascript 文章标签： js

本文链接：https://blog.csdn.net/u013165804/article/details/72905414

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>计算器代码</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <script type="text/javascript" src="./js/script.js"></script>
</head>

<body>
    <div class="container" id="container">
        <input type="text" name="num1" class="input_num1 input_num">
        <span>+</span>
        <input type="text" name="num2" class="input_num2 input_num">
        <span>=</span>
        <span class="result"></span>
        <div class="">
            <input type="button" name="button" class="button" value="+">
            <input type="button" name="button" class="button" value="-">
            <input type="button" name="button" class="button" value="*">
            <input type="button" name="button" class="button" value="/">
        </div>
    </div>
</body>

</html>

css

* {
    margin: 0;
    padding: 0;
}
.container {
    width: 600px;
    margin: 100px auto;
    border:1px solid #dedede;
    padding: 50px; 
}
.button {
    padding: 10px;
    font-size: 16px;
    margin-top: 36px;
    margin-left: 15px;
    cursor: pointer;
}

window.onload = function() {
    // 获取整个容器
    var _container = document.querySelector("#container");
    // 获取全部计算按钮
    var _bottons = _container.querySelectorAll(".button");
    // 获取两个输入框
    var _input_num1 = _container.querySelector(".input_num1")
    var _input_num2 = _container.querySelector(".input_num2")
        // 获取显示结构的元素  
    var _result = _container.querySelector(".result");
    for (var i = 0; i < _bottons.length; i++) {
        _bottons[i].onclick = function() {
            switch (this.value) {
                case "+":
                    _result.innerHTML = parseInt(_input_num1.value) + parseInt(_input_num2.value);

                    break;
                case "-":
                    _result.innerHTML = _input_num1.value - _input_num2.value;

                    break;
                case "*":
                    _result.innerHTML = _input_num1.value * _input_num2.value;

                    break;
                case "/":
                    _result.innerHTML = _input_num1.value / _input_num2.value;

                    break;
            }
        }
    }
}

爱lv行

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
练手用的

html<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>计算器代码</title> <link rel="stylesheet" type="text/css" href="./css/style.css"> <script type="text/javascript" src="./js/scri
复制链接

扫一扫

专栏目录