【web】制作计算器

最新推荐文章于 2022-12-16 08:42:52 发布
最新推荐文章于 2022-12-16 08:42:52 发布
阅读量1.2k 收藏 11
点赞数
分类专栏： web开发——作品 文章标签： web开发 计算器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44645934/article/details/102241996
版权

这是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
    评论
专栏目录
WEB网页版计算器（HTML、CSS、JavaScript实现）
weixin_60414376的博客
12-20 1万+
一、效果截图： 功能： 1、实现简单的四则运算。2、包含正负号操作。 3、M按钮实现跳转到一个网页。 4、可以使用小数运算。 二、代码实现： 1、HTML部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> ......
Web初学笔记（1）——Web应用（在线计算器）
qq_40735196的博客
11-10 3015
一个简单的在线计算器应用。使用html编写计算器的布局和结构，使用css更改样式和细节，使用javascript编写按键响应函数及计算逻辑。可作为初学入门的一个小参考。
web实现简单计算器
ch_musk的博客
03-29 8215
<html> <head><title>简单计算器</title> <style> .b1{ width:50px; height:35px; margin-top:10px; background-color:#99FFFF; } .screen{ width:215px; height:35px; tex...
Bugku-WEB-计算器（WP）
m0_73005107的博客
11-27 362
打开场景发现是一个计算器，需要我们输入正确答案即可获得flag，查看源代码（按Ctrl+u），逐行浏览发现“maxlength=1”。按F12对源代码进行编辑，将maxlength的值修改，修改完成后再次输入计算结果得到flag
使用web前端制作一个计算器
鸡叉骨的博客
03-20 7459
如果可以，点个赞支持一下呗，编程路上有我陪着你！ 制作一个计算器效果图如下： 一言不合上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Calculator</title> <style> /* 主体 */ .counter { wid.
web学习-汇率计算器
最新发布
06-05
这是对vue.js课程中的样例进行实现，实现了以vue为框架，由html+less+vue编写
JavaScript简易计算器制作
10-15
JavaScript简易计算器制作是一个基础的前端开发实践项目，它涉及到HTML、CSS和JavaScript的结合使用，以实现简单的数学运算。在这个项目中，我们将学习如何利用JavaScript处理用户交互，并进行基本的算术运算。 ...
python制作工资计算器web app
04-21
采用累计预扣法，计算五险一金，计算个税，根据发放工资来计算一年的到手工资，计算年终奖，并编写前端页面进行展示。
django制作的在线计算器
01-15
django开发的在线计算器实例，也可以通过访问http://106.12.16.193:5000/浏览效果
c#_制作计算器代码
06-05
C# 制作计算器代码详解 C# 编程语言是一种功能强大且灵活的编程语言，广泛应用于 Windows 应用程序开发、Web 应用程序开发、游戏开发等领域。今天，我们将使用 C# 语言来制作一个简单的计算器，实现基本的数学运算...
Web版的计算器
04-09
Web版的计算器
编写一个web的计算器页面
10-11
使用jsp编写一个计算器的页面，实现加减乘除功能。
WEB实现的计算器
10-20
JSP实现的计算器，基于MVC模式的计算器。适合新手学习！
web制作网页简易计算器
2201_75836738的博客
12-16 446
web制作网页
javaweb作业制作网页版简易计算器（3种方式）
热门推荐
码客斯基
04-12 3万+
我写的这三种计算器第一种是使用的javascript的方法将加减乘除做成四个按钮，每个按钮都有一个onclick，调用javascript的一个方法，最后将值设置到结果框里就行了。第二种是利用表单提交和转发的方式做的，分别写一个jsp页面上面写表单，然后再写一个servlet文件获取表单里的属性的值然后进行判断和运算，最后将结果转发到jsp页面，jsp页面接收转发的值并将其设置到结果。第三种是是利用javaBean，jsp页面内容与第二种方法基本相同，只是在最后不是利用转发，而是利用javaBean获得属性
【程序】[Vue] Web计算器——通过Vue 少量代码快速开发
gongfpp的博客
06-21 1126
数学计算器
web中用c#设计一个简易计算器
xiaodu655的博客
11-24 1万+
设计并实现一个简易的计算器—使用页面上提供的基本数码（0-9）按键在两个文本框TextBox1、TextBox2中输入两个数然后按下算符按键（加法运算符按键btnADD、减法运算符按键btnSubtractor、乘法算符按键btnMultiplying、除法算符按键btnDivision），能做相应的的某个单种类运算，在显示结果的只读文本框TextBox3上能显示相应的运算的结果。具体的操作步骤如下
Python Web 开发 – 在线web计算器
qq_52825925的博客
03-24 4254
Python Web 开发 – 在线web计算器 本文环境： Python—3.10.2 Visual Studio Code—1.65.2 Django—4.0.3 Bootstrap—5.1.3 jQuery—3.6.0 ##1. 创建项目 ###1）新建文件夹(code)用以存放VS Code项目，打开Visual Studio Code，点击File->Open Folder,选中建好的文件夹(code)。跳转至VS Code后，点击Terminal->New Terminal,在命令行
用HTML，CSS，JS制作一个网页计算器
ilikeu777的博客
03-27 3244
今天分享一个自己做的网页计算器，我个人感觉，虽然不精简，但是应该涉及到的东西都有了，所以分享出来，那我直接上代码了。 <html> <head> <meta charset="utf-8"> <title>我的计算器</title> <script src="jquery-1.9.1.min.js"></script> <script> function myck(
web前端制作BMI计算器
05-04
好的，制作一个简单的BMI计算器可以分为以下几个步骤： 1. 编写HTML代码 ``` <!DOCTYPE html> <title>BMI计算器 <h1>BMI计算器 身高（cm）: 体重（kg）: ()">计算 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值