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

最新推荐文章于 2024-05-10 11:30:24 发布

程序员通通

最新推荐文章于 2024-05-10 11:30:24 发布

阅读量926

点赞数

分类专栏： JavaScript 文章标签： javascript html css

本文链接：https://blog.csdn.net/AC_greener/article/details/78602324

版权

JavaScript 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

<!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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+Javascript 实现简单计算器

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>简单计算器</title> <style> *{ box-sizing: border-box; } .mycalculator{ border: 2px sol
复制链接

扫一扫