Javascript写简易计算器

最新推荐文章于 2022-05-31 15:30:11 发布

粥要熬

最新推荐文章于 2022-05-31 15:30:11 发布

阅读量814

点赞数

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

本文链接：https://blog.csdn.net/qq_36009964/article/details/71242903

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易计算器</title>
    <style type="text/css">
        *{
            margin:0;
            padding: 0;
        }
        .content{
            width: 300px;
            height: 400px;
            margin: 50px auto;
            background: #CBC6C6;
            border:1px solid #139EB7;
            box-shadow: -5px -5px 5px #565454;
            border-radius: 15px;
        }
        #toptext{
            width: 280px;
            height: 50px;
            margin: 10px auto;
            margin-left: 9px;
            line-height: 50px;
            border-radius: 15px;
            text-align: right;
            font-size: 24px;
            border: 1px #F0D711 solid;
        }
        .btns{
            width: 280px;
            height: 300px;
            margin: 10px auto;
        }
        .btns input{
            width: 50px;
            margin: 10px;
            height: 60px;
            float: left;
            font-size: 24px;
            line-height: 60px;
            border-radius: 10px;
            transform-origin: left top;
            background: linear-gradient(to right,#0df60d,red);
        }
        .btns input:hover{
            background: linear-gradient(to left,#0df60d,red);
            transform: rotate(15deg);
        }
    </style>
</head>
<body>
    <div class="content">
        <input type="text" id="toptext">
        <div class="btns">
            <input type="button" value="1" class="num">
            <input type="button" value="2" class="num">
            <input type="button" value="3" class="num">
            <input type="button" value="+" class="jisuan">
            <input type="button" value="4" class="num">
            <input type="button" value="5" class="num">
            <input type="button" value="6" class="num">
            <input type="button" value="-" class="jisuan">
            <input type="button" value="7" class="num">
            <input type="button" value="8" class="num">
            <input type="button" value="9" class="num">
            <input type="button" value="*" class="jisuan">
            <input type="button" value="0" class="num">
            <input type="button" value="C" id="clear">
            <input type="button" value="=" id="equals">
            <input type="button" value="/" class="jisuan">
        </div>
    </div>
    <script type="text/javascript">
        var text = document.getElementsByTagName('input')[0];
        var clear = document.getElementById('clear');
        var equals = document.getElementById('equals');
        var js = document.getElementsByClassName('jisuan');
        var num = document.getElementsByClassName('num');

        text.value = 0;
        var tex = "";
        var fuhao = "";
        var firstNum = "";
        var secondNum = "";

        for(var i=0 ; i<num.length; i++){
            num[i].onclick = function (){
                if(fuhao){
                    text.value += this.value;
                    secondNum = this.value;
                }else{
                    tex = tex+this.value;
                    firstNum = tex;
                    text.value = tex;
                }
            };
        }
        for(var j=0; j<js.length; j++){
            js[j].onclick = function(){
                fuhao = this.value;
                text.value += this.value;   
            };      
        }

        equals.onclick=function(){
            switch (fuhao) {
                case '+':
                    var res = firstNum*1 + secondNum*1;
                    break;
                case '-':
                    var res = firstNum - secondNum;
                    break;
                case '*':
                    var res = firstNum * secondNum;
                    break;
                case '/':
                    var res = firstNum / secondNum;
                    break;          
                default:
                    break;
            }
            text.value = res;
            tex = "";
            fuhao = "";
            firstNum = "";
            secondNum = "";
        }
        clear.onclick = function(){
            text.value = "";
        }
    </script>
</body>
</html>

界面是这样子的
这里写图片描述

粥要熬

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
Javascript写简易计算器

代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>简易计算器</title> <style type="text/css"> *{ margin:0; padding: 0; } .c
复制链接

扫一扫

专栏目录