纯js写计算器

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script type="text/javascript">
      var body_=document.getElementsByTagName('body');
      //先创建最外层div
      var maindiv=document.createElement('div');
      maindiv.style.background='#ccc';
      maindiv.style.width='400px';
      maindiv.style.height='600px';
      maindiv.style.fontSize='0';
      maindiv.style.borderRadius='10px';
      //创建显示器
      var view=document.createElement('div');
      view.style.width='auto';
      view.style.height='100px';
      view.style.background='#efefef';
      view.innerHTML='0';
      view.style.borderTopLeftRadius='20px';
      view.style.borderTopRightRadius='20px';
      view.style.lineHeight='100px';
      view.style.fontSize='4rem';
      view.style.textAlign='right';
      view.style.paddingRight='10px';
      view.style.border='1px solid rgb(150,150,150)';
      maindiv.appendChild(view);
      //创建按键
      for(var i=0;i<19;i++){
        var itemdiv=document.createElement('div');
        itemdiv.style.background='rgb(224,224,224)';
        itemdiv.style.width='98px';
        itemdiv.style.height='98px';
        itemdiv.style.fontSize='3rem';
        itemdiv.οnclick=alick_item;
        itemdiv.style.verticalAlign='top';
        itemdiv.style.textAlign='center';
        itemdiv.style.lineHeight='98px';
        itemdiv.style.border='1px solid #999';
        itemdiv.style.display='inline-block';
        //数字处理
        if (i>=4&&i<=6) {
          itemdiv.innerHTML=i+3;
        }else if (i>=8&&i<=10) {
          itemdiv.innerHTML=i-4;
        }else if (i>=12&&i<=14) {
          itemdiv.innerHTML=i-11;
        }else if (i==16) {
          itemdiv.style.width='198px';
          itemdiv.innerHTML='0';
        }else{
        var a;
        switch (i) {
          case 0:
            a='AC';
            break;
            case 1:
              a='+/-'
              break;
              case 2:
                a='%'
                break;
                case 3:
                  a='/';
                  itemdiv.style.background='rgb(246,144,65)';
                  break;
                  case 7:
                    a='*'
                    itemdiv.style.background='rgb(246,144,65)';
                    break;
                    case 11:
                      a='-'
                      itemdiv.style.background='rgb(246,144,65)';
                      break;
                        case 15:
                          a='+'
                          itemdiv.style.background='rgb(246,144,65)';
                          break;
                          case 17:
                            a='.'
                            break;
                            case 18:
                              a='='
                              itemdiv.style.background='rgb(246,144,65)';
                              itemdiv.οnclick=css;
                              break;
                              default:


                            }
                            itemdiv.innerHTML=a;}
                            maindiv.appendChild(itemdiv);




                          }
      body_[0].appendChild(maindiv);


      var num1='',num2='',char='';
      function alick_item(){
        var a=this.innerHTML
        if (num1.length<11&&num2.length<11) {


          if (a=='AC') {
            num1=num2=char='';
            view.innerHTML='0';
          }else if (num1.indexOf('.')!=-1) {
            if (a=='.') {


            }else {
              num1+=a;
              view.innerHTML=num1;
            }
          }else{
            if (char==''||char=='null') {
              if (a>0||a<10||a==".") {
                num1+=a;
                view.innerHTML=num1;
              }else if (a=='+'||a=='-'||a=='*'||a=='/'||a=='%') {
                char=a;
              }
            }else if (a>0||a<10||a=='.') {
                num2+=a;
                view.innerHTML=num2;
              }
            }
          }else{


          }
        }


        function css(){
          switch (char) {
            case '+':
              view.innerHTML=Number(num1)+Number(num2);
              break;
              case '-':
                view.innerHTML=num1-num2;
                break;
                case '*':
                  view.innerHTML=num1*num2;
                  break;
                  case '/':
                    view.innerHTML=num1/num2;
                    break;
                    case '%':
                      view.innerHTML=num1%num2;
                      break;
            default:


          }
        }


    </script>
  </body>
</html>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的 HTML 和 JavaScript 计算器的示例代码: ```html <!DOCTYPE html> <html> <head> <title>计算器</title> <meta charset="UTF-8"> <style> #calculator { width: 200px; height: 300px; border: 1px solid #ccc; padding: 10px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; } </style> </head> <body> <div id="calculator"> <input type="text" id="result" value="0" disabled> <button onclick="clearResult()">清空</button> <button onclick="calculate('+')">+</button> <button onclick="calculate('-')">-</button> <button onclick="calculate('*')">*</button> <button onclick="calculate('/')">/</button> <button onclick="calculate('%')">%</button> <button onclick="calculate('=')">=</button> <button onclick="appendToResult('1')">1</button> <button onclick="appendToResult('2')">2</button> <button onclick="appendToResult('3')">3</button> <button onclick="appendToResult('4')">4</button> <button onclick="appendToResult('5')">5</button> <button onclick="appendToResult('6')">6</button> <button onclick="appendToResult('7')">7</button> <button onclick="appendToResult('8')">8</button> <button onclick="appendToResult('9')">9</button> <button onclick="appendToResult('0')">0</button> </div> <script> let currentResult = '0'; function appendToResult(value) { if (currentResult === '0') { currentResult = value; } else { currentResult += value; } document.getElementById('result').value = currentResult; } function clearResult() { currentResult = '0'; document.getElementById('result').value = currentResult; } function calculate(operator) { switch(operator) { case '+': currentResult = eval(currentResult + '+0'); break; case '-': currentResult = eval(currentResult + '-0'); break; case '*': currentResult = eval(currentResult + '*1'); break; case '/': currentResult = eval(currentResult + '/1'); break; case '%': currentResult = eval(currentResult + '/100'); break; case '=': currentResult = eval(currentResult); break; } document.getElementById('result').value = currentResult; } </script> </body> </html> ``` 在这个例子中,我们使用 HTML 和 CSS 创建了一个简单的计算器界面。其中,我们使用了一个包含所有计算器按钮的 `div` 元素,并将其设置为具有列方向的 flex 布局。我们还给计算器添加了一个输入框,以显示用户的输入和计算结果。 在 JavaScript 中,我们定义了三个函数,分别用于追加数字到当前结果、清空结果以及执行计算操作。这些函数与 HTML 中的按钮一一对应,并通过 `onclick` 属性绑定到按钮上。在执行计算操作时,我们使用了 `eval()` 函数来计算表达式的值,并将其存储为当前结果。最后,我们将当前结果更新到输入框中,以便用户查看计算结果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值