练手用的

来源：互联网发布：股票自动化交易编程编辑：程序博客网时间：2024/05/17 05:59

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;            }        }    }}

阅读全文

0 0