HTML网页计算器

最新推荐文章于 2024-05-10 11:30:24 发布
最新推荐文章于 2024-05-10 11:30:24 发布
阅读量6k 收藏 26
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huzijia888/article/details/78712236
版权

<!doctype html>

<html>
<head>
<!--网页计算器，除逻辑外，界面设计的关键在单元格跨行属性colspan的使用-->
<style>
#first{/*第一个数字输入框*/
width:210px;
border:0px;
}
#second{/*运算符号输入框*/
width:210px;
border:0px;
}
#three{/*第二个数字输入框*/
width:70px;
border:0px;
}
#four{/*结果输入框，设置文字方向为右*/
width:140px;
border:0px;
text-align:right;
}
.b1{/*设置按键大小*/
width:50px;
}
</style>
<script>
function inputNum(event){//用来输入数字的函数
var add=event.target.value;//获得触发的按键的数值值
var input1=document.getElementById("first");//读取第一个输入元素
   var fuhao=document.getElementById("second");//读取符号输入元素
   var input2=document.getElementById("three");//读取第二个输入元素
var out=document.getElementById("four");//读取结果元素框
if(fuhao.value==""){//如果符号栏为空，向第一个数字输入框输入框，否则向第二个
inputAdd(input1,add,out);//调用输入函数
}
else{
inputAdd(input2,add,out);
}
}
function inputAdd(input1,add,out){//input1是输入框元素，add是需要加上的元素，out是结果输出框元素
if(input1.value.length<8&&out.value==""){//如果位数未到达限定值并且未输出结果
if(add=="+/-"||add=="."){//如果是正负键和小数点按键
if(add=="+/-"){//如果是正负键
if(input1.value.indexOf("-")==-1){//如果是个正数
var k="-";//在原来的数前面加上负号
k=k+input1.value+"";
input1.value=k;

}
else{//如果是负数，去掉前面的负号
input1.value=input1.value.substring(1);
}
}
else{//如果是小数点键被按下
if(input1.value.length!=0&&input1.value.indexOf(".")==-1){//如果没有小数点且输入框不为空
input1.value=input1.value+add+"";//在当前输入框末尾加上小数点
}
}
}
else{//如果是普通数字输入
input1.value=input1.value+add+"";//将新输入的数值输入到输入框
}
}
}
function fuhao(event){//计算符号输入函数
   var add=event.target.value;//获得触发的按键的数值值
var input1=document.getElementById("first");//读取第一个输入元素
   var fuhao=document.getElementById("second");//读取符号输入元素
   if(input1.value!=""&&fuhao.value==""){//如果第一个输入框不为空，且计算符号栏为空，则输入对应符号
fuhao.value=add;
}
}
function backspace(){//回退函数
var input1=document.getElementById("first");//读取第一个输入元素
var fuhao=document.getElementById("second");//读取符号输入元素
var input2=document.getElementById("three");//读取第二个输入元素
var out=document.getElementById("four");//读取结果元素框
if(out.value!="")//如果已输出计算结果，则将所有输入框清空并跳出函数
input1.value="";
   fuhao.value="";
input2.value="";
out.value="";
return;
}
if(input2.value!=""){//如果第二数值输入框不为空，则删除输入框最后一位数并退出函数
input2.value=input2.value.substring(0,input2.value.length-1);
return;
}
if(fuhao.value!=""){//如果计算符号栏不为空，则清除计算符号栏并退出函数
fuhao.value="";
return;
}
if(input1.value!=""){//如果第一数值输入框不为空，则删除输入框最后一位数并退出函数
input1.value=input1.value.substring(0,input1.value.length-1);
return;
}

}
function cle(){//清除函数，清空所有输入框
var input1=document.getElementById("first");//读取第一个输入元素
var fuhao=document.getElementById("second");//读取符号输入元素
var input2=document.getElementById("three");//读取第二个输入元素
var out=document.getElementById("four");//读取结果元素框
input1.value="";
fuhao.value="";
    input2.value="";
out.value="";
}
function outCon(){//计算及结果输出函数
var input1=document.getElementById("first").value;//读取第一个输入元素
var fuhao=document.getElementById("second").value;//读取符号输入元素
var input2=document.getElementById("three").value;//读取第二个输入元素
var out=document.getElementById("four");//读取结果元素框
if(input1!=""&&input2!=""&&fuhao!=""&&out.value==""){//如果所有的数字全部输入完毕
var num1=Number(input1);//将字符串转换成可计算的数值
var num2=Number(input2);
var output=0;
switch(fuhao){//根据运算符计算结果
case "*": output=num1*num2; break;
case "/": output=num1/num2;break;
case "+": output=num1+num2;break;
case "-": output=num1-num2;break;
default:break;
}
out.value="="+output;//将计算结果在结果输出框中输出
}

}
</script>
<meta charset="UTF-8">
</head>
<body>
<table style="background-color:#EEE8AA;padding:5px" >
<tr> <td id="inp" colspan="4" style="background-color:white"><input type="text" id="first" readOnly="readOnly"><br><input type="text" id="second" readOnly="readOnly"><br><input type="text" id="three" readOnly="readOnly"><input type="text" id="four" readOnly="readOnly"></td>
</tr>
<tr>
<td colspan="2"><input type="button"  value="BackSpace" οnclick="backspace()"></td><td><input type="button" value="C" class="b1" οnclick="cle()"></td><td><input type="button" value="=" class="b1" οnclick="outCon()"></td>
</tr>
<tr>
<td><input type="button" class="b1" value="7" οnclick="inputNum(event)"></td><td><input type="button" class="b1" value="8" οnclick="inputNum(event)"></td><td><input type="button" class="b1" value="9" οnclick="inputNum(event)"></td><td><input type="button" class="b1" value="/" οnclick="fuhao(event)"></td>
</tr>
<tr>
<td><input type="button" class="b1" value="4" οnclick="inputNum(event)"></td><td><input type="button" class="b1" value="5" οnclick="inputNum(event)"></td><td><input type="button" class="b1" value="6" οnclick="inputNum(event)"></td><td><input type="button" class="b1" value="*" οnclick="fuhao(event)"></td>
</tr>
<tr>
<td><input type="button" class="b1" value="1" οnclick="inputNum(event)"></td><td><input type="button" class="b1" value="2" οnclick="inputNum(event)"></td><td><input type="button" class="b1" value="3" οnclick="inputNum(event)"></td><td><input type="button" class="b1" value="-" οnclick="fuhao(event)"></td>
</tr>
<tr>
<td><input type="button" class="b1" value="0" οnclick="inputNum(event)"></td><td><input type="button" class="b1" value="+/-" οnclick="inputNum(event)"></td><td><input type="button" class="b1" value="." οnclick="inputNum(event)"></td><td><input type="button" class="b1" value="+" οnclick="fuhao(event)"></td>
</tr>
</table>
</body>
</html>
菜鸟下山
关注
  • 2
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【html】用html5+css3+JavaScript制作一个计数器
weixin_56334307的博客
06-17 606
文件，你应该就能看到一个简单的计数器，每次点击按钮时，计数就会加一。将这三个文件放在同一个文件夹中，并在浏览器中打开。
HTML实现计算器
m0_62727420的博客
07-03 1万+
HTML实现计算器
用HTML实现简易版计算器
热门推荐
lkllkl123123的博客
08-13 1万+
计算器功能：实现了加减乘除、清零、回退、四则运算等等 HTML部分：用表格添加按键，用div块显示内容 CSS部分：将显示的内容定位到div块右下角 JavaScript部分：通过innerTHML属性添加 / 获取所需计算的内容，再调用eval方法将获取到的内容转换为js代码进行计算........................
html实现计算器源码
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
11-21 1907
html实现计算器源码，计算器源码，简易计算器功能实现，加减乘除，平方，根号等基本算数功能实现，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
用JavaScript和HTML实现一个精美的计算器
黑夜开发者的博客
07-29 3080
计算器是我们日常生活中经常使用的工具之一，可以帮助我们进行简单的数学运算。在本博文中，我将使用JavaScript编写一个漂亮的计算器，并添加加减乘除功能。这个计算器将有一个精美的用户界面，包含9个数字按钮和加减乘除操作符。好了，本文的内容就分享到这里。希望你在使用这个精美计算器的过程中有所收获，它不仅能帮助你进行基本的数学运算，还能为你提供一个愉快的使用体验。如果你对编程感兴趣，也欢迎自行扩展功能，让这个计算器变得更加强大。
html实现计算器
zmk0820的博客
03-24 4579
html实现计算器
html网页计算器
03-13
一个简单的基于html和javascript的网页计算器，适合新手学习使用。
HTML网页计算器，使用css和js实现效果
最新发布
07-10
网页计算器是一种基于Web的应用程序，用户可以直接在浏览器中使用，无需下载或安装任何软件。它们可以提供从基本的算术运算到复杂的科学计算等多种功能。网页计算器通常利用HTML、CSS和JavaScript来构建。
用 js+html 实现一个网页计算器
05-31
使用js + html 实现的简单的网页计算器，可以实现加、减、乘、除复杂运算，二进制、八进制、十六进制转换、sin、cos、tan三角函数运算、acos、atan、asin反三角函数运算、开平方、log、随机数生成、指数运算、四舍五...
做一个简易计算器
永无餍足的博客
04-14 3797
在学习js之后，结合html, css, js做出一个简易计算器
html 计算器实现
12-05
基于HTML实现的简易计算器 实现加减乘除操作 与美化功能
简易计算器.html
03-30
百度2020春季实习生笔试题的最后一题——利用原生JavaScript实现一个简易计算器。在一个大的框架下按照提示补全代码：获取DOM元素、索取元素属性内容、事件目标、实现加减乘除...
HTML程序大全(1)：简易计算器
joe_g12345的博客
12-05 2755
这是一个简单的计算器，使用HTML、CSS和JavaScript实现。HTML代码创建了一个计算器的界面，CSS代码设置了计算器的样式，JavaScript代码实现了计算器的功能。这个计算器可以执行加、减、乘、除和取模运算。同时，它还支持小数点和多位数运算。
快速使用HTML、CSS、JavaScript编写一个简单计算器
bjjgff的博客
01-28 2671
首先在根目录下创建一个名为 css的目录， 在css目录下创建 main.css样式文件。在index.html 文件的 head标签中，我们要引入css样式，编写以下标签。我们在项目目录当中创建一个 名为 index.html的文件，在文件中编写以下内容。首先创建一个名为 js的目录，在js目录下创建calculartor.js文件。因为HTML结构是比较单一化的，我们需要使用CSS样式对它进行美化。在index.html文件中的 body标签下，编写以下内容。三、编写JavaScript逻辑代码。
HTML和JavaScript实现一个简单的计算器
qq_57142520的博客
08-14 1702
使用HTML和JavaScript实现一个简单的计算器。
html、css、js实现的一个简单计算器
chenym8的博客
07-14 359
主要代码来自runoob的计算器示例，只是精简了一下，把在js里监听完成的清除输入区也写成了一个函数，点击按钮的时候就自动调用了。这里面是有clear函数的，导致我写的clear函数和他发生了冲突，发现之后函数名改成fuck就可以正常清除了。（fuck是清除键）前端三剑客入门就结束啦，明天开始研究php咯。
探索计算之美：HTML & CSS 计算器案例
五指山的网络员
05-10 461
计算器案例代码，HTML+CSS
html网页制作计算器
12-23
以下是一个使用HTML、CSS和JavaScript制作的简单计算器的示例： ```html <!DOCTYPE html> <html> <head> <title>计算器</title> <style> .container { width: 200px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; } .btn { width: 40px; height: 40px; margin: 5px; font-size: 20px; text-align: center; cursor: pointer; } .btn:hover { background-color: #ccc; } </style> </head> <body> <div class="container"> <input type="text" id="result" readonly> <table> <tr> <td><button class="btn" onclick="appendNumber(7)">7</button></td> <td><button class="btn" onclick="appendNumber(8)">8</button></td> <td><button class="btn" onclick="appendNumber(9)">9</button></td> <td><button class="btn" onclick="appendOperator('+')">+</button></td> </tr> <tr> <td><button class="btn" onclick="appendNumber(4)">4</button></td> <td><button class="btn" onclick="appendNumber(5)">5</button></td> <td><button class="btn" onclick="appendNumber(6)">6</button></td> <td><button class="btn" onclick="appendOperator('-')">-</button></td> </tr> <tr> <td><button class="btn" onclick="appendNumber(1)">1</button></td> <td><button class="btn" onclick="appendNumber(2)">2</button></td> <td><button class="btn" onclick="appendNumber(3)">3</button></td> <td><button class="btn" onclick="appendOperator('*')">*</button></td> </tr> <tr> <td><button class="btn" onclick="appendNumber(0)">0</button></td> <td><button class="btn" onclick="clearResult()">C</button></td> <td><button class="btn" onclick="calculate()">=</button></td> <td><button class="btn" onclick="appendOperator('/')">/</button></td> </tr> </table> </div> <script> function appendNumber(number) { document.getElementById('result').value += number; } function appendOperator(operator) { document.getElementById('result').value += operator; } function clearResult() { document.getElementById('result').value = ''; } function calculate() { var result = eval(document.getElementById('result').value); document.getElementById('result').value = result; } </script> </body> </html> ``` 这个计算器使用了一个包含数字和运算符的表格，通过JavaScript来处理用户的输入和计算结果。用户可以点击按钮来输入数字和运算符，并且可以通过点击等号按钮来计算结果。计算结果将显示在输入框中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值