计算器

前端之家收集整理的这篇文章主要介绍了计算器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家,也给大家做个参考。

<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>jisuanqi-ren</title>
<style type="text/css">
.btn{
background-color:#4BF3A7;
height:50px;
width: 60px;
}
 
.kuang{
height: 50px;
width: 254px;
}
 
.div1{
background-color:#00FFCE;
width: 260px;
height: 400px;
}
 
.image{
float: right;
margin-right: 500px;
width:400px;
height: 400px;
 
 
}
</style>
</head>
<body>
<div id="div2">
<h1><strong><center>计算器</center></strong></h1>
<table>
<input id="change" type="text" value="" >//显示框
 
<input style="height: 50px;width: 254px; " id="tuige" type="button" value="<-" onclick="tuige()">//退格键
<tr>//下面是按钮
<td><input type="button" value="1" onclick="number(this)"></td>
<td><input type="button" value="2" onclick="number(this)"></td>
<td><input type="button" value="3" onclick="number(this)"></td>
<td><input type="button" value="C" id="qingchu" onclick="qingchu()"></td>
</tr>
 
<tr>
<td><input type="button" value="4" onclick="number(this)"></td>
<td><input type="button" value="5" onclick="number(this)"></td>
<td><input type="button" value="6" onclick="number(this)"></td>
<td><input type="button" value="=" onclick="result()"></td>
</tr>
<tr>
<td><input type="button" value="7" onclick="number(this)"></td>
<td><input type="button" value="8" onclick="number(this)"></td>
<td><input type="button" value="9" onclick="number(this)"></td>
<td><input type="button" value="0" onclick="number(this)"></td>
</tr>
 
<tr>
<td><input type="button" value="+" onclick="jisuan(this)"></td>
<td><input type="button" value="-" onclick="jisuan(this)"></td>
<td><input type="button" value="*" onclick="jisuan(this)"></td>
<td><input type="button" value="/" onclick="jisuan(this)"></td>
</tr>
 
 
</table>
</div>
 
<script >
 
//数字输入函数
function number(num){
var kuang=document.getElementById("change");
var zhengze=/\b=\b/;
var test=zhengze.exec(kuang.value)
//判断是否完成计算,计算完成即清零
if(test=="=")
{
test="";
kuang.value=""
}
kuang.value+=num.value;
}
 
//退格函数
function tuige(){
var kuang=document.getElementById("change");
kuang.value=kuang.value.substring(0,kuang.value.length-1);
}
 
//清零函数
function qingchu(){
var kuang=document.getElementById("change");
kuang.value="";
}
 
//输入计算符号
function jisuan(fuhao){
var kuang=document.getElementById("change");
fuhao1=fuhao.value;
kuang.value+=fuhao1;
}
 
//判断符号正确性,输出结果
function result(){
 
var kuang=document.getElementById("change");
 
//判断符号正确性
var zhengze2=/\d\D\d/;
var fuhao2=zhengze2.exec(kuang.value);
if (fuhao2===null) {
alert("error");
}
else{
 
var result=eval(kuang.value);
kuang.value=kuang.value+"="+result;}
}
 
 
</script>
</body>
</html>

以上是编程之家(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

原文链接:https://www.f2er.com/html/457434.html

猜你在找的HTML相关文章