原生JavaScript写的简单的计算器

最新推荐文章于 2023-12-01 19:30:20 发布

张枫大师哥

最新推荐文章于 2023-12-01 19:30:20 发布

阅读量202

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_25698271/article/details/90040877

版权

JavaScript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

我就不废话了，预览地址http://jsq.nxn.ink/
代码在下面。

<!DOCTYPE html>
<html>
 <head> 
 <meta content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>简单的计算器</title> 
  
  <style>
 	input[type=button]{
			border-radius: 5px;
			width: 55px;
			height: 30px;
			margin: 2px;
			font-size: 20px;
			}
  </style>
 </head> 
 <body> 
<script>
//把数字的字赋给输入框的value,
 function calCulate(val){
var t=document.getElementById("t").value;//先得到当前输入框的value值,
document.getElementById("t").value=t+val;//然后拼接字符串,把以前的制和现在的拼接起来
document.getElementById("sDiv").innerHTML=t+val;//把上一步计算写入页面,显示在输入框的上面
}
//把空字符串赋给输入框的值value,相当于清空输入框的value,上一步计算清空也是这样
function c(){
document.getElementById("t").value="";
document.getElementById("sDiv").innerHTML="";
}
//结果计算等于,用的eval()函数，计算字符串参考链接http://www.w3school.com.cn/js/jsref_eval.asp
function d(val){
var t=document.getElementById("t").value;
document.getElementById("t").value=eval(t);
document.getElementById("sDiv").innerHTML=t+val+eval(t);
}
//加法计算的方法也是用了eval（）函数
function jia(val){
var t=document.getElementById("t").value;
if(t.indexOf("+") == -1&&t.indexOf("-") == -1&&t.indexOf("*") == -1&&t.indexOf("/") == -1){//防止多输两个计算符号，看前面是否有没有没计算的,只能进行一步计算，str.indexOf（"xx"）== -1，返回字符串第一次出现的位置，没有出现返回-1，以此判断。
	document.getElementById("t").value=t+val;
document.getElementById("sDiv").innerHTML=t+val;
}else{
document.getElementById("t").value=eval(t)+"+";
document.getElementById("sDiv").innerHTML=t+"+";
}


}
//减法
function jian(val){
var t=document.getElementById("t").value;
if(t.indexOf("+") == -1&&t.indexOf("-") == -1&&t.indexOf("*") == -1&&t.indexOf("/") == -1){
	document.getElementById("t").value=t+val;
document.getElementById("sDiv").innerHTML=t+val;
}else{
document.getElementById("t").value=eval(t)+"-";
document.getElementById("sDiv").innerHTML=t+"-";
}


}
//乘法
function cheng(val){
var t=document.getElementById("t").value;
if(t.indexOf("+") == -1&&t.indexOf("-") == -1&&t.indexOf("*") == -1&&t.indexOf("/") == -1){
	document.getElementById("t").value=t+val;
document.getElementById("sDiv").innerHTML=t+val;
}else{
document.getElementById("t").value=eval(t)+"*";
document.getElementById("sDiv").innerHTML=t+"*";
}


}
//除法
function chu(val){
var t=document.getElementById("t").value;
if(t.indexOf("+") == -1&&t.indexOf("-") == -1&&t.indexOf("*") == -1&&t.indexOf("/") == -1){
	document.getElementById("t").value=t+val;
document.getElementById("sDiv").innerHTML=t+val;
}else{
document.getElementById("t").value=eval(t)+"/";
document.getElementById("sDiv").innerHTML=t+"/";
}


}
  </script> 
  <div style="text-align:center ; margin-top:200px">
 
        <p>简单的计算器</p>
 
		<input type="text" name="" id="t" value="" readonly="readonly" style="width:235px;height:30px;border-radius: 5px;margin: 2px;" /><br/>
		<input type="button" name="" id="" value="1" onclick="calCulate(this.value)"/>
		<input type="button" name="" id="" value="2" onclick="calCulate(this.value)"/>
		<input type="button" name="" id="" value="3" onclick="calCulate(this.value)"/>
		
		<input type="button" name="" id="" value="+" onclick="jia(this.value)" style="color:red" />
		<br/>
		<input type="button" name="" id="" value="4" onclick="calCulate(this.value)"/>
		<input type="button" name="" id="" value="5" onclick="calCulate(this.value)"/>
		<input type="button" name="" id="" value="6" onclick="calCulate(this.value)"/>
		
		<input type="button" name="" id="" value="-" onclick="jian(this.value)" style="color:red" />
		<br/>
		<input type="button" name="" id="" value="7" onclick="calCulate(this.value)"/>
		<input type="button" name="" id="" value="8" onclick="calCulate(this.value)"/>
		<input type="button" name="" id="" value="9" onclick="calCulate(this.value)"/>
		
		<input type="button" name="" id="" value="*" onclick="cheng(this.value)" style="color:red" />
		<br/>
		<input type="button" name="" id="" value="." onclick="calCulate(this.value)"/>
		<input type="button" name="" id="" value="0" onclick="calCulate(this.value)"/>
		<input type="button" name="" id="" value="C" onclick="c()" style="color:red" />

		<input type="button" name="" id="" value="/" onclick="chu(this.value)" style="color:red" />
		<br/>
		<input type="button" name="" id="" value="=" onclick="d(this.value)" style="width:246px;color:red" />
		
		<br/>
		<p id="sDiv"></p>
		
  </div>
  
 </body>
</html>

张枫大师哥

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生JavaScript写的简单的计算器

我就不废话了，预览地址http://jsq.nxn.ink/代码在下面。<!DOCTYPE html><html> <head> <meta content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0...
复制链接

扫一扫