HTML + CSS + javascript 实现web版计算器

W金刚葫芦娃W

已于 2022-12-03 14:09:52 修改

阅读量1.6k

点赞数 3

文章标签： css css3 html

于 2022-11-11 18:01:13 首次发布

本文链接：https://blog.csdn.net/qq_39330735/article/details/127810758

版权

一、效果图

二、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="content-type" content="text/html; charset=utf-8">
    <title>计算器</title>
    <style>
    /*顶部标题样式*/
        #top {
            width:461px;
            height:50px;
            margin:0;
            background-color:yellow;
            border-top-left-radius:px;
            border:solid 2px black;
        }

        #top .point{
            width:20px;
            height:20px;
            float:left;
            margin-left:10px;
            margin-top:15px;
            border-radius:10px;
        }
        #top .red{
            background-color:red;
            border:solid 1px rgba(223, 223, 223, 0.701);
        }
        #top .blue{
            background-color:rgb(25, 136, 255);
            border:solid 1px rgba(223, 223, 223, 0.701);
        }
        #top .green{
            background-color:green;
            border:solid 1px rgba(223, 223, 223, 0.701);
        }
        #cals-title{
            font-size:22px;
            color:black;
            float:right;
            margin-right:10px;
            margin-top:10px;
            font-weight: 1000;
        }
        /*结果显示栏  */
        #result{
            width:450px;
            height:50px;
            margin-top:3px;
            margin-bottom:3px;
            margin-left: 5px;
            background-color:rgb(255, 255, 255);
            border:solid 2px black;
            border-radius:5px

        }
        /*按钮区样式*/
        #button {
            width:458px;
            height:420px;
            background-color: rgb(250, 250, 250);
            margin-left:1px;
            border:solid 2px black;
            border-radius:5px;
            padding-top: 1px;
        }
        /*没错这是点击时候的动态效果*/
        #buttona:active{
            background-color: rgb(117, 147, 167);
            color: white;
        }
        #buttona:focus{
            background-color: rgb(67, 150, 202);
            color: white;
        }
        #button div {
            width:107px;
            height:80px;
            float:left;
            background-color:#b0cac3;
            margin-left:2px;
            line-height:80px;
            border:solid 2px ;
            border-radius:10px;
            text-align:center;
            font-size:26px;
        }
        /*伪类选择器鼠标悬停效果*/
        #button div:hover{
            background-color:orangeted;
        }
    </style>
       
    <script type="text/javascript">
        is_clickPointer_clicked="ok";
        is_operator_clicked="no";
        /* 计算机结果结算 */
        function doCalc(){
            var result = document.getElementById("result");
            var expression =result.innerHTML;
            result.innerHTML =eval(expression);
            is_clickPointer_clicked="no";
        }
        /* 一个弹框提示，没啥用就是牛*/
        function alertTitle(){
            var calTitle = document.getElementById("cals-title").innerHTML;
            window.alert(calTitle);
        }
        /*计算器数字输入*/
        function clickNumber(number){
            var result = document.getElementById("result");
            result.innerHTML += number;
            is_operator_clicked="ok";
        }
        /*计算机特殊字符+ - * / 输入*/
        function clickOperator(operator){
            var result = document.getElementById("result");
            var string = result.innerHTML;
            if(is_operator_clicked=="ok"){
                result.innerHTML += operator;
                is_operator_clicked="no";
                is_clickPointer_clicked="ok";
            }
        }
        /*小数点*/
        function clickPointer(operator){
            var result = document.getElementById("result"); /*获取当前交互框的内容*/
            var string = result.innerHTML;                  /*获取当前字符串*/
            var len =string.length;                         /*获取当前字符串长度*/   
            var last = string.charAt(len-1);                /*最后一位*/
            if (last != '.' && last !='+'&& last !='-'&& last !='*'&& last !='/' && last !='%' && last !=' ' && is_clickPointer_clicked=="ok"){
                var temp = operator; 
                result.innerHTML += temp;
                is_clickPointer_clicked="no";
            }
        }
        /* 清空  */
        function clearthis(operator){
            var result= document.getElementById("result");   
            var expression =result.innerHTML;
            result.innerHTML = " ";
            is_clickPointer_clicked="ok";
        }
    </script>

</head>
<body>
        <div style="border:solid 4px black; border-radius:10px;width:465px;height:542px">
        <div id="top">
            <div class="point red"></div>
            <div class="point blue"></div>
            <div class="point green"></div>
            <div id="cals-title">葫芦小金刚计算器</div>
        </div>
        <div id ="result" style='font-size:30px;' onclick="doCalc()"></div>
        <div id ='button'>
            <div id="buttona" onclick="alertTitle()">AC</div>
            <div id="buttona" onclick="clickOperator('给你说凑数的还要点')">凑数的</div>
            <div id="buttona" onclick="clickOperator('%')">%</div>
            <div id="buttona" onclick="clickOperator('/')">/</div>
            <div id="buttona" value='7' onclick="clickNumber(7)">7</div>
            <div id="buttona" onclick="clickNumber(8)">8</div>
            <div id="buttona" onclick="clickNumber(9)">9</div>
            <div id="buttona" onclick="clickOperator('*')">*</div>
            <div id="buttona" onclick="clickNumber(4)">4</div>
            <div id="buttona" onclick="clickNumber(5)">5</div>
            <div id="buttona" onclick="clickNumber(6)">6</div>
            <div id="buttona" onclick="clickOperator('-')">-</div>
            <div id="buttona" onclick="clickNumber(1)">1</div>
            <div id="buttona" onclick="clickNumber(2)">2</div>
            <div id="buttona" onclick="clickNumber(3)">3</div>
            <div id="buttona" onclick="clickOperator('+')">+</div>
            <div id="buttona" onclick="clickNumber(0)">0</div>
            <div id="buttona" onclick="clearthis()">del</div>
            <div id="buttona" onclick="clickPointer('.')">.</div>
            <div id="buttona" onclick="doCalc()">=</div>
        </div>
    </div>
</body>
</html>

W金刚葫芦娃W

关注

3
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
HTML + CSS + javascript 实现web版计算器

一个简单的HTML计算器，有代码详解注释，这里运用了javascript，需要搭建相应的java环境，就Visual Studio Code的丢进去就可以运行
复制链接

扫一扫