【web】制作计算器

这是HTML结构`

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <link rel="stylesheet" href="calculator.css" />
    <script src="calculator.js"></script>]
   </head>
  <body>
    <div id="header"></div>
    <div id="main" ></div>
  </body>
</html>

**这是css样式**
在这里插入代码片
```*{
 margin: 0;
 padding: 0;
}
#header{
 margin:10px auto;
 margin-bottom: 0px;
 width: 498px;
 height: 200px;
 border: 1px solid black;
 border-bottom-width:0px ;
 background: black;
 opacity: 0.8; 
}
#header>div:nth-child(1){
 margin: 80px 0px 10px 0px;
 width: 100%;
 height: 50px;
 font-size: 40px;
 text-align: right;
 color: grey; 
}
#header>div:nth-child(2){
 margin:10px 0px ;
 width: 100%;
 height: 50px;
 font-size: 40px;
 text-align: right;
 color: white;
}
#main{
 margin:1px auto;
 width: 500px;
 height: 500px;
 border-top-width:0px ;
}
#main>div{
 border:0px solid black;
 border-width:1px 0px 0px 1px;
 width:100%;
 height: 20%;
}
#main>div>kbd{
    display: inline-block;
 border:0px solid black;
 border-right-width:1px;
 width:124px;
 height:100px;
 text-align: center;
 line-height: 100px;
 font-size: 50px;
 font-weight: bold;
    color: white;
    background: gray;
}
#main>div:nth-child(5)>kbd:nth-child(1){
 width:249px;
 height:100px;
}
#main>div>kbd:nth-child(4),#main>div:nth-child(5)>kbd:nth-child(3){
 background: firebrick;
 opacity: 0.7;
}
#main>div>kbd:hover,#main>div>kbd:nth-child(4):hover,#main>div:nth-child(5)>kbd:nth-child(3):hover{
 transition: all 0.3s;
 opacity: 1.0;
}

这里是js代码

```javascript
window.οnlοad=function(){
 var keys={
  0:['C','+/-','x','/'],
  1:['7','8','9','*'],
  2:['4','5','6','-'],
  3:['1','2','3','+'],
  4:['0','.','='],
  length:5
 } 
 /*header添加两个文本框*/
 for(var i=1;i<=2;i++){
  textareas=document.createElement("div")
  header.appendChild(textareas)
  var name=document.getElementsByTagName("div");
  name[i].id='outputText'+i/*给输出的文本框添加一个id*/
 }
    /*main创建多个按键*/  
 for(var index=0;index<keys.length;index++){
  box=document.createElement('div')
  main.appendChild(box)
  for(var num=0;num<keys[index].length;num++){
   boxs=document.createElement('kbd')
   boxs.innerHTML=keys[index][num] 
   boxs.name=keys[index][num]
   box.appendChild(boxs) 
  }
 }
      
 /*给每一个kbd添加ID*/
 var name=document.getElementsByTagName("kbd");    
 for(var i=0;i<name.length;i++){
  name[i].id='kbd_'+i;  
 }
 var outtext=document.getElementById("outputText1")  
 var text=document.getElementById("outputText2")
 
 /*判断整行都是数字是否达到最大值20位*/
 function max(){
  var reg=/^\d+$//*表示整行都是数字*/
  if(text.innerHTML.length>20&&reg.test(text.innerHTML)){
    outtext.innerHTML="已达到最大位数20位"
    text.innerHTML=text.innerHTML.substring(0,20)
  } 
 }
         
 /*改变每一个kbd的文本内容*/
 var add=0/*出现“.”的次数*/
       
 /*按键小数点*/
 kbd_17.οnclick=function(){
  add++
  if(add==1){
    if(text.innerHTML==""){
        text.innerHTML+="0."
    }
         else{
        text.innerHTML+="."
        text.innerHTML=text.innerHTML.replace("..",".")
                            .replace("+.","+0.").replace("-.","-0.")
                            .replace("*.","*0.").replace("/.","/0.")                             
    }
  }
    }
 
 /*修改为0开头的数,并且截取0以后的数*/
 var reg1=/^0[0-9]//*不是以0开头数的正则表达式*/
 function Revise(){
  if(reg1.test(text.innerText)){
    text.innerHTML=text.innerHTML.substr(1,text.innerHTML.length)
  }
 }
 /*对应相应的按键*/
 /*按键0*/
 kbd_16.οnclick=function(){
  text.innerHTML+=this.name
  Revise()
  max()
 }
    /*按键加号(+)*/
 kbd_15.οnclick=function(){
      text.innerHTML+=this.name
    /*当出现不合法的运算符是用replace()改正*/
  text.innerHTML=text.innerHTML.replace("+-","-").replace("++","+")
                                          .replace("--","-").replace("-+","+")
                                          .replace("*/","/").replace("/*","*")
                                          .replace("**","*").replace("//","/")
                                          .replace("+*","*").replace("-*","*")
                                          .replace("*+","+").replace("*-","-")
                                          .replace("/+","+").replace("/-","-")
                                          .replace("+/","/").replace("-/","/")
  add=0/*激活小数点(.)*/
  clearAfterAdd()/*清除输出文本,在输入文本中添加*/
 }
      
 /*按键3*/
 kbd_14.οnclick=function(){
     text.innerHTML+=this.name
     Revise()
  max()         
 }
 /*按键2*/
 kbd_13.οnclick=function(){
  text.innerHTML+=this.name
  Revise()
  max()
 }
  /*按键1*/
 kbd_12.οnclick=function(){
  text.innerHTML+=this.name
  Revise()
  max()
 }
 /*按键减号(-)*/
 kbd_11.οnclick=function(){
  text.innerHTML+=this.name
  text.innerHTML=text.innerHTML.replace("+-","-").replace("++","+")
                             .replace("--","-").replace("-+","+")
                             .replace("*/","/").replace("/*","*")
                             .replace("**","*").replace("//","/")
                             .replace("+*","*").replace("-*","*")
                             .replace("*+","+").replace("*-","-")
                             .replace("/+","+").replace("/-","-")
                             .replace("+/","/").replace("-/","/")
  add=0/*激活小数点(.)*/
  clearAfterAdd()/*清除输出文本,在输入文本中添加*/
 }
 /*按键6*/
 kbd_10.οnclick=function(){
  text.innerHTML+=this.name
  Revise()
  mix()
 } 
 /*按键5*/
 kbd_9.οnclick=function(){
     text.innerHTML+=this.name
     Revise()
     max()
 }
 /*按键4*/
 kbd_8.οnclick=function(){
  text.innerHTML+=this.name
  Revise()
  max()
 }
 /*按键乘号(*)*/
 kbd_7.οnclick=function(){
  text.innerHTML+=this.name
  text.innerHTML=text.innerHTML.replace("+-","-").replace("++","+")
                             .replace("--","-").replace("-+","+")
                             .replace("*/","/").replace("/*","*")
                             .replace("**","*").replace("//","/")
                             .replace("+*","*").replace("-*","*")
                             .replace("*+","+").replace("*-","-")
                             .replace("/+","+").replace("/-","-")
                             .replace("+/","/").replace("-/","/")
  add=0/*激活小数点(.)*/
  clearAfterAdd()/*清除输出文本,在输入文本中添加*/
 }
 /*按键9*/
 kbd_6.οnclick=function(){
  text.innerHTML+=this.name
  Revise()
  max()
 }
 /*按键8*/
 kbd_5.οnclick=function(){
  text.innerHTML+=this.name
  Revise()
     max()
 }
 /*按键7*/
 kbd_4.οnclick=function(){
  text.innerHTML+=this.name
  Revise()
  max()
 }
 /*按键除号(/)*/
 kbd_3.οnclick=function(){
  text.innerHTML+=this.name
  text.innerHTML=text.innerHTML.replace("+-","-").replace("++","+")
                             .replace("--","-").replace("-+","+")
                             .replace("*/","/").replace("/*","*")
                             .replace("**","*").replace("//","/")
                             .replace("+*","*").replace("-*","*")
                             .replace("*+","+").replace("*-","-")
                             .replace("/+","+").replace("/-","-")
                             .replace("+/","/").replace("-/","/")
     add=0/*激活小数点(.)*/   
  clearAfterAdd()/*清除输出文本,在输入文本中添加*/
 }
        
 /*判断正负*/
 var num=0
 /*符号键(+/-)*/
 kbd_1.οnclick=function(){ 
     num ++
  if(num%2==1){/*负数*/
    text.innerHTML=text.innerHTML
  }
  else{/*正数*/
    text.innerHTML=text.innerHTML.replace("-","")
  } 
 }
 kbd_0.οnclick=function(){
  text.innerHTML="0"
  outtext.innerHTML=""
 }
    
    
 var reg=/^\d+$//*表示整行都是数字*/
 function correct(names){/*按等号之后重新输入*/
  this.name=names
  if(reg.test(text.innerHTML)&&number3==false){         
   text.innerHTML=this.name
   number3=true
  }
  else{
    text.innerHTML+=this.name
  }
 }
    
 /*当重新输入时清空输入文本*/
 function Clear(){
  outtext.innerHTML="" 
  number2=0/*激活清除键(X)*/ 
    }
    
 function envelopeFun(Names){/*按等于号之后对一些方法的封装*/
   this.name=Names
  if(number2!=0){
   correct(this.name)  
   Clear()
  }
  else{
   text.innerHTML+=this.name
   Revise()
  }
 }
 /*清除输出文本,在输入文本中添加*/
 function clearAfterAdd(){
     /*按键7*/
  kbd_4.οnclick=function(){
   envelopeFun(this.name) 
  }
  /*按键8*/
  kbd_5.οnclick=function(){
   envelopeFun(this.name)         
  }
  /*按键9*/
  kbd_6.οnclick=function(){
   envelopeFun(this.name)
  }       
  /*按键4*/
  kbd_8.οnclick=function(){
   envelopeFun(this.name)
  }
  /*按键5*/
  kbd_9.οnclick=function(){
   envelopeFun(this.name)
  }
  /*按键6*/
  kbd_10.οnclick=function(){
   envelopeFun(this.name)
  }
     /*按键1*/
  kbd_12.οnclick=function(){
   envelopeFun(this.name)
  }
  /*按键2*/
  kbd_13.οnclick=function(){
   envelopeFun(this.name)
  }
  /*按键3*/
  kbd_14.οnclick=function(){
   envelopeFun(this.name)
  }
  /*按键0*/
  kbd_16.οnclick=function(){
   envelopeFun(this.name)
  }
    } 
    
 /*除去最后一位不是[0-9]的字符*/
 function deleteLastText(Text){
  /*不包含数字的正则表达式*/
  var creg=/[^0-9]/
  if(creg.test(text.innerHTML[text.innerHTML.length-1])){
   /*输出框显示的内容*/
   outtext.innerHTML=text.innerHTML.substring(0,text.innerHTML.length)+"="
   /*文本框显示的内容*/
   text.innerHTML=text.innerHTML.substring(0,text.innerHTML.length-1)
  } 
 } 
   
 /*加减乘除的运算结果*/
 function Count(Text){
  var reg=/^\d+$//*表示整行都是数字*/
  var answer=text.innerHTML
        var s1="" /*符号之前的字符串*/
        var s2="" /*符号之后的字符串*/   
        var push=answer.indexOf("+")/*出现加号的索引*/
  s1=text.innerHTML.substring(0,push)/*substring提取字符串中两个指定的索引号之间的字符*/
  s2=text.innerHTML.substr(push+1,text.innerHTML.length)/*substr从起始索引号提取字符串中指定数目的字符。*/  
  if(answer[push]=="+"){
   text.innerHTML= parseFloat(s1)+parseFloat(s2)
  }
        
  var minus=answer.indexOf("-")/*出现减号的索引*/
  s1=text.innerHTML.substring(0,minus)
  s2=text.innerHTML.substr(minus+1,text.innerHTML.length)
  if(answer[minus]=="-"){
   text.innerHTML= parseFloat(s1)-parseFloat(s2)
  }
        
  var ride=answer.indexOf("*")/*出现乘号的索引*/
  s1=text.innerHTML.substring(0,ride)
  s2=text.innerHTML.substr(ride+1,text.innerHTML.length)
  if(answer[ride]=="*"){
   text.innerHTML= parseFloat(s1)*parseFloat(s2)
  }
        
  var except=answer.indexOf("/")/*出现除号的索引*/
  s1=text.innerHTML.substring(0,except)
  s2=text.innerHTML.substr(except+1,text.innerHTML.length)
  if(answer[except]=="/"){
   text.innerHTML= parseFloat(s1)/parseFloat(s2)
  }
 }
 /*清除全部文本,或删除输入框的最后一位*/
 function clearLastText(number2){
  if(number2!=0){/*清零(清除全部文本)*/
   text.innerHTML="0"
   outtext.innerHTML=""
   number1=0/*激活等号(=)*/
  }  
  else{/*删除输入框的最后一位*/
   text.innerHTML=text.innerHTML.substring(0,text.innerHTML.length-1)        
  }        
 }
 /*删除键(X)*/
 kbd_2.οnclick=function(){
  clearLastText(number2)         
 } 
         
 var number1=0/*计“=”onclick多少次*/
 var number2=0/*计“X”onclick多少次*/
 var number3=true
 kbd_18.οnclick=function(){ 
  number1++
  number2++
  number3=false
  add=0/*激活小数点(.)*/
  /*删除键(X)*/
  kbd_2.οnclick=function(){
    clearLastText(number2)         
  } 
  
  /*打印出运算式*/ 
  outtext.innerHTML=text.innerHTML+"="
  /*除去最后一位不是[0-9]的字符*/
  deleteLastText(text.innerHTML)
  /*清除文本后再添加*/
  clearAfterAdd()
  /*加减乘除的运算结果*/
     Count(text.innerHTML)  
 }  
}

  

在这里插入图片描述

  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值