方法一：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>最 简单计算器 路口师傅</title>
<style>
table,tr,td{border:1px solid blue;
}
#ok,.td,#clear,#last{text-align:center;
}
</style>
</head>
<body><table><tr><td colspan="5" id="show">0</td></tr><tr><td class="td" id="zero">0</td><td class="td">.</td><td id="last"><</td><td id="clear" colspan="2">c</td></tr><tr><td class="td">1</td><td class="td">2</td><td class="td">3</td><td class="td">+</td><td class="td">-</td></tr><tr><td class="td">4</td><td class="td">5</td><td class="td">6</td><td class="td">*</td><td class="td">/</td></tr><tr><td class="td">7</td><td class="td">8</td><td class="td">9</td><td id="ok" colspan="2">=</td></tr></table>
</body>
</html><script>
var oTd = document.getElementsByClassName("td");
var oK = document.getElementById("ok");
var oShow = document.getElementById("show");
var oClear = document.getElementById("clear");
var run = '';//全局变量 公式oK.onclick=function(){if(run!==""){oShow.innerHTML = eval(run);}if(oShow.innerHTML!=="0"){run = show.innerHTML;}
}oClear.onclick=function(){run = '';show.innerHTML = '0';
}for(var i = 0;i<=oTd.length;i++){oTd[i].index = i;oTd[i].onclick=function(){//alert(oTd[this.index].innerHTML)run += oTd[this.index].innerHTML;oShow.innerHTML = run;};
}
</script>

方法二：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<style>
*{padding:0;margin:1px;}#calculater{margin: auto;margin-top: 30px;border: solid 6px #2371D3;border-spacing: 0px;}#display{width: 100%;height: 30px;border-bottom: solid 4px #2371D3;font-weight: bold;color: #193D83;font-family: 黑体;padding-left: 2px;}.numberkey{cursor: pointer;width: 40px;height: 30px;border: solid 1px #FFFFFF;background: #2371D3;color: #ffffff;text-align: center;font-weight: bold;font-family: 黑体;}#equality{cursor: pointer;width: 40px; height: 100%;background: #2371D3;border: solid 1px #FFFFFF;color: #ffffff;text-align: center;font-weight: bold;font-family: 黑体; }.numberkey:hover{background: #EA6F30; }#equality:hover{background: #EA6F30; }</style<>
</head>
<body>
<table id="calculater" onClick="calculater()"><tr><td id="display" colspan="5">0</td></tr><tr><td class="numberkey" >1</td><td class="numberkey" >2</td><td class="numberkey" >3</td><td class="numberkey" >+</td><td class="numberkey"  id="deletesign">c</td>   </tr><tr><td class="numberkey" >4</td><td class="numberkey" >5</td><td class="numberkey" >6</td><td class="numberkey" >-</td><td rowspan="3" id="equality" onclick="resultscalcaulte()">=</td> </tr><tr><td class="numberkey" >7</td><td class="numberkey" >8</td><td class="numberkey" >7</td><td class="numberkey" >*</td></tr><tr ><td class="numberkey" >+/-</td><td class="numberkey" >0</td><td class="numberkey" >.</td><td class="numberkey" >/</td>            </tr>
</body>
</html>
<script>
var results="";var calresults="";function calculater(){if (event.srcElement.innerText=="=") {return;}results+=event.srcElement.innerText;display.innerText=results;}function resultscalcaulte(){calresults=eval(results);display.innerText=calresults;}
</script>

方法三：

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<style>
html, body {height: 100%;width: 100%;background-color: #56351E;
}
h1 {margin-top: 10px;color: #ffffff;
}
button {height: 50px;border: none;
}
.calculator {text-align: center;width: 300px;height: 420px;border-radius: 10px;margin: auto;position: absolute;top: 0; left: 0; right: 0; bottom: 0;background-color: #000020;padding: 5px;
}
.buttons {width: 275px;text-align: center;margin:10px auto;
}
.button{float: left;margin: 2px;width: 64.75px;color: #ffffff;background: #000020;cursor: pointer;
}
.textbox {margin-top: 10px;text-align: right;font-size:100pxborder: none;height: 50px;width: 270px;color: #ffffff;background-color: #000030;
}
</style>
<div class="calculator"><h1>计算器</h1><input type="textbox" class="textbox" readonly><div class="buttons"><button class="button" value="AC">C</button><button class="button" value="CE"><i class="fa fa-long-arrow-left"></i></button><button class="button" value="%">%</button><button class="button" value="/">&divide</button><button class="button" value="7">7</button><button class="button" value="8">8</button><button class="button" value="9">9</button><button class="button" value="*">&times</button><button class="button" value="4">4</button><button class="button" value="5">5</button><button class="button" value="6">6</button><button class="button" value="-">-</button><button class="button" value="1">1</button><button class="button" value="2">2</button><button class="button" value="3">3</button><button class="button" value="+">+</button><button class="button" value="()">()</button><button class="button" value="0">0</button><button class="button" value=".">.</button><button class="button" value="=">=</button></div>
</div><script>
var ans = "";
var clear = false;
var calc = "";//初始化数据
$(document).ready(function() {$("button").click(function() {var text = $(this).attr("value");//点击按钮事件发生文本内容为按钮值//如果输入为1-10和加减乘除余if(parseInt(text, 10) == text || text === "." || text === "/" || text === "*" || text === "-" || text === "+" || text === "%") {//不为空时if(clear === false) {calc += text;$(".textbox").val(calc);}//为空时else {calc = text;$(".textbox").val(calc);clear = false;}} //按下清除键的时候else if(text === "AC") {calc = "";$(".textbox").val("");//输出空值         } //按下回退键时，数组calc保留除最后一个字符外的字符，生成新的字符串else if(text === "CE") {calc = calc.slice(0, -1);$(".textbox").val(calc);}//按下等号时用eval()函数计算字符串else if(text === "=") {ans = eval(calc);$(".textbox").val(ans);clear = true;}});
});
</script>

方法四：

<styel>
/* Basic Reset */
* {border: none;font-family: 'Open Sans', sans-serif;margin: 0;padding: 0;
}
body {}
.center {background-color: #fff;border-radius: 50%;height: 600px;margin: auto;width: 600px;
}
h1 {color: #495678;font-size: 30px; margin-top: 20px;padding-top: 50px;display: block;text-align: center;text-decoration: none;
}
a {color: #495678;font-size: 30px;  display: block;text-align: center;text-decoration: none;padding-top: 20px;
}
form {background-color: #495678;box-shadow: 4px 4px #3d4a65;margin: 40px auto;padding: 40px 0 30px 40px;    width: 280px;
}
.btn {outline: none;cursor: pointer;font-size: 20px;height: 45px;margin: 5px 0 5px 10px;width: 45px;
}
.btn:first-child {margin: 5px 0 5px 10px;
}
.btn, #display, form {border-radius: 25px;
}
#display {outline: none;background-color: #98d1dc;box-shadow: inset 6px 6px 0px #3facc0;color: #dededc;font-size: 20px;height: 47px;text-align: right;width: 165px;padding-right: 10px;margin-left: 10px;
}
.number {background-color: #72778b;box-shadow: 0 5px #5f6680;color: #dededc;
}
.number:active {box-shadow: 0 2px #5f6680;-webkit-transform: translateY(2px);-ms-transform: translateY(2px);-moz-tranform: translateY(2px);transform: translateY(2px);
}
.operator {background-color: #dededc;box-shadow: 0 5px #bebebe;color: #72778b;
}
.operator:active {box-shadow: 0 2px #bebebe;-webkit-transform: translateY(2px);-ms-transform: translateY(2px);-moz-tranform: translateY(2px);transform: translateY(2px);
}
.other {background-color: #e3844c;box-shadow: 0 5px #e76a3d;color: #dededc;
}
.other:active {box-shadow: 0 2px #e76a3d;-webkit-transform: translateY(2px);-ms-transform: translateY(2px);-moz-tranform: translateY(2px);transform: translateY(2px);
}
</style>
<div class="center"><h1>HTML CSS, JavaScript 计算器</h1><a href="https://github.com/guuibayer/simple-calculator" target="_blank"><i class="fa fa-github"></i></a><form name="calculator"><input type="button" id="clear" class="btn other" value="C"><input type="text" id="display"><br><input type="button" class="btn number" value="7" onclick="get(this.value);"><input type="button" class="btn number" value="8" onclick="get(this.value);"><input type="button" class="btn number" value="9" onclick="get(this.value);"><input type="button" class="btn operator" value="+" onclick="get(this.value);"><br><input type="button" class="btn number" value="4" onclick="get(this.value);"><input type="button" class="btn number" value="5" onclick="get(this.value);"><input type="button" class="btn number" value="6" onclick="get(this.value);"><input type="button" class="btn operator" value="*" onclick="get(this.value);"><br><input type="button" class="btn number" value="1" onclick="get(this.value);"><input type="button" class="btn number" value="2" onclick="get(this.value);"><input type="button" class="btn number" value="3" onclick="get(this.value);"><input type="button" class="btn operator" value="-" onclick="get(this.value);"><br><input type="button" class="btn number" value="0" onclick="get(this.value);"><input type="button" class="btn operator" value="." onclick="get(this.value);"><input type="button" class="btn operator" value="/" onclick="get(this.value);">         <input type="button" class="btn other" value="=" onclick="calculates();"></form></div><script>
/* limpa o display */
document.getElementById("clear").addEventListener("click", function() {document.getElementById("display").value = "";
});
/* recebe os valores */
function get(value) {document.getElementById("display").value += value;
} /* calcula */
function calculates() {var result = 0;result = document.getElementById("display").value;document.getElementById("display").value = "";document.getElementById("display").value = eval(result);
};
</script>

方法五：

<style>
#main{border: 10px outset orange;margin: 30px auto;background: #ABABAB;box-shadow: 5px 5px #CCCCCC inset;padding-top: 20px;
}/*设置最外层表格样式*/
th{height: 40px;border: 2px outset #CCCCCC;
}
#result{width: 100%;height: 100%;box-shadow: 3px 3px #CCCCCC inset;text-align: right;font-size: 20px;
}
[type=button]{width: 60px;height: 40px;box-shadow: 3px 3px #CCCCCC,3px 3px #CCCCCC inset;background-image:linear-gradient(to top right,#000,#fff);/*设置按钮渐变色*/color: #00FFFF;font-weight: bold;margin: 5px;border-radius: 10px/6px;
}/*设置所有butto的样式*/
#table1,#table2,#table3{margin-top: 20px;border: 2px outset #CCCCCC;
}
[type=button]:hover{background-image:linear-gradient(to top right,#fff,#000);
}
#time{margin: 0;padding: 0;color:#00FFFF;
}
</style>
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>计算器</title><link rel="stylesheet" type="text/css" href="计算器.css"/><script src="计算器.js"  type="text/javascript" charset="utf-8"></script></head><body><table border="0" cellspacing="0" cellpadding="" id='main'><tr><th id='time'></th><th ><input type="text" name="" id="result" value="0" /></th><th><input type="button" name="" id="" value="清零"  onclick="clean()"/><input type="button" name="" id="" value="退格"  onclick='backspace()'/></th></tr><tr><td><table id="table1"><tr><td><input type="button" name="" id="" value="sin"  onclick="calc1('sin')"/></td><td><input type="button" name="" id="" value="cos"  onclick="calc1('cos')"/></td><td><input type="button" name="" id="" value="tan"  onclick="calc1('tan')"/></td></tr><tr><td><input type="button" name="" id="" value="asin"  onclick="calc1('asin')"/></td><td><input type="button" name="" id="" value="acos"  onclick="calc1('acos')"/></td><td><input type="button" name="" id="" value="atan"  onclick="calc1('atan')"/></td></tr><tr><td><input type="button" name="" id="" value="PI"  onclick="calc1('PI')"/></td><td><input type="button" name="" id="" value="1/X"  onclick="calc1('1/x')"/></td><td><input type="button" name="" id="" value="exp"  onclick="calc1('exp')"/></td></tr><tr><td><input type="button" name="" id="" value="Inx"  onclick="calc1('Inx')"/></td><td><input type="button" name="" id="" value="lgx"  onclick="calc1('lgx')"/></td><td><input type="button" name="" id="" value="n!"  onclick="calc1('n!')"/></td></tr></table></td><td><table id="table2"><tr><td><input type="button" name="" id="" value="7"  onclick="num(7)"/></td><td><input type="button" name="" id="" value="8"  onclick="num(8)"/></td><td><input type="button" name="" id="" value="9"  onclick="num(9)"/></td></tr><tr><td><input type="button" name="" id="" value="4"  onclick="num(4)"/></td><td><input type="button" name="" id="" value="5"  onclick="num(5)"/></td><td><input type="button" name="" id="" value="6"  onclick="num(6)"/></td></tr><tr><td><input type="button" name="" id="" value="1"  onclick="num(1)"/></td><td><input type="button" name="" id="" value="2"  onclick="num(2)"/></td><td><input type="button" name="" id="" value="3"  onclick="num(3)"/></td></tr><tr><td><input type="button" name="" id="" value="0"  onclick="num(0)"/></td><td><input type="button" name="" id="" value="."  onclick="dian()"/></td><td><input type="button" name="" id="" value="="  onclick="calc('=')"/></td></tr></table>            </td><td><table id="table3"><tr><td><input type="button" name="" id="" value="+"  onclick="calc('+')"/></td><td><input type="button" name="" id="" value="取整"  onclick="calc('取整')"/></td></tr><tr><td><input type="button" name="" id="" value="-"  onclick="calc('-')"/></td><td><input type="button" name="" id="" value="取余"  onclick="calc('%')"/></td></tr><tr><td><input type="button" name="" id="" value="*"  onclick="calc('*')"/></td><td><input type="button" name="" id="" value="x^y"  onclick="calc('x^y')"/></td></tr><tr><td><input type="button" name="" id="" value="/"  onclick="calc('/')"/></td><td><input type="button" name="" id="" value="+/-"  onclick="calc('+/-')"/></td></tr></table></td></tr></table></body>
</html><script>
var sum=0;
var Boo=false;//判断是否按下计算符号
var ope;//存储计算符号的变量
//获取数字
function num(Num) {var result=document.getElementById('result');if (Boo) {result.value=Num;Boo=false;//若接受过运算符，文本框清零}else{if (result.value=='0') {result.value=Num;} else{result.value+=Num;}}
}
//避免出现两个小数点
function dian () {var result=document.getElementById('result');if (result.value.indexOf('.')==-1) {result.value+='.';}
}
//清零，重新加载页面
function clean() {location.replace(location)
}
//退格
function backspace() {var result=document.getElementById('result');result.value=result.value.substring(0,result.value.length-1);if (result.value=='') {result.value=0;}
}
function calc(op){var result=document.getElementById('result').value*1;if (result=='') {result=0;}Boo=true;switch (ope){case '+':sum=sum+result;break;case '-':sum=sum-result;break;case '*':sum=sum*result;break;case '/':sum=sum/result;break;case '取整':sum=Math.floor(sum/result);break;case '%':sum=sum%result;break;case 'x^y':sum=Math.pow(sum,result);break;case '+/-':sum=result*(-1);            break;case '=':document.getElementById('result').value=sum;break;default:sum=parseFloat(result);break;}document.getElementById('result').value=sum;ope=op;
}
function calc1(op){var result=document.getElementById('result').value*1;var  π=Math.PI*2/360;//角度转换成弧度var deg=360/(Math.PI*2);//弧度转换成角度if (result=='') {result=0;}Boo=true;switch (op){case 'sin':sum=Math.round(Math.sin(result* π)*100000000000000)/100000000000000;    //sum=Math.sin(result* π);Math.round()解决浮点数运算问题                                                         break;                                                                    //程序处理浮点数的时候，每一次运算都会取一次近似值，所以最终的结果，总是近似值，而不是我们通过代数得出的结果。case 'cos':sum=Math.round(Math.cos(result* π)*100000000000000)/100000000000000;                break;case 'tan':sum=Math.round(Math.tan(result* π)*100000000000000)/100000000000000;        break;case 'asin':sum=Math.round(Math.asin(result)*deg*100000000000000)/100000000000000+'°';            break;case 'acos':sum=Math.round(Math.acos(result)*deg*100000000000000)/100000000000000+'°';        break;case 'atan':sum=Math.round(Math.atan(result)*deg*100000000000000)/100000000000000+'°';    break;case 'PI':sum=Math.PI;            break;case '1/x':sum=1/parseFloat(result);            break;case 'exp':sum=Math.exp(result);break;case 'Inx':sum=Math.log(result);break;case 'lgx':sum=Math.log10(result);break;case 'n!':for (var i=1;i<result;i++) {sum=sum*i;}break;default:sum=parseFloat(result);break;    }document.getElementById('result').value=sum;
}
//设置时间
window.onload=function(){showTime();
}
function showTime(){var today=new Date();var y=today.getFullYear();var M=today.getMonth()+1;var d=today.getDate();var h=today.getHours();var m=today.getMinutes();var s=today.getSeconds();m=checkTime(m);s=checkTime(s);var week=today.getDay();var w=new Array('星期天','星期一','星期二','星期三','星期四','星期五','星期六');for (var i=0;i<w.length;i++) {document.getElementById('time').innerHTML=y+'年'+M+'月'+d+'日'+'</br>'+h+":"+m+":"+s+'    '+w[week];}    setTimeout('showTime()',500);
}
//数字小于10时，前面添加一个0
function checkTime(i){if (i<10) {i="0" + i;}return i
}
</script>

实现 JavaScript 计算器的多种方案相关推荐

绩效工资分配的多种方案
绩效工资分配的多种方案根据公司现实情况和公司发展需要,公司的绩效工资分配可采用以下多种方式分配: 1 方案一: 仅对员工个人既定绩效工资额度进行考核和分配. 如果公司无法按经营效益或其它科学方法核定 ...
R语言对dataframe进行行数据筛选（row selection）多种方案：使用R原生方法、data.table、dplyr等方案
R语言对dataframe进行行数据筛选(row selection)多种方案:使用R原生方法.data.table.dplyr等方案目录
MAC 安装brew raw.githubusercontent.com port 443: Connection refused 本人亲自认证过，踩过多种方案，最终认证的解决方案
MAC 安装brew raw.githubusercontent.com port 443: Connection refused 本人亲自认证过,踩过多种方案,最终认证的解决方案原因:由于某些你懂 ...
文件服务器迁移多种方案
案例需求: 某公司有一台WinSrv2003域成员服务器作为文件服务器,上面共享了若干文件夹,并对不同的group及user设置了权限.现在客户决定购买新的服务器替换之前旧的服务器,面临着一个问题: ...
Android 开发之多种方案PDF阅读
Android 开发之多种方案PDF阅读最近开发中涉及到阅读港股公告,但是HK股票的公告都是坑,居然是pdf的,所以没办法,就要研究安卓pdf阅读,期间踩了点坑-- 安卓的webview与ios 的 ...
android 漫画加载方案,Android加载长图的多种方案分享
背景介绍在某些特定场景下,我们需要考虑加载长图的需求,比如加载一幅<清明上河图>,这个好像有点过分了,那就加载1/2的<清明上河图>吧... 那TMD还不是一样道理. 言归正 ...
【两个数交换】实现a与b的互换的多种方案
本次需求:请尝试编写多种方案,实现a与b的互换 (以int类型数据举例,五种解题思路,更多方法大家自行发散) 方法一:利用第三方赋值的办法直接上代码: public class ChangeTest ...
springBoot 启动指定配置文件环境多种方案
springBoot 启动指定配置文件环境理论上是有多种方案的,一般都是结合我们的实际业务选择不同的方案,比如,有pom.xml文件指定.maven命令行指定.配置文件指定.启动jar包时指定等方案, ...
计算器html js php代码,JavaScript计算器网页版实现代码分享
JavaScript网页计算器代码,该计算器是用DW写的! HTML篇计算器 > C ← ± + 7 8 9 - 4 5 6 × 1 2 3 ÷ 0 ▪ ＝ CSS篇 @charset &qu ...

实现 JavaScript 计算器的多种方案

方法一：

方法二：

方法三：

方法四：

方法五：

实现 JavaScript 计算器的多种方案相关推荐

最新文章

热门文章