JustTooSweat 2022-06-21 20:12 采纳率: 100%
浏览 137
已结题

如何使用html制作计算器？

不用eval代码的话用什么代码运算，%如何加入计算（例：100+20%，结果为100.2），另外CE如何使用（例：100+20，点击CE后删除20，变成100+0）

img

  • 写回答

4条回答 默认 最新

  • 一把编程的菜刀 2022-06-22 11:03
    关注

    不用eval的计算器，你说的几点都实现了，处理的匆忙，可能会存在其他的BUG，你自己再调整就好

    <!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
.top {
    width: 465px;
    height: 60px;
    margin: auto;
    background-color: gray;
    margin-top: 100px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}
.point-red {
    width: 20px;
    height: 20px;
    background-color: red;
    float: left; /*浮动，可以让其不独占一行*/
    margin-left: 20px;
    margin-top: 20px;
    border-radius: 50%;/* 通过这个指令将正方形改为一个圆 */
}
.point-blue {
    width: 20px;
    height: 20px;
    background-color: blue;
    float: left; /*浮动，可以让其不独占一行*/
    margin-left: 20px;
    margin-top: 20px;
    border-radius: 50%;/* 通过这个指令将正方形改为一个圆 */
}
.point-green {
    width: 20px;
    height: 20px;
    background-color: green;
    float: left; /*浮动，可以让其不独占一行*/
    margin-left: 20px;
    margin-top: 20px;
    border-radius: 50%;/* 通过这个指令将正方形改为一个圆 */
}
#counter {
    font-size: 25px;
    color: white;
    float: right;
    line-height: 60px;
    margin-right: 35px;
}
/* 设置显示结果和计算过程的部分 */

#result {
    width: 451px;
    height: 55px;
    border: 2px solid brown;
    margin: auto;
    text-align: right;
    font-size: 30px;
    padding-right: 10px;
    padding-top: 5px;
}
/* 设置按钮区域的样式 */

.button {
    width: 465px;
    height: 413px;
    background-color: gray;
    margin: auto;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.button div {
    width: 110px;
    height: 80px;
    float: left;
    background-color: aquamarine;
    border: 1px gray solid;
    margin-left: 3.3px;
    text-align: center;
    font-size: 25px;
    line-height: 80px;
    font-weight: bold;
}
/* 使用伪类，可以产生一个鼠标悬停的效果 */

.button div:hover {
    background-color: bisque;
    /* 鼠标放在上面有放大的效果 */

    font-size: 28px;
}
</style>
    </head>
    <body>
<div class="top"> <!-- 这是最上面那个灰色的 -->
      <div class="point-red"></div>
      <div class="point-blue"></div>
      <div class="point-green"></div>
      <div id="counter">计算器</div>
    </div>

<!-- 显示计算结果和计算过程 -->
<div id="result">0</div>
<!-- 设置按钮区域 -->
<div class="button">
      <div onclick="doback1()">CE</div>
      <!--清空-->
      <div onclick="doclear()">C</div>
      <div onclick="clickoperator('%')">%</div>
      <div onclick="doback()">back</div>
      <div onclick="clicknumber(1)">1</div>
      <div onclick="clicknumber(2)">2</div>
      <div onclick="clicknumber(3)">3</div>
      <div onclick="clickoperator('+')">+</div>
      <div onclick="clicknumber(4)">4</div>
      <div onclick="clicknumber(5)">5</div>
      <div onclick="clicknumber(6)">6</div>
      <div onclick="clickoperator('-')">-</div>
      <div onclick="clicknumber(7)">7</div>
      <div onclick="clicknumber(8)">8</div>
      <div onclick="clicknumber(9)">9</div>
      <div onclick="clickoperator('x')">x</div>
      <div onclick="clicknumber(0)">0</div>
      <!-- 双击时，调用countertitle()这个函数 -->
      <div onclick="clickpoint('.')">.</div>
      <div onclick="docalc()">=</div>
      <div onclick="clickoperator('÷')">÷</div>
    </div>
</body>
    </html>
<script type="text/javascript">
        //给函数传递参数（number），用于输入哪一个数字
    function clicknumber(number){
        var result = document.getElementById("result");
        var string = result.innerHTML;
        var len = string.length;
        var re=/([^\d])(\d)$/g;
        var last=string.match(re);        
        if(result.innerHTML=='0'){
            result.innerHTML=number;
        }
        else if(last!=null && last[0].replace(/[^\d]/g,'')==0){//  && last[0].replace('/([+]|[-]|[%]|[x]|[÷])/g','')=='0'
            result.innerHTML=string.substr(0,len-1)+number
        }
        else{
            result.innerHTML += number; //这里的result是前面那个变量名，给变量名赋值为7
        }
    } 
    // 输入运算符
    function clickoperator(operator){
        var result = document.getElementById("result");
        var string = result.innerHTML;
        var len = string.length; //用len变量获取string长度
        var last = string[len-1]; //last变量是字符串的最后一个字符
        if(last == "+" || last =="-" || last == "x" || last == "÷" || last == "."){
            //下面的代码是从string的数组下标为0开始往后获取len-1个长度，然后最后一位用新输入的那个运算符代替
            var temp = string.substr(0,len-1) + operator; //substr(x,y)，x是数组开始的下标，y是往后获取y个
            result.innerHTML = temp;
        }
        else{
            result.innerHTML += operator; //如果不是字符那就正常执行
        }
    }
    // 计算结果
    function docalc(){
        var result = document.getElementById("result");
        var str = result.innerHTML;
        str.replace(/[^\d.]*(\d+%)[^\d]*/g,function (match,param,offset,string) {
            var jg=parseInt(param.replace('%',''))/100
            str=str.replace(param,jg)
        })
        patt=/(\d+)(\.\d+)?|([+]|[-]|[%]|[x]|[÷])/g;
        var new_str=str.match(patt);
        if(new_str==null){
            result.innerHTML =new_str;
        }
        else{
            var new_r=0;
            var pre=0;
            var ysf='+';
            var re=/^(\d+)(\.\d+)?$/g;
             for (var i = 0; i < new_str.length; i++) {
                     if(!re.test(new_str[i])){
                        ysf=new_str[i];
                    }
                    else{
                        pre=new_str[i];
                        if(ysf=='+'){
                            new_r=new_r+pre;
                        }
                        else if(ysf=='-'){
                            new_r=new_r-pre;
                        }else if(ysf=='x'){
                            new_r=new_r*pre;
                        }else if(ysf=='÷'){
                            new_r=new_r/pre;
                        }else if(ysf=='%'){
                            new_r=new_r % pre;
                        }
                    }
             }
             result.innerHTML = new_r;
        }
    }
    // 清空
    function doclear(){
        var result = document.getElementById("result");
        result.innerHTML = "0";  //给这个结果赋空值
    }
    // 删除，退格,回退删除最后一个字符

    // 要利用数组，在计算器中12345分别的是第01234位

    function doback(){
        var result = document.getElementById("result");
        var len = result.innerHTML.length;//取长度，这个字符串有多少位的长度
        // substr(x,y)里面有两个参数，x是从数组的第几位开始，y是往后取多少位。（0,5）意思就是从第一个开始取，一直取五个数字
        result.innerHTML = result.innerHTML.substr(0,len-1);
    }
     function doback1(){
        var result = document.getElementById("result");
        var len = result.innerHTML.length;//取长度，这个字符串有多少位的长度
        var re=/(\d+)%$/g;
        var new_str=result.innerHTML.match(re);
        // substr(x,y)里面有两个参数，x是从数组的第几位开始，y是往后取多少位。（0,5）意思就是从第一个开始取，一直取五个数字
        if(new_str==null){
            result.innerHTML = result.innerHTML.substr(0,len-1);
        }
        else{
            result.innerHTML = result.innerHTML.replace(new_str[0],0)
        }
    }
    //获取字符串最后一个字符，如果是一个运算符，你还想输入一个运算法，那就把这个运算符替换了
    function getlastchar(){
        var result = document.getElementById("result");
        var string = result.innerHTML;
        var len = string.length;
        var last = string[len-1];
        return last
    }
    // 这个函数是模仿了运算符来写的
    function clickpoint(point){
        var result = document.getElementById("result");
        var string = result.innerHTML;
        var len = string.length;
        var last = string[len-1];
        if(last == "."){
            last = string.substr(0,len-1) + point;
            result.innerHTML = last;
        }
        else{
            result.innerHTML += point;
        }
    }
    </script>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(3条)

报告相同问题？

问题事件

  • 系统已结题 6月30日
  • 已采纳回答 6月22日
  • 创建了问题 6月21日

悬赏问题

  • ¥15 对于这个问题的代码运行
  • ¥50 三种调度算法报错 有实例
  • ¥15 关于#python#的问题，请各位专家解答！
  • ¥200 询问：python实现大地主题正反算的程序设计，有偿
  • ¥15 smptlib使用465端口发送邮件失败
  • ¥200 总是报错，能帮助用python实现程序实现高斯正反算吗？有偿
  • ¥15 对于squad数据集的基于bert模型的微调
  • ¥15 为什么我运行这个网络会出现以下报错？CRNN神经网络
  • ¥20 steam下载游戏占用内存
  • ¥15 CST保存项目时失败