web的js写计算器_JAVA web中怎样调用系统的计算器

① 如何用JS创建一个简单的网页计算器

<!doctypehtml>
<html>
<head>
<title>计算器</title>
<metacharset="utf-8"/>
<styletype="text/css">
.panel{
	border:4pxsolid#ddd;
	width:192px;
	margin:100pxauto;
}
.panelp,.panelinput{
	font-family:"微软雅黑";
	font-size:20px;
	margin:4px;
	float:left;
}
.panelp{
	width:122px;
	height:26px;
	border:1pxsolid#ddd;
	padding:6px;
	overflow:hidden;
}
.panelinput{
	width:40px;
	height:40px;
	border:1pxsolid#ddd;
}
</style>
<scripttype="text/javascript">
//参数e用来接收传入的event对象
	functioncal(e){
	//1.获取事件源，处理button的事件
	varobj=e.srcElement||e.target;
	if(obj.nodeName!="INPUT"){
		return;
	}
	
	varvalue=obj.value;
	varp=document.getElementById("screen");
	if(value=="C"){
	//2.如果是[C]，则清空p
	p.innerText="";
	}elseif(value=="="){
	//3.如果是[=]，则运算
	varexp=p.innerText;
	try{
	varresult=eval("("+exp+")");
	//如果正确执行，将结果写入p
	p.innerText=result;
	}catch(e){
		//发生错误，给予错误提示
		p.innerText="Error.";
	}
	}else{
	//4.如果是其它按钮，则将value追加到p中
	p.innerText+=value;
	
	}
	}
</script>
</head>
<body>
<!--在最外层的div上注册单击事件，传入event对象，然后在函数中通过event判断出事件来源于哪一个button，
进而做出应有的处理。这样的好处是，避免在button上大量的注册事件。-->
<divclass="panel"onClick="cal(event);">
<div>
<pid="screen"></p>
<inputtype="button"value="C">
<divstyle="clear:both"></div>
</div>
<div>
<inputtype="button"value="7">
<inputtype="button"value="8">
<inputtype="button"value="9">
<inputtype="button"value="/">
<inputtype="button"value="4">
<inputtype="button"value="5">
<inputtype="button"value="6">
<inputtype="button"value="*">
<inputtype="button"value="1">
<inputtype="button"value="2">
<inputtype="button"value="3">
<inputtype="button"value="-">
<inputtype="button"value="0">
<inputtype="button"value=".">
<inputtype="button"value="=">
<inputtype="button"value="+">
<divstyle="clear:both"></div>
</div>
</body>
</html>

这是我自学时候写的计算器

② 用JavaScript做个网页版的计算器

哎呀！这个简单！！我给你啦！！！下面就是用Jscript写的计算器了复制后保存一切就OK的啦！！！！！！！！！

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">


<title>科学计算器</title>
<style>

</style>
<script language="javascript">

</script>
</head>


<body>
<div align="center">
<form name=calc>
<table border="1" width="500" height="250">
<tr>
<td height=50>
<table width=500>
<td>
<img src="../img/cp_logo.gif">
</td>
<td>
<div align=center>
<input type=text name="display" value="0" readonly size="40">
</div>
</td>
</table>
</td>
</tr>
<tr>
<td>
<table width=500>
<tr>
<td width=290>
<input type=radio name="carry" onClick="inputChangCarry(16)">
十六进制
<input type=radio name="carry" checked onClick="inputChangCarry(10)">
十进制
<input type=radio name="carry" onClick="inputChangCarry(8)">
八进制
<input type=radio name="carry" onClick="inputChangCarry(2)">
二进制
</td>
<td>
</td>
<td width=135>
<input type=radio name="angle" value="d" onClick="inputChangAngle('d')" checked>
角度制
<input type=radio name="angle" value="r" onClick="inputChangAngle('r')">
弧度制
</td>
</tr>
</table>
<table width=500>
<tr>
<td width=170>
<input name="shiftf" type="checkbox" onclick="inputshift()">上档功能
<input name="hypf" type="checkbox" onclick="inputshift()">双曲函数
</td>
<td>
<input name="bracket" value="" type=text size=3 readonly style="background-color=lightgrey">
<input name="memory" value="" type=text size=3 readonly style="background-color=lightgrey">
<input name="operator" value="" type=text size=3 readonly style="background-color=lightgrey">
</td>
<td width=183>
<input type="button" value=" 退格 "
onclick="backspace()" style="color=red">
<input type="button" value=" 清屏 "
onClick="document.calc.display.value = 0 " style="color=red">
<input type="button" value=" 全清"
onClick="clearall()" style="color=red">
</td>
</tr>
</table>

<table width=500>
<tr>
<td>
<table>
<tr align=center>
<td>
<input name=pi type="button" value=" PI "
onClick="inputfunction('pi','pi')" style="color=blue">
</td>

<td>
<input name=e type="button" value=" E "
onClick="inputfunction('e','e')" style="color=blue">
</td>

<td>
<input name=bt type="button" value="d.ms"
onClick="inputfunction('dms','deg')" style="color=#ff00ff">
</td>
</tr>
<tr align=center>
<td>
<input type="button" value=" ( "
onClick="addbracket()" style="color=#ff00ff">
</td>

<td>
<input type="button" value=" ) "
onClick="disbracket()" style="color=#ff00ff">
</td>

<td>
<input name=ln type="button" value=" ln "
onClick="inputfunction('ln','exp')" style="color=#ff00ff">
</td>
</tr>
<tr align=center>
<td>
<input name=sin type="button" value="sin "
onClick="inputtrig('sin','arcsin','hypsin','ahypsin')" style="color=#ff00ff">
</td>

<td>
<input type="button" value="x^y "
onClick="operation('^',7)" style="color=#ff00ff">
</td>

<td>
<input name=log type="button" value="log "
onClick="inputfunction('log','expdec')" style="color=#ff00ff">
</td>
</tr>
<tr align=center>
<td>
<input name=cos type="button" value="cos "
onClick="inputtrig('cos','arccos','hypcos','ahypcos')" style="color=#ff00ff">
</td>

<td>
<input name=cube type="button" value="x^3 "
onClick="inputfunction('cube','cubt')" style="color=#ff00ff">
</td>

<td>
<input type="button" value=" n! "
onClick="inputfunction('!','!')" style="color=#ff00ff">
</td>
</tr>
<tr align=center>
<td>
<input name=tan type="button" value="tan "
onClick="inputtrig('tan','arctan','hyptan','ahyptan')" style="color=#ff00ff">
</td>

<td>
<input name=sqr type="button" value="x^2 "
onClick="inputfunction('sqr','sqrt')" style="color=#ff00ff">
</td>

<td>
<input type="button" value="1/x "
onClick="inputfunction('recip','recip')" style="color=#ff00ff">
</td>
</tr>
</table>
</td>
<td width=30>
</td>
<td>
<table>
<tr>
<td>
<input type="button" value=" 储存 "
onClick="putmemory()" style="color=red">
</td>
</tr>
<td>
<input type="button" value=" 取存 "
onClick="getmemory()" style="color=red">
</td>
</tr>
<tr>
<td>
<input type="button" value=" 累存 "
onClick="addmemory()" style="color=red">
</td>
</tr>
<tr>
<td>
<input type="button" value=" 积存 "
onClick="multimemory()" style="color=red">
</td>
</tr>
<tr>
<td height="33">
<input type="button" value=" 清存 "
onClick="clearmemory()" style="color=red">
</td>
</tr>
</table>
</td>
<td width=30>
</td>
<td>
<table>
<tr align=center>
<td>
<input name=k7 type="button" value=" 7 "
onClick="inputkey('7')" style="color=blue">
</td>

<td>
<input name=k8 type="button" value=" 8 "
onClick="inputkey('8')" style="color=blue">
</td>

<td>
<input name=k9 type="button" value=" 9 "
onClick="inputkey('9')" style="color=blue">
</td>

<td>
<input type="button" value=" / "
onClick="operation('/',6)" style="color=red">
</td>

<td>
<input type="button" value="取余"
onClick="operation('%',6)" style="color=red">
</td>

<td>
<input type="button" value=" 与 "
onClick="operation('&',3)" style="color=red">
</td>
</tr>

<tr align=center>
<td>
<input name=k4 type="button" value=" 4 "
onClick="inputkey('4')" style="color=blue">
</td>

<td>
<input name=k5 type="button" value=" 5 "
onClick="inputkey('5')" style="color=blue">
</td>

<td>
<input name=k6 type="button" value=" 6 "
onClick="inputkey('6')" style="color=blue">
</td>

<td>
<input type="button" value=" * "
onClick="operation('*',6)" style="color=red">
</td>

<td>
<input name=floor type="button" value="取整"
onClick="inputfunction('floor','deci')" style="color=red">
</td>

<td>
<input type="button" value=" 或 "
onClick="operation('|',1)" style="color=red">
</td>
</tr>

<tr align=center>
<td>
<input type="button" value=" 1 "
onClick="inputkey('1')" style="color=blue">
</td>

<td>
<input name=k2 type="button" value=" 2 "
onClick="inputkey('2')" style="color=blue">
</td>

<td>
<input name=k3 type="button" value=" 3 "
onClick="inputkey('3')" style="color=blue">
</td>

<td>
<input type="button" value=" - "
onClick="operation('-',5)" style="color=red">
</td>

<td>
<input type="button" value="左移"
onClick="operation('<',4)" style="color=red">
</td>

<td>
<input type="button" value=" 非 "
onClick="inputfunction('~','~')" style="color=red">
</td>
</tr>

<tr align=center>
<td>
<input type="button" value=" 0 "
onClick="inputkey('0')" style="color=blue">
</td>

<td>
<input type="button" value="+/-"
onClick="changeSign()" style="color=blue">
</td>

<td>
<input name=kp type="button" value=" . "
onClick="inputkey('.')" style="color=blue">
</td>

<td>
<input type="button" value=" + "
onClick="operation('+',5)" style="color=red">
</td>

<td>
<input type="button" value=" ＝ "
onClick="result()" style="color=red">
</td>

<td>
<input type="button" value="异或"
onClick="operation('x',2)" style="color=red">
</td>
</tr>

<tr align=center>
<td>
<input name=ka type="button" value=" A "
onClick="inputkey('a')" style="color=blue" disabled=true>
</td>

<td>
<input name=kb type="button" value=" B "
onClick="inputkey('b')" style="color=blue" disabled=true>
</td>

<td>
<input name=kc type="button" value=" C "
onClick="inputkey('c')" style="color=blue" disabled=true>
</td>

<td>
<input name=kd type="button" value=" D "
onClick="inputkey('d')" style="color=blue" disabled=true>
</td>

<td>
<input name=ke type="button" value=" E"
onClick="inputkey('e')" style="color=blue" disabled=true>
</td>

<td>
<input name=kf type="button" value=" F"
onClick="inputkey('f')" style="color=blue" disabled=true>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>

③ 用js写的网页计算器，小数点无法达输入到零点几的目的，怎么办

暂时不支持大小写呀。

我写的是一个简单的四则运算的：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

function cal(count1,count2){

var num1 = parseInt(count1);

var num2 = parseInt(count2);

var choose = prompt('请输入符号：',"");

switch(choose){

case "+":

alert("结果是："+num1+num2);

break;

case "-":

alert("结果是："+num1-num2);

break;

case "*":

alert("结果是："+num1*num2);

break;

case "/":

alert("结果是："+num1/num2);

break;

case "+":

alert("输入错误！");

break;

}

</script>

</body>

</html>

④ 如何使用JS编写一个简单的计算器

js部分
var num=0,result=0,numshow="0";
var operate=0; //判断输入状态的标志
var calcul=0; //判断计算状态的标志
var quit=0; //防止重复按键的标志
function command(num){
var str=String(document.calculator.numScreen.value); //获得当前显示数据
str=(str!="0") ? ((operate==0) ? str : "") : ""; //如果当前值不是"0"，且状态为0，则返回当前值，否则返回空值;
str=str + String(num); //给当前值追加字符
document.calculator.numScreen.value=str; //刷新显示
operate=0; //重置输入状态
quit=0; //重置防止重复按键的标志
}
function dzero(){
var str=String(document.calculator.numScreen.value);
str=(str!="0") ? ((operate==0) ? str + "00" : "0") : "0"; //如果当前值不是"0"，且状态为0，则返回当str+"00"，否则返回"0";
document.calculator.numScreen.value=str;
operate=0;
}
function dot(){
var str=String(document.calculator.numScreen.value);
str=(str!="0") ? ((operate==0) ? str : "0") : "0"; //如果当前值不是"0"，且状态为0，则返回当前值，否则返回"0";
for(i=0; i<=str.length;i++){ //判断是否已经有一个点号
if(str.substr(i,1)==".") return false; //如果有则不再插入
}
str=str + ".";
document.calculator.numScreen.value=str;
operate=0;
}
function del(){ //退格
var str=String(document.calculator.numScreen.value);
str=(str!="0") ? str : "";
str=str.substr(0,str.length-1);
str=(str!="") ? str : "0";
document.calculator.numScreen.value=str;
}
function clearscreen(){ //清除数据
num=0;
result=0;
numshow="0";
document.calculator.numScreen.value="0";
}
function plus(){ //加法
calculate(); //调用计算函数
operate=1; //更改输入状态
calcul=1; //更改计算状态为加
}
function minus(){ //减法
calculate();
operate=1;
calcul=2;
}
function times(){ //乘法
calculate();
operate=1;
calcul=3;
}
function divide(){ //除法
calculate();
operate=1;
calcul=4;
}
function persent(){ //求余
calculate();
operate=1;
calcul=5;
}
function equal(){
calculate(); //等于
operate=1;
num=0;
result=0;
numshow="0";
}
//
function calculate(){
numshow=Number(document.calculator.numScreen.value);
if(num!=0 && quit!=1){ //判断前一个运算数是否为零以及防重复按键的状态
switch(calcul){ //判断要输入状态
case 1:result=num+numshow;break; //计算"+"
case 2:result=num-numshow;break; //计算"-"
case 3:result=num*numshow;break;
case 4:if(numshow!=0){result=num/numshow;}else{document.getElementById("note").innerHTML="被除数不能为零！"; setTimeout(clearnote,4000)} break;
case 5:result=num%numshow;break;
}
quit=1; //避免重复按键
}
else{
result=numshow;
}
numshow=String(result);
document.calculator.numScreen.value=numshow;
num=result; //存储当前值
}
function clearnote(){ //清空提示
document.getElementById("note").innerHTML="";
}

html部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>写给新手：js表单操作（四）简单计算器（二）</title>
<style type="text/css">
body {
font-size:12px;
font-family:Arial, Georgia, "Times New Roman", Times, serif;
color:#555;
text-align:center;
background-color:#e2e2e2;
}
h6{
margin:0;
font-size:12px;
}
#calculator {
width:240px;
height:auto;
overflow:hidden;
margin:10px auto;
border:#fff 1px solid;
padding-bottom:10px;
background-color:#f2f2f2;
}
#calculator div {
clear:both;
}
#calculator ul{
padding:0;
margin:5px 14px;
border:#fff 1px solid;
height:auto;
overflow:hidden
}
#calculator li{
list-style:none;
float:left;
width:32px;
height:32px;
margin:5px;
display:inline;
line-height:32px;
font-size:14px;
background-color:#eaeaea;
}
#calculator li.tool{
background-color:#e2e2e2;
}
#calculator li:hover{
background-color:#f9f9f9;
cursor:pointer;
}
#calculator li:active{
background-color:#fc0;
cursor:pointer;
}
#calculator li.tool:active{
background-color:#d8e8ff;
cursor:pointer;
}
#calcu-head {
text-align:left;
padding:10px 15px 5px;
}
span.imyeah {
float:right;
color:#ccc;
}
span.imyeah a{
color:#ccc;
}
.screen{
width:200px;
height:24px;
line-height:24px;
padding:4px;
border:#e6e6e6 1px solid;
border-bottom:#f2f2f2 1px solid;
border-right:#f2f2f2 1px solid;
margin:10px auto;
direction:ltr;
text-align:right;
font-size:16px;
color:#999;
}
#calcu-foot{
text-align:left;
padding:10px 15px 5px;
height:auto;
overflow:hidden;
}
span#note{
float:left;
width:210px;
height:auto;
overflow:hidden;
color:red;
}
span.welcome{
clear:both;
color:#999;
}
span.welcome a{
float:right;
color:#999;
}
</style>
<script language="javascript">
//此处插入上面的js代码
</script>
</head>
<body>
<div id="calculator">
<div id="calcu-head"><span class="imyeah">© <a href="http://www.cnblogs.com/imyeah/" target="_blank">I'm Yeah!</a></span><h6>简单的计算器</h6></div>
<form name="calculator" action="" method="get">
<div id="calcu-screen">

<input type="text" name="numScreen" class="screen" value="0" onfocus="this.blur();" />
</div>
<div id="calcu-btn">
<ul> 
<li onclick="command(7)">7</li>
<li onclick="command(8)">8</li>
<li onclick="command(9)">9</li>
<li class="tool" onclick="del()">←</li>
<li class="tool" onclick="clearscreen()">C</li>
<li onclick="command(4)">4</li>
<li onclick="command(5)">5</li>
<li onclick="command(6)">6</li>
<li class="tool" onclick="times()">×</li>
<li class="tool" onclick="divide()">÷</li>
<li onclick="command(1)">1</li>
<li onclick="command(2)">2</li>
<li onclick="command(3)">3</li>
<li class="tool" onclick="plus()">+</li>
<li class="tool" onclick="minus()">-</li>
<li onclick="command(0)">0</li>
<li onclick="dzero()">00</li>
<li onclick="dot()">.</li>
<li class="tool" onclick="persent()">%</li>
<li class="tool" onclick="equal()">=</li>
</ul>
</div>
<div id="calcu-foot">
<span id="note"></span>
<span class="welcome">欢迎使用javascript计算器！<a href="http://www.cnblogs.com/imyeah" target="_blank">反馈</a></span>
</div>
</form>
</div>
</body>
</html>

⑤ 如何用javascript做一个计算器

首先我们要做好一个计算器的界面，主要用到html与css的知识，下面是代码
<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>

上面设置一个简单的table表格，主要内容是计算器的数字键盘和符号，还有就是class名和ID名，函数名，主要是用作css样式设计和javascript程序设计，后面会用到，就先贴出来了

colspan="5" 是合并五列的意思，表示这个单元格要占五列
rowspan="3"是合并三行的意思，表示这个单元格要占三行

效果如下，这样一个简单的架构就完成了

接下来就是css的设计，下面是代码
*{
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;
}

以上是css代码，比较简单

border-spacing: 0px;
这里代码的意义是：table中单元格与单元格，表格边缘都有默认距离，这里border-spacing: 0px;能使其默认距离为零，没有这句会比较难设计好看的样式。
cursor: pointer;
这里代码的意义是：使鼠标放在上面时变成一个手的标志

效果如下

接下来是javascript的代码，按照思路来一点点写
首先我们要设计，当鼠标点击某个单元格时我们能获取这个单元格上的内容，即数字或符号
所以我们在table标签里加上onClick="calculater()"，添加一个点击事件
然后用event.srcElement.innerText获取单元格上的内容，event是事件的意思，在这里这个事件当然是点击了，srcElement就是事件的元素，在这里是被点击的单元格，innerText是获取这个单元格的内容。
这里我们就可以写出这个函数第一行代码，获取被点击的单元格的内容
function calculater(){
results=event.srcElement.innerText;
}
results就是单元格的内容
当然获取了什么要显示在第一个单元格那里，这里我们还是用innerText，来输出这个点击的值
display.innerText=results;
这里代码的意义是：display是第一格单元格的id,就是在第一行显示你点击了什么
calculater()的代码就变成这样
function calculater(){
results=event.srcElement.innerText;
display.innerText=results;
}
这样我们就能输出我们点击的单元格内容

但这样我们只能输出一次单击的内容，为了把内容串起来，我们把代码改为
var results="";
function calculater(){
results+=event.srcElement.innerText;
display.innerText=results;
}
设置results为全局变量，event.srcElement.innerText用+=累加进results，
这样我们就能输入并显示一条算式

我们在“=”单元格标签里加上onClick="resultscalcaulte()"，计算这个结果
function resultscalcaulte(){
calresults=eval(results);
display.innerText=calresults;
}
eval();能运行括号里的javascript语句的字符串，并返回其值，如果results等于7+8，那eval就会计算7+8，并返回56，然后后面一条代码把56显示出来
加入上面的运算后，还是无法显示结果，原因是点击“=”单元格会先触发resultscalcaulte()函数，再触发calculater()函数，所以我们在resultscalcaulte()得到的结果就被calculater()的结果覆盖了，我们需要再在calculater()里加上
if (event.srcElement.innerText=="=") {
return;
}
使点击“=”单元格触发的calculater()函数得不到任何结果
最后得到最简单的计算器运算代码
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;
}
下面是计算7*8的结果

8
当然这样的计算并没有使用价值，我们将在下篇继续完善这个计算器的机能

⑥ 如何使用javascript编写一个计算器

首先，由于JS的存在数值的精度误差问题：

0.1+0.2 //0.30000000000000004
0.3-0.1 //0.19999999999999998

所以在编写计算器是应首先解决计算精度问题，以下四个代码段分别是js中精确的加减乘除运算函数

//浮点数加法运算
function floatAdd(arg1,arg2){
var r1,r2,m;
try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
m=Math.pow(10,Math.max(r1,r2));
return (arg1*m+arg2*m)/m
}

//浮点数减法运算
function floatSub(arg1,arg2){
var r1,r2,m,n;
try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
m=Math.pow(10,Math.max(r1,r2));
//动态控制精度长度
n=(r1>=r2)?r1:r2;
return ((arg1*m-arg2*m)/m).toFixed(n);
}

//浮点数乘法运算
function floatMul(arg1,arg2){
var m=0,s1=arg1.toString(),s2=arg2.toString();
try{m+=s1.split(".")[1].length}catch(e){}
try{m+=s2.split(".")[1].length}catch(e){}
return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
}

//浮点数除法运算
function floatDiv(arg1,arg2) {
var t1 = 0, t2 = 0, r1, r2;
try {t1 = arg1.toString().split(".")[1].length} catch (e) {}
try {t2 = arg2.toString().split(".")[1].length} catch (e) {}
with (Math) {
r1 = Number(arg1.toString().replace(".", ""));
r2 = Number(arg2.toString().replace(".", ""));
return (r1 / r2) * pow(10, t2 - t1);
}
}

以下是详细的计算器代码：
HTML5

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单计算器</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="calculator">

<div id="calculator_container">
<h3>计算器</h3>
<table id="calculator_table">
<tbody>
<tr>
<td colspan="5">
<input type="text" id="resultIpt" readonly="readonly" value="" size="17" maxlength="17" style="width:294px;color: black">
</td>
</tr>
<tr>
<td><input type="button" value="←" class="btn_color1 btn_operation"></td>
<td><input type="button" value="全清" class="btn_color1 btn_operation"></td>
<td><input type="button" value="清屏" class="btn_color1"></td>
<td><input type="button" value="﹢/﹣" class="btn_color2 btn_operation"></td>
<td><input type="button" value="1/×" class="btn_color2 btn_operation"></td>
</tr>
<tr>
<td><input type="button" value="7" class="btn_color3 btn_number"></td>
<td><input type="button" value="8" class="btn_color3 btn_number"></td>
<td><input type="button" value="9" class="btn_color3 btn_number"></td>
<td><input type="button" value="÷" class="btn_color4 btn_operation"></td>
<td><input type="button" value="％" class="btn_color2 btn_operation"></td>
</tr>
<tr>
<td><input type="button" value="4" class="btn_color3 btn_number"></td>
<td><input type="button" value="5" class="btn_color3 btn_number"></td>
<td><input type="button" value="6" class="btn_color3 btn_number"></td>
<td><input type="button" value="×" class="btn_color4 btn_operation"></td>
<td><input type="button" value="√" class="btn_color2 btn_operation"></td>
</tr>
<tr>
<td><input type="button" value="1" class="btn_color3 btn_number"></td>
<td><input type="button" value="2" class="btn_color3 btn_number"></td>
<td><input type="button" value="3" class="btn_color3 btn_number"></td>
<td><input type="button" value="－" class="btn_color4 btn_operation"></td>
<td rowspan="2">
<input type="button" value="＝" class="btn_color2" style="height: 82px" id="simpleEqu">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="0" class="btn_color3 btn_number" style="width:112px">
</td>
<td><input type="button" value="." class="btn_color3 btn_number" ></td>
<td><input type="button" value="＋" class="btn_color4 btn_operation"></td>
</tr>
</tbody>
</table>

</div>
</div>
<script type="text/javascript" src="calculator.js"></script>
</body>
</html>

CSS3

* {
margin: 0;
padding: 0;
}
#calculator{
position: relative;
margin: 50px auto;
width: 350px;
height: 400px;
border: 1px solid gray;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 4px gray;
-moz-box-shadow: 2px 2px 4px gray;
box-shadow: 2px 2px 4px gray;
behavior:url("ie-css3.htc"); /*IE8-*/
}
#calculator_table{
position: relative;
margin: 10px auto;
border-collapse:separate;
border-spacing:10px 20px;
}
h3{
position: relative;
width: 60px;
height: 30px;
margin: 0 auto;
}
#calculator_table td{
width: 50px;
height: 30px;
border: 1px solid gray;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
behavior:url("ie-css3.htc"); /*IE8-*/
}
#calculator_table td input{
font-size: 16px;
border: none;
width: 50px;
height: 30px;
color: white;
}
input.btn_color1{
background-color: orange;
}
input.btn_color2{
background-color: #133645;
}
input.btn_color3{
background-color: #59807d;
}
input.btn_color4{
background-color: seagreen;
}
input:active{
-webkit-box-shadow: 3px 3px 3px gray;
-moz-box-shadow: 3px 3px 3px gray;
box-shadow: 3px 3px 3px gray;
behavior:url("ie-css3.htc"); /*IE8-*/
}

⑦ 利用JavaScript脚本语言编写一个简单的“网页计算器”

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
function jsq(fh)
{
var num1,num2;
num1=parseFloat(document.form1.text1.value);
num2=parseFloat(document.form1.text2.value);
if(fh=="+")
document.form1.text3.value=num1+num2;
if(fh=="-")
document.form1.text3.value=num1-num2;
if(fh=="*")
document.form1.text3.value=num1*num2;
if(fh=="/")
if(num2!=0)
{
document.form1.text3.value=num1/num2;
}
else
{
alert ("除数不能为零!")
}
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<label>
<input name="text1" type="text" id="text1" />
</label>
<p>
<label>
<input name="text2" type="text" id="text2" />
</label>
</p>
<p>
<label>
<input name="Button1" type="Button" id="Button1" value="+" onClick="jsq('+')">
<input name="Button2" type="Button" id="Button2" value="-" onClick="jsq('-')"/>
<input name="Button3" type="Button" id="Button3" value="*" onClick="jsq('*')"/>
<input name="Button4" type="Button" id="Button4" value="/" onClick="jsq('/')"/>
</label>
</p>
<p>
<label>
<input name="text3" type="text" id="text3" />
</label>
</p>
</form>
</body>
</html>

⑧ 用js代码做一个简易计算器

functiontest(){
vartxt1=document.getElementById("txt1"),
txt2=document.getElementById("txt2"),
txt3=document.getElementById("txt3"),
opt=document.getElementById("sel");
txt3.value=eval(txt1.value+opt.value+txt2.value);//eval函数可计算某个字符串，并执行其中的的js代码
}

<inputtype="text"id="txt1"/>
<selectid="sel">
<optionvalue="+">+</option>
<optionvalue="-">-</option>
<optionvalue="*">*</option>
<optionvalue="/">/</option>
</select>
<inputtype="text"id="txt2"/>
=
<inputtype="text"id="txt3"/>
<inputtype="button"id="btn"value="计算"onclick="test()"/>

⑨ JAVA web中怎样调用系统的计算器

写一个Applet嵌入到页面中，然后再Applet中调用系统计算器

楼上的，请先弄清前后台代码再回答问题，你写在<%%>里面的java程序在后台执行了，如果后台使用的是window系统的话，你会在你的服务器上打开一个计算器，如果不是，等着报错吧

⑩ 如何用js做一个简易计算器

js做一个简易计算器具体如下：

<html>
<head>
<title>js运算</title>
<boby>
<table>
<tr>
<td>第一个数</td>
<td><input type="text" id="onesum"></td>
</tr>
<tr>
<td>运算符号</td>
<td><input type="text" id="fh"></td>
</tr>
<tr>
<td>第二个数</td>
<td><input type="text" id="twosum"></td>
</tr>
<tr>
<td>计算结果</td>
<td><input type="text" id="sum"></td>
</tr>
<tr>
<td colspan="2"><input type="button" value=" 计算 " onclick="js()"></td>
</tr>
<table>
<script>
function js(){
var num1=document.getElementById("onesum").value;
var num2=document.getElementById("twosum").value;
var fh=document.getElementById("fh").value;
var sum=0;
nu
m1=Number(num1);
num2=Number(num2);
if(fh=='+')
{
sum=num1+num2;
}
else if(fh=='-')
{
sum=num1-num2;
}else if(fh=='*')
{
sum=num1*num2;
}else if(fh=='/')
{
sum=num1/num2;
}
//alert(sum);
document.getElementById("sum").value=sum;
}
</script>
</boby>
</html>

web的js写计算器

与web的js写计算器相关的内容