纯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
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值