js的表單操作 簡單計算器
更新時間:2011年12月29日 00:09:48 作者:
javascript寫的簡單的加減乘除計算器,里面涉及到一些方法還是很實(shí)用的哦,新手不要錯過
代碼:
<!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;
color:#333;
}
#jsq input{/*輸入框樣式*/
border:#ccc 1px solid;
border-right:#e2e2e2 1px solid;
border-bottom:#e2e2e2 1px solid;
height:18px;
line-height:18px;
padding:3px;
}
#jsq span{
color:#999
}
#jsq input.btn{/*按鈕樣式*/
border:#e6e6e6 1px solid;
background-color:#e2e2e2;
width:30px;
height:24px;
text-align:center;
line-height:16px;
cursor:pointer;
margin:0 3px;
color:#999;
}
#jsq input.btn:hover{/*按鈕懸浮樣式*/
border:#e2e2e2 1px solid;
background-color:#f2f2f2;
color:#333;
}
</style>
<script type="text/javascript">
function imyeah(type){ //計算函數(shù)
var result=0;
num1 = Number(document.jisuanqi.num1.value); //Number()可以吧字符串強(qiáng)制轉(zhuǎn)換成數(shù)字,例如“123abc”會轉(zhuǎn)換成“123”
num2 = Number(document.jisuanqi.num2.value);
if(num1=="" || num2==""){return false;} //如果沒輸入計算數(shù)則不執(zhí)行
switch(type){ //判斷要執(zhí)行的計算符號
case 0:result=num1+num2;break; //計算“+”
case 1:result=num1-num2;break; //計算“-”
case 2:result=num1*num2;break;
case 3:result=num1/num2;break;
case 4:result=num1%num2;break;
}
document.jisuanqi.jieguo.value=result; //顯示計算結(jié)果
}
</script>
</head>
<body>
<form name="jisuanqi" id="jsq" action="" method="get" />
<p> 第一個數(shù):
<input type="text" size="10" name="num1" value="" />
</p>
<p> 第二個數(shù):
<input type="text" size="10" name="num2" value="" />
</p>
<p> 計算結(jié)果:
<input type="text" size="10" name="jieguo" onClick="imyeah(0)" value="+" onfocus="this.select()" /> <span>左鍵"+",右鍵"選中復(fù)制"</span>
</p>
<p>
<input type="button" class="btn" value="–" onClick="imyeah(1)"/> <!--定義按鈕-->
<input type="button" class="btn" value="×" onClick="imyeah(2)"/ >
<input type="button" class="btn" value="÷" onClick="imyeah(3)"/>
<input type="button" class="btn" value="%" onClick="imyeah(4)"/>
</p>
</body>
</html>
運(yùn)行效果:
復(fù)制代碼 代碼如下:
<!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;
color:#333;
}
#jsq input{/*輸入框樣式*/
border:#ccc 1px solid;
border-right:#e2e2e2 1px solid;
border-bottom:#e2e2e2 1px solid;
height:18px;
line-height:18px;
padding:3px;
}
#jsq span{
color:#999
}
#jsq input.btn{/*按鈕樣式*/
border:#e6e6e6 1px solid;
background-color:#e2e2e2;
width:30px;
height:24px;
text-align:center;
line-height:16px;
cursor:pointer;
margin:0 3px;
color:#999;
}
#jsq input.btn:hover{/*按鈕懸浮樣式*/
border:#e2e2e2 1px solid;
background-color:#f2f2f2;
color:#333;
}
</style>
<script type="text/javascript">
function imyeah(type){ //計算函數(shù)
var result=0;
num1 = Number(document.jisuanqi.num1.value); //Number()可以吧字符串強(qiáng)制轉(zhuǎn)換成數(shù)字,例如“123abc”會轉(zhuǎn)換成“123”
num2 = Number(document.jisuanqi.num2.value);
if(num1=="" || num2==""){return false;} //如果沒輸入計算數(shù)則不執(zhí)行
switch(type){ //判斷要執(zhí)行的計算符號
case 0:result=num1+num2;break; //計算“+”
case 1:result=num1-num2;break; //計算“-”
case 2:result=num1*num2;break;
case 3:result=num1/num2;break;
case 4:result=num1%num2;break;
}
document.jisuanqi.jieguo.value=result; //顯示計算結(jié)果
}
</script>
</head>
<body>
<form name="jisuanqi" id="jsq" action="" method="get" />
<p> 第一個數(shù):
<input type="text" size="10" name="num1" value="" />
</p>
<p> 第二個數(shù):
<input type="text" size="10" name="num2" value="" />
</p>
<p> 計算結(jié)果:
<input type="text" size="10" name="jieguo" onClick="imyeah(0)" value="+" onfocus="this.select()" /> <span>左鍵"+",右鍵"選中復(fù)制"</span>
</p>
<p>
<input type="button" class="btn" value="–" onClick="imyeah(1)"/> <!--定義按鈕-->
<input type="button" class="btn" value="×" onClick="imyeah(2)"/ >
<input type="button" class="btn" value="÷" onClick="imyeah(3)"/>
<input type="button" class="btn" value="%" onClick="imyeah(4)"/>
</p>
</body>
</html>
運(yùn)行效果:

您可能感興趣的文章:
- 簡易js代碼實(shí)現(xiàn)計算器操作
- javascript-簡單的計算器實(shí)現(xiàn)步驟分解(附圖)
- js網(wǎng)頁版計算器的簡單實(shí)現(xiàn)
- 純javascript代碼實(shí)現(xiàn)計算器功能(三種方法)
- 使用jsp調(diào)用javabean實(shí)現(xiàn)超簡單網(wǎng)頁計算器示例
- js實(shí)現(xiàn)模擬計算器退格鍵刪除文字效果的方法
- html+js實(shí)現(xiàn)簡單的計算器代碼(加減乘除)
- JSP實(shí)現(xiàn)計算器功能(網(wǎng)頁版)
- JavaScript計算器網(wǎng)頁版實(shí)現(xiàn)代碼分享
- js當(dāng)月水電氣簡單計算器
- javascript計算當(dāng)月剩余天數(shù)(天數(shù)計算器)示例代碼
- JS實(shí)現(xiàn)的加減乘除四則運(yùn)算計算器示例
相關(guān)文章
JS實(shí)現(xiàn)網(wǎng)站樓層導(dǎo)航效果代碼實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)站樓層導(dǎo)航效果代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-06-06js函數(shù)與php函數(shù)的區(qū)別實(shí)例淺析
這篇文章主要介紹了js函數(shù)與php函數(shù)的區(qū)別,以實(shí)例形式較為簡單的分析了js函數(shù)與php函數(shù)語法及應(yīng)用上的不同點(diǎn),具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01javascript生成/解析dom的CDATA類型的字段的代碼
javascript生成/解析dom的CDATA類型的字段的代碼...2007-04-04js實(shí)現(xiàn)以最簡單的方式將數(shù)組元素添加到對象中的方法
下面小編就為大家分享一篇js實(shí)現(xiàn)以最簡單的方式將數(shù)組元素添加到對象中的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12js按條件生成隨機(jī)json:randomjson實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨s按條件生成隨機(jī)json:randomjson實(shí)現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04layui獲取選中行數(shù)據(jù)的實(shí)例講解
今天小編就為大家分享一篇layui獲取選中行數(shù)據(jù)的實(shí)例講解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08