【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;index++){
box=document.createElement('div')
main.appendChild(box)
for(var num=0;num;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;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&®.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)
}
}
