网络安全--PHP编程与系统开发-07-利用JavaScript实现计算器

认证搬砖大师

已于 2022-08-10 00:43:05 修改

阅读量179

点赞数

分类专栏：网络安全文章标签： javascript 前端开发语言

于 2022-08-10 00:40:39 首次发布

本文链接：https://blog.csdn.net/m0_70568918/article/details/126258376

版权

网络安全同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

html

8 篇文章 0 订阅

订阅专栏

一，利用JS实现计算器

1核心操作

当点击每个按钮时，需要响应点击时间，并输入相应的值在result元素中显示出来。
要能够计算结果并将结果显示出来，怎么计算结果？
如何避免连续输入运算符？

2响应单击事件显示输入数字

function clickName(number){
            var result = document.getElementById("result");
            // result.innerHTML += number;
            result.innerHTML = result.innerHTML + number
        }
<div onclick="clickName(7)">7</div>
<div onclick="clickName(8)">8</div>

3响应点击时间输入运算符

 function clickOperator(operatot){
            var result = document.getElementById("result");
            result.innerHTML += operatot;
        }
 <div onclick="clickOperator('%')">%</div>
<div onclick="clickOperator('/')">÷</div>

4如何运算result中表达是的结果

//在JavaScript中，有一个函数叫：eval，可以吧函数里面的字符串当成一段代码执行
 //计算结果
        function doCalc(){
            var result = document.getElementById("result");
            var expression = result.innerHTML;
            result.innerHTML = eval(expression);
        }
<div onclick="doCalc()">=</div>

5清空结果

 //清空结果
        function doClear(){
            document.getElementById("result").innerHTML = "";
        }
 <div onclick="doClear()">AC</div>

6删除

 //回退删除最后一个字符
        function doBack(){
            var result = document.getElementById("result");
            var len = result.innerHTML.length; //取字符串长度
            result.innerHTML =  result.innerHTML.substr(0,len-1);

        }
<div onclick="doBack()">删除</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DIV计算器</title>
    <style>
        /* 设置顶部标题栏样式 */
        #top{
            width: 450px;
            height: 50px;
            margin: auto;
            /* border-radius: 5px; */
            background-color: grey;
            border-top-left-radius: 10px; /*左上角圆弧*/
            border-top-right-radius: 10px; /*右上角圆弧*/
        }
        #top .point{
            width: 20px;
            height: 20px;
            float: left;
            margin-left: 10px;
            margin-top: 15px;
            border-radius: 10px;
        }
        #top .red{
            background-color: red;
        }
        #top .blue{
            background-color: blue;
        }
        #top .green{
            background-color: green;
        }
        #calc-title{
            float: right;
            margin: 10px 10px 0 0;
            font-size: 22px;
            color: white;
                
        }
        /* 设置结果栏样式 */
        #result{
            width: 436px;
            height: 50px;
            margin: auto;
            background-color: rgb(239, 232, 232);
            border: solid 2px grey;
            text-align: right;
            font-size: 35px;
            padding-right: 10px;
            
            
        }
    
        /* 按钮区域的样式 */
        #button{
            width: 450px;
            height: 400px;
            background-color: gray;
            margin: auto;
        }
        #button div{
            width: 108px;
            height: 73px;
            float: left;
            margin-top: 2px;
            background-color: aqua;
            border: solid 2px gray;
            line-height: 80px; 
            text-align: center;  /*文字内容水平居中*/
            font-size: 22px;
        }
        /* 鼠标悬停效果 */
        #button div:hover{
            background-color: coral;

        }
    </style>
    <!-- 表示下面是JS代码 -->
    <script type="text/javascript">
        //给函数传递一个参数，用于输入哪一个数字
        function clickName(number){
            var result = document.getElementById("result");
            // result.innerHTML += number;
            result.innerHTML = result.innerHTML + number
        }
        function clickOperator(operatot){
            var result = document.getElementById("result");
            result.innerHTML += operatot;
        }
        //JavaScript中的Eval函数，用于将字符串变成字符串执行
        //计算结果
        function doCalc(){
            var result = document.getElementById("result");
            var expression = result.innerHTML;
            result.innerHTML = eval(expression);
        } 
        //清空结果
        function doClear(){
            document.getElementById("result").innerHTML = "";
        }
        //回退删除最后一个字符
        function doBack(){
            var result = document.getElementById("result");
            var len = result.innerHTML.length; //取字符串长度
            result.innerHTML =  result.innerHTML.substr(0,len-1);

        }

    </script>
</head>
<!-- onload元素时间，页面加载完成之后自动执行 -->
<body >
    <!-- 头部 -->
    <div id="top">
        <div class="point red"></div>
        <div class="point blue"></div>
        <div class="point green"></div>
        <div id="calc-title">计算器</div>
    </div>
    <!-- 结果 -->
    <div id="result" name="result">
        
    </div>
    <!-- 按钮 -->
    <div id="button">
        
        <div onclick="doClear()">AC</div>
        <div onclick="clickOperator()">+/-</div>
        <div onclick="clickOperator('%')">%</div>
        <div onclick="clickOperator('/')">÷</div>

        <div onclick="clickName(7)">7</div>
        <div onclick="clickName(8)">8</div>
        <div onclick="clickName(9)">9</div>
        <div onclick="clickOperator('*')">*</div>

        <div onclick="clickName(4)">4</div>
        <div onclick="clickName(5)">5</div>
        <div onclick="clickName(6)">6</div>
        <div onclick="clickOperator('-')">-</div>

        <div onclick="clickName(1)">1</div>
        <div onclick="clickName(2)">2</div>
        <div onclick="clickName(3)">3</div>
        <div onclick="clickOperator('+')">+</div>

        <div onclick="clickName(0)">0</div>
        <!-- ondblclick：当元素被双击时执行代码 -->
        <div onclick="doBack()">删除</div>
        <div onclick="clickOperator('.')">.</div>
        <div onclick="doCalc()">=</div>
    
    </div>
</body>
</html>