JavaScript計算器網(wǎng)頁版實(shí)現(xiàn)代碼分享
更新時間：2016年07月15日 09:04:14 作者：qq_34416191
這篇文章主要為大家詳細(xì)介紹了JavaScript計算器網(wǎng)頁版實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
JavaScript網(wǎng)頁計算器代碼，該計算器是用DW寫的！
HTML篇
<html <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>計算器</title> <link href="style/calculator.css" rel="stylesheet" type="text/css" /> <script src="JavaScript/calculator.js"></script>> </head> <body > <form id="form1" name="form1" method="post" action=""> <table width="320" border="1" cellpadding="0" cellspacing="0" class="trb" id="calculator"> <tr> <td height="100" colspan="4" align="left" valign="top"><label for="txt"></label> <input name="txt" type="text" class="txt" id="txt" value="0" onfocus="this.blur();"/></td> </tr> <tr> <td width="80" height="40" align="center" valign="middle" onclick="deleteAll();">C</td> <td width="80" height="40" align="center" valign="middle" onclick="Backspace();">←</td> <td width="80" height="40" align="center" valign="middle" onclick="sign();">±</td> <td width="80" height="40" align="center" valign="middle" class="operator" onclick="add();">＋</td> </tr> <tr> <td width="80" height="40" align="center" valign="middle" onclick="command(7);">7</td> <td width="80" height="40" align="center" valign="middle" onclick="command(8);">8</td> <td width="80" height="40" align="center" valign="middle" onclick="command(9);">9</td> <td width="80" height="40" align="center" valign="middle" class="operator" onclick="subtract();">－</td> </tr> <tr> <td width="80" height="40" align="center" valign="middle" onclick="command(4);">4</td> <td width="80" height="40" align="center" valign="middle" onclick="command(5);">5</td> <td width="80" height="40" align="center" valign="middle" onclick="command(6);">6</td> <td width="80" height="40" align="center" valign="middle" class="operator" onclick="multiply();">×</td> </tr> <tr> <td width="80" height="40" align="center" valign="middle" onclick="command(1);">1</td> <td width="80" height="40" align="center" valign="middle" onclick="command(2);">2</td> <td width="80" height="40" align="center" valign="middle" onclick="command(3);">3</td> <td width="80" height="40" align="center" valign="middle" class="operator" onclick="divide();">÷</td> </tr> <tr> <td width="80" height="40" align="center" valign="middle" onclick="command(0);">0</td> <td width="80" height="40" align="center" valign="middle" onclick="dot();">▪</td> <td height="40" colspan="2" align="center" valign="middle" bgcolor="#CC6600" onclick="equal();">＝</td> </tr> </table> <p> </p> <p> </p> </form> </body> </html>
CSS篇
@charset "utf-8";
/* CSS Document */
.trb {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
color: #FFF;
background-color: #333;
text-align: center;
border: 1px solid #999;
}
.operator {
background-color: #333;
font-size: 18px;
color: #C60;
font-family: Verdana, Geneva, sans-serif;
}
td:hover{
font-size: 28px;
cursor:pointer;
}
.txt {
height: 100px;
width: 320px;
background-color: #333;
text-align: left;
vertical-align: bottom;
color: #FFF;
font-size: 30px;
}
JavaScript篇
//實(shí)現(xiàn)計算器功能
//結(jié)果
var result = 0;
//顯示框中的數(shù)（默認(rèn)為“0”）
var screenNum = "0";
//數(shù)的初始輸入狀態(tài)，默認(rèn)為0；當(dāng)按了任意運(yùn)算符鍵后，數(shù)的輸入狀態(tài)變?yōu)?
var state = 0;
//防止重復(fù)按運(yùn)算符鍵
var avoidRepeat = true;
//運(yùn)算符鍵（默認(rèn)為0--等于號）
var operator = 0;
//第一步：獲取按鍵值，并顯示在顯示框中
function command(num) {
//獲取顯示框的值
var str = String(document.form1.txt.value);
//對該值進(jìn)行判斷，如果該值不為"0"，且輸入狀態(tài)0，則返回前者，否則為""(雙重三目運(yùn)算)
//兩個判斷條件：1、顯示框中值是否為"0", 2、數(shù)的輸入狀態(tài)
str = (str != "0")?((state == 0)?str:""):"";
//給當(dāng)前值追加字符
str = str + String(num);
//刷新顯示
document.form1.txt.value = str;
//按了任意數(shù)字鍵后，數(shù)的輸入狀態(tài)變?yōu)?
state = 0;
//重置防止重復(fù)按鍵
avoidRepeat = true;
}
//第二步：確保輸入的數(shù)是合法的，每個數(shù)至多只有一個小數(shù)點(diǎn)
function dot() {
var str = String(document.form1.txt.value);
//若該數(shù)前面未接運(yùn)算符，則返回前值，否則為"0"；
str = (state == 0)?str:"0";
//Java里String有l(wèi)ength()方法，而JS里String有l(wèi)ength屬性
for(i=0;i<=str.length;i++) {
//substr()獲取下標(biāo)從i開始，個數(shù)為1個的子串
if(str.substr(i,1)==".") {
//當(dāng)存在小數(shù)點(diǎn)時，則程序終止
return;
}
}
//若無小數(shù)點(diǎn)，則在該數(shù)后面加上
str = str+".";
//刷新顯示
document.form1.txt.value = str;
//恢復(fù)數(shù)的初始輸入狀態(tài)
state = 0;
}
//第三步：處理退格鍵
function Backspace() {
var str= String(document.form1.txt.value);
//若顯示框中數(shù)不等于"0",則返回str，否則返回""
str = (str != "0")?str:"";
//獲取子串
str = str.substr(0,str.length-1);
//若str不為"",則返回子串str，否則str="0"
str = (str != "")?str:"0";
//刷新顯示
document.form1.txt.value = str;
}
//第四步：刪除所有
function deleteAll() {
//顯示框設(shè)為"0"
document.form1.txt.value = "0";
//恢復(fù)數(shù)的初始輸入狀態(tài)
state = 0;
//恢復(fù)運(yùn)算符鍵，默認(rèn)為0--等于號
operator = 0;
}
//第五步：加法
function add() {
//調(diào)用計算函數(shù)
calculate();
//更改數(shù)的輸入狀態(tài)
state = 1;
//更改運(yùn)算符鍵，1--加號
operator = 1;
}
//第六步：減法
function subtract() {
//調(diào)用計算函數(shù)
calculate();
//更改數(shù)的輸入狀態(tài)
state = 1;
//2--減號
operator = 2;
}
//第七步：乘法
function multiply() {
//調(diào)用計算函數(shù)
calculate();
//更改數(shù)的輸入狀態(tài)
state = 1;
//3--乘號
operator = 3;
}
//第八步：除法
function divide() {
//調(diào)用計算函數(shù)
calculate();
//更改數(shù)的輸入狀態(tài)
state = 1;
//4--除號
operator = 4;
}
//第九步：正負(fù)號
function sign() {
//5--正負(fù)號
operator = 5;
//調(diào)用計算函數(shù)
calculate();
//更改數(shù)的輸入狀態(tài)
state = 1;
//0--等于號
operator = 0;
//正負(fù)號可以連續(xù)按
avoidRepeat = true;
}
//第十步：等于
function equal() {
//調(diào)用計算函數(shù)
calculate();
//更改數(shù)的輸入狀態(tài)
state = 1;
//0--等于號
operator = 0;
}
//第十一步：計算
function calculate() {
//獲取顯示框中的值
screenNum = Number(document.form1.txt.value);
if(avoidRepeat) {
switch(operator){
case 1:
result = result + screenNum;
document.form1.txt.value = result;
break;
case 2:
result = result - screenNum;
document.form1.txt.value = result;
break;
case 3:
result = result * screenNum;
document.form1.txt.value = result;
break;
case 4:
if(screenNum == 0){
//設(shè)置顯示框的值
document.getElementById("txt").value="除數(shù)不能為0";
//3s后，執(zhí)行清屏函數(shù)
setTimeout(clearScreen,3000);
}else{
result = result/screenNum;
document.form1.txt.value = result;
}
break;
case 5:
result = (-1)*screenNum;
document.form1.txt.value = result;
break;
case 0:
result = screenNum;
document.form1.txt.value = result;
break;
}
//當(dāng)按了運(yùn)算符鍵后，不能再按
avoidRepeat = false;
}
}
//第十二步：清屏函數(shù)
function clearScreen() {
document.getElementById("txt").value = "0";
}
關(guān)于計算器的精彩文章請查看《計算器專題》 ，更多精彩等你來發(fā)現(xiàn)！
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js網(wǎng)頁版計算器的簡單實(shí)現(xiàn)
- 網(wǎng)頁計算器 一個JS計算器
- JSP實(shí)現(xiàn)計算器功能(網(wǎng)頁版)
- 使用jsp調(diào)用javabean實(shí)現(xiàn)超簡單網(wǎng)頁計算器示例
- 使用JSP制作一個超簡單的網(wǎng)頁計算器的實(shí)例分享
- JS實(shí)現(xiàn)基本的網(wǎng)頁計算器功能示例
- node.js+express制作網(wǎng)頁計算器
- JavaScript實(shí)現(xiàn)網(wǎng)頁計算器功能
- javascript實(shí)現(xiàn)簡單的可隨機(jī)變色網(wǎng)頁計算器示例
- 原生JavaScript實(shí)現(xiàn)網(wǎng)頁版計算器
相關(guān)文章
javascript檢測是否聯(lián)網(wǎng)的實(shí)現(xiàn)代碼
這篇文章主要介紹了javascript檢測是否聯(lián)網(wǎng)的實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-09-09
JavaScript實(shí)現(xiàn)文件下載并重命名代碼實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)文件下載并重命名代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12
這篇文章主要給大家介紹了關(guān)于自定義Egg.js的請求級別日志的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
這篇文章介紹了JS實(shí)現(xiàn)深拷貝的幾種方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
layui表格數(shù)據(jù)復(fù)選框回顯設(shè)置方法
今天小編就為大家分享一篇layui表格數(shù)據(jù)復(fù)選框回顯設(shè)置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
xmlplus組件設(shè)計系列之圖標(biāo)（ICON）(1）
這篇文章主要為大家詳細(xì)介紹了xmlplus組件設(shè)計系列之圖標(biāo)ICON的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家詳細(xì)介紹了Bootstrap如何激活導(dǎo)航狀態(tài)，包括膠囊式導(dǎo)航中的激活狀態(tài)和列表導(dǎo)航中的激活狀態(tài)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
今天小編就為大家分享一篇layer 刷新某個頁面的實(shí)現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了判斷文件是否正在被使用的JS代碼，有需要的朋友可以參考一下2013-12-12
document.compatMode的CSS1compat使用介紹
這篇文章主要介紹了document.compatMode的CSS1compat使用,需要的朋友可以參考下2014-04-04