如何使用html制作计算器？
不用eval代码的话用什么代码运算，%如何加入计算（例：100+20%，结果为100.2），另外CE如何使用（例：100+20，点击CE后删除20，变成100+0）
不用eval的计算器，你说的几点都实现了，处理的匆忙，可能会存在其他的BUG，你自己再调整就好
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.top {
width: 465px;
height: 60px;
margin: auto;
background-color: gray;
margin-top: 100px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.point-red {
width: 20px;
height: 20px;
background-color: red;
float: left; /*浮动，可以让其不独占一行*/
margin-left: 20px;
margin-top: 20px;
border-radius: 50%;/* 通过这个指令将正方形改为一个圆 */
}
.point-blue {
width: 20px;
height: 20px;
background-color: blue;
float: left; /*浮动，可以让其不独占一行*/
margin-left: 20px;
margin-top: 20px;
border-radius: 50%;/* 通过这个指令将正方形改为一个圆 */
}
.point-green {
width: 20px;
height: 20px;
background-color: green;
float: left; /*浮动，可以让其不独占一行*/
margin-left: 20px;
margin-top: 20px;
border-radius: 50%;/* 通过这个指令将正方形改为一个圆 */
}
#counter {
font-size: 25px;
color: white;
float: right;
line-height: 60px;
margin-right: 35px;
}
/* 设置显示结果和计算过程的部分 */
#result {
width: 451px;
height: 55px;
border: 2px solid brown;
margin: auto;
text-align: right;
font-size: 30px;
padding-right: 10px;
padding-top: 5px;
}
/* 设置按钮区域的样式 */
.button {
width: 465px;
height: 413px;
background-color: gray;
margin: auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.button div {
width: 110px;
height: 80px;
float: left;
background-color: aquamarine;
border: 1px gray solid;
margin-left: 3.3px;
text-align: center;
font-size: 25px;
line-height: 80px;
font-weight: bold;
}
/* 使用伪类，可以产生一个鼠标悬停的效果 */
.button div:hover {
background-color: bisque;
/* 鼠标放在上面有放大的效果 */
font-size: 28px;
}
</style>
</head>
<body>
<div class="top"> <!-- 这是最上面那个灰色的 -->
<div class="point-red"></div>
<div class="point-blue"></div>
<div class="point-green"></div>
<div id="counter">计算器</div>
</div>
<!-- 显示计算结果和计算过程 -->
<div id="result">0</div>
<!-- 设置按钮区域 -->
<div class="button">
<div onclick="doback1()">CE</div>
<!--清空-->
<div onclick="doclear()">C</div>
<div onclick="clickoperator('%')">%</div>
<div onclick="doback()">back</div>
<div onclick="clicknumber(1)">1</div>
<div onclick="clicknumber(2)">2</div>
<div onclick="clicknumber(3)">3</div>
<div onclick="clickoperator('+')">+</div>
<div onclick="clicknumber(4)">4</div>
<div onclick="clicknumber(5)">5</div>
<div onclick="clicknumber(6)">6</div>
<div onclick="clickoperator('-')">-</div>
<div onclick="clicknumber(7)">7</div>
<div onclick="clicknumber(8)">8</div>
<div onclick="clicknumber(9)">9</div>
<div onclick="clickoperator('x')">x</div>
<div onclick="clicknumber(0)">0</div>
<!-- 双击时，调用countertitle()这个函数 -->
<div onclick="clickpoint('.')">.</div>
<div onclick="docalc()">=</div>
<div onclick="clickoperator('÷')">÷</div>
</div>
</body>
</html>
<script type="text/javascript">
//给函数传递参数（number），用于输入哪一个数字
function clicknumber(number){
var result = document.getElementById("result");
var string = result.innerHTML;
var len = string.length;
var re=/([^\d])(\d)$/g;
var last=string.match(re);
if(result.innerHTML=='0'){
result.innerHTML=number;
}
else if(last!=null && last[0].replace(/[^\d]/g,'')==0){// && last[0].replace('/([+]|[-]|[%]|[x]|[÷])/g','')=='0'
result.innerHTML=string.substr(0,len-1)+number
}
else{
result.innerHTML += number; //这里的result是前面那个变量名，给变量名赋值为7
}
}
// 输入运算符
function clickoperator(operator){
var result = document.getElementById("result");
var string = result.innerHTML;
var len = string.length; //用len变量获取string长度
var last = string[len-1]; //last变量是字符串的最后一个字符
if(last == "+" || last =="-" || last == "x" || last == "÷" || last == "."){
//下面的代码是从string的数组下标为0开始往后获取len-1个长度，然后最后一位用新输入的那个运算符代替
var temp = string.substr(0,len-1) + operator; //substr(x,y)，x是数组开始的下标，y是往后获取y个
result.innerHTML = temp;
}
else{
result.innerHTML += operator; //如果不是字符那就正常执行
}
}
// 计算结果
function docalc(){
var result = document.getElementById("result");
var str = result.innerHTML;
str.replace(/[^\d.]*(\d+%)[^\d]*/g,function (match,param,offset,string) {
var jg=parseInt(param.replace('%',''))/100
str=str.replace(param,jg)
})
patt=/(\d+)(\.\d+)?|([+]|[-]|[%]|[x]|[÷])/g;
var new_str=str.match(patt);
if(new_str==null){
result.innerHTML =new_str;
}
else{
var new_r=0;
var pre=0;
var ysf='+';
var re=/^(\d+)(\.\d+)?$/g;
for (var i = 0; i < new_str.length; i++) {
if(!re.test(new_str[i])){
ysf=new_str[i];
}
else{
pre=new_str[i];
if(ysf=='+'){
new_r=new_r+pre;
}
else if(ysf=='-'){
new_r=new_r-pre;
}else if(ysf=='x'){
new_r=new_r*pre;
}else if(ysf=='÷'){
new_r=new_r/pre;
}else if(ysf=='%'){
new_r=new_r % pre;
}
}
}
result.innerHTML = new_r;
}
}
// 清空
function doclear(){
var result = document.getElementById("result");
result.innerHTML = "0"; //给这个结果赋空值
}
// 删除，退格,回退删除最后一个字符
// 要利用数组，在计算器中12345分别的是第01234位
function doback(){
var result = document.getElementById("result");
var len = result.innerHTML.length;//取长度，这个字符串有多少位的长度
// substr(x,y)里面有两个参数，x是从数组的第几位开始，y是往后取多少位。（0,5）意思就是从第一个开始取，一直取五个数字
result.innerHTML = result.innerHTML.substr(0,len-1);
}
function doback1(){
var result = document.getElementById("result");
var len = result.innerHTML.length;//取长度，这个字符串有多少位的长度
var re=/(\d+)%$/g;
var new_str=result.innerHTML.match(re);
// substr(x,y)里面有两个参数，x是从数组的第几位开始，y是往后取多少位。（0,5）意思就是从第一个开始取，一直取五个数字
if(new_str==null){
result.innerHTML = result.innerHTML.substr(0,len-1);
}
else{
result.innerHTML = result.innerHTML.replace(new_str[0],0)
}
}
//获取字符串最后一个字符，如果是一个运算符，你还想输入一个运算法，那就把这个运算符替换了
function getlastchar(){
var result = document.getElementById("result");
var string = result.innerHTML;
var len = string.length;
var last = string[len-1];
return last
}
// 这个函数是模仿了运算符来写的
function clickpoint(point){
var result = document.getElementById("result");
var string = result.innerHTML;
var len = string.length;
var last = string[len-1];
if(last == "."){
last = string.substr(0,len-1) + point;
result.innerHTML = last;
}
else{
result.innerHTML += point;
}
}
</script>
你想要原生HTML实现？
直接使用，美观的计算器，带详细说明
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Calculator</title>
</head>
<style>
*{ font-size:36px;}
table{
background-color: thistle;
}
#t{
width:480px;
height:80px;
text-align: right;
font-size: 48px;
background-color: white;
}
.number{
width:120px;
height:80px;
background-color:pink;
border-radius: 40%;
margin: 0;
display: block;
}
.signs{
width:120px;
height:80px;
border-radius: 40%;
background-color: rgb(235, 199, 235);
margin: 0;
display: block;
}
.shaw{
width:120px;
height:80px;
border-radius: 40%;
background-color: rgb(235, 199, 235);
margin: 0;
display: block;
}
.equal{
width:120px;
height:80px;
border-radius: 40%;
background-color: rgb(235, 199, 235);
margin: 0;
display: block;
}
.kuohao{
width: 60px;
height: 80px;
float: left;
align-self: 0;
border-radius: 40%;
background-color: rgb(235, 199, 235);
}
table td,table th{
border: none ;
}
</style>
<script>
//设置标志，用于没有输入时显示0，以及有显示时清空
var flag=true;
function func(str){
var t=document.getElementById("t");
if(flag){
//清除没有输入时的0
t.value="";
}
//改变状态，不再清空内容
flag=false;
//将之前的内容和输入的内容相加，重新显示
t.value=t.value+str;
}
//回退一个数，相当于撤销
function backspace(){
var t=document.getElementById("t");
t.value=t.value.substr(0,t.value.length-1);
}
//清空显示内容
function AC(){
var t=document.getElementById("t");
//显示0
t.value="0";
//让下次输入可以清空0
flag=true;
}
//计算结果
function equals(){
var t=document.getElementById("t");
//将字符串转换为逻辑运算
t.value=eval(t.value);
}
</script>
<body>
<!-- 内边距 外边距 边框 居中-->
<table cellpadding="0" cellspacing="0" border="2px" align="center" >
<tr>
<td colspan="4">
<input type="text" value="0" id="t" />
</td>
</tr>
<tr>
<td><input type="button" class="number" value="7" onClick="func('7')"/></td>
<td><input type="button" class="number" value="8" onClick="func('8')"/></td>
<td><input type="button" class="number" value="9" onClick="func('9')"/></td>
<td><input type="button" class="signs" value="/" onClick="func('/')"/></td>
</tr>
<tr>
<td><input type="button" class="number" value="4" onClick="func('4')"/></td>
<td><input type="button" class="number" value="5" onClick="func('5')"/></td>
<td><input type="button" class="number" value="6" onClick="func('6')"/></td>
<td><input type="button" class="signs" value="*" onClick="func('*')"/></td>
</tr>
<tr>
<td><input type="button" class="number" value="1" onClick="func('1')"/></td>
<td><input type="button" class="number" value="2" onClick="func('2')"/></td>
<td><input type="button" class="number" value="3" onClick="func('3')"/></td>
<td><input type="button" class="signs" value="-" onClick="func('-')"/></td>
</tr>
<tr>
<td><input type="button" class="number" value="0" onClick="func('0')"/></td>
<td><input type="button" class="shaw" value="." onClick="func('.')"/></td>
<td><input type="button" class="number" value="00" onClick="func('00')"/></td>
<td><input type="button" class="signs" value="+" onClick="func('+')"/></td>
</tr>
<tr>
<td>
<input type="button" class="kuohao" value="(" onClick="func('(')"/>
<input type="button" class="kuohao" value=")" onClick="func(')')"/>
</td>
<td><input type="button" class="shaw" value="后退" style="float:top" onClick="backspace()"/></td>
<td>
<input type="button" class="shaw" value="清除" onClick="AC()"/>
</td>
<td rowspan="2"><input type="button" value="=" class="equal" onClick="equals()"/></td>
</tr>
</table>
</body>
</html>