HTML+CSS+Javascript 实现简单计算器

来源：互联网发布：陌陌一键打招呼软件编辑：程序博客网时间：2024/06/05 19:12
<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>简单计算器</title>    <style>        *{            box-sizing: border-box;        }        .mycalculator{            border: 2px solid black;            width: 300px;            border-radius: 30px;            background-color:burlywood;            padding-left: 60px;            margin:auto;            margin-top: 150px;            box-shadow:5px 5px gray;        }        .wenben{            size:15px;        }        .buto{            width:40px;            height:40px;            margin: inherit;        }        .operator{            width:40px;            height:40px;            margin: inherit;        }        .buto,.wenben,.operator{            border-radius:10px;        }        #display{            height:40px;            background-color: #98d1dc;            box-shadow:inset 5px 5px darkolivegreen;        }    </style></head><body>    <div class="mycalculator">        <h3>by 一笑而过</h3>        <form class="calculator">            <input type="button"  class="operator" id="clear" value="清空">   <!--清空display中的内容-->            <input type="text"  id="display">               <!--文本框-->            <br>            <input type="button" class="buto" value="7" onclick="getvalue(this.value)">            <input type="button" class="buto" value="8" onclick="getvalue(this.value)">            <input type="button" class="buto" value="9" onclick="getvalue(this.value)">            <input type="button" class="operator" value="+" onclick="getvalue(this.value)">            <br>            <input type="button" class="buto" value="4" onclick="getvalue(this.value)">            <input type="button" class="buto" value="5" onclick="getvalue(this.value)">            <input type="button" class="buto" value="6" onclick="getvalue(this.value)">            <input type="button" class="operator" value="-" onclick="getvalue(this.value)">            <br>            <input type="button" class="buto" value="1" onclick="getvalue(this.value)">            <input type="button" class="buto" value="2" onclick="getvalue(this.value)">            <input type="button" class="buto" value="3" onclick="getvalue(this.value)">            <input type="button" class="operator" value="*" onclick="getvalue(this.value)">            <br>            <input type="button" class="buto" value="0" onclick="getvalue(this.value)">            <input type="button" class="operator" value="." onclick="getvalue(this.value)">            <input type="button" class="operator" value="/" onclick="getvalue(this.value)">            <input type="button" class="operator" id="result" value="=">            <br>        </form>    </div>    <script>        var body_Element = document.getElementsByTagName("body")[0];        document.getElementById("clear").onclick = function() {            document.getElementById("display").value="";        };        function getvalue(value){                   document.getElementById("display").value += value;        }        document.getElementById("result").onclick = function() {            var answer = 0;                       answer = document.getElementById("display").value;            document.getElementById("display").value = "";            document.getElementById("display").value = eval(answer);      //计算表达式或者语句        };    </script></body></html>
阅读全文
0 0