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寫計算器相關的內容