欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript計(jì)算器網(wǎng)頁(yè)版實(shí)現(xiàn)代碼分享

 更新時(shí)間：2016年07月15日 09:04:14   作者：qq_34416191  
這篇文章主要為大家詳細(xì)介紹了JavaScript計(jì)算器網(wǎng)頁(yè)版實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

JavaScript網(wǎng)頁(yè)計(jì)算器代碼，該計(jì)算器是用DW寫的！

HTML篇

<html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>計(jì)算器</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)計(jì)算器功能

//結(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--等于號(hào)）
var operator = 0;

//第一步：獲取按鍵值，并顯示在顯示框中
function command(num) {
 //獲取顯示框的值
 var str = String(document.form1.txt.value);
 //對(duì)該值進(jìn)行判斷，如果該值不為"0"，且輸入狀態(tài)0，則返回前者，否則為""(雙重三目運(yùn)算)
 //兩個(gè)判斷條件：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ù)是合法的，每個(gè)數(shù)至多只有一個(gè)小數(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開始，個(gè)數(shù)為1個(gè)的子串
 if(str.substr(i,1)==".") {
 //當(dāng)存在小數(shù)點(diǎn)時(shí)，則程序終止
 return;
 } 
 }
 //若無(wú)小數(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--等于號(hào)
 operator = 0;
}

//第五步：加法
function add() {
 //調(diào)用計(jì)算函數(shù)
 calculate();
 //更改數(shù)的輸入狀態(tài)
 state = 1;
 //更改運(yùn)算符鍵，1--加號(hào)
 operator = 1;
 
}

//第六步：減法
function subtract() {
 //調(diào)用計(jì)算函數(shù)
 calculate();
 //更改數(shù)的輸入狀態(tài)
 state = 1;
 //2--減號(hào)
 operator = 2;
 
 
}

//第七步：乘法
function multiply() {
 //調(diào)用計(jì)算函數(shù)
 calculate();
 //更改數(shù)的輸入狀態(tài)
 state = 1;
 //3--乘號(hào)
 operator = 3;
 
}

//第八步：除法
function divide() {
 //調(diào)用計(jì)算函數(shù)
 calculate();
 //更改數(shù)的輸入狀態(tài)
 state = 1;
 //4--除號(hào)
 operator = 4;
 
}

//第九步：正負(fù)號(hào)
function sign() {
 //5--正負(fù)號(hào)
 operator = 5;
 //調(diào)用計(jì)算函數(shù)
 calculate();
 //更改數(shù)的輸入狀態(tài)
 state = 1;
 //0--等于號(hào)
 operator = 0;
 //正負(fù)號(hào)可以連續(xù)按
 avoidRepeat = true;

}

//第十步：等于
function equal() {
 //調(diào)用計(jì)算函數(shù)
 calculate();
 //更改數(shù)的輸入狀態(tài)
 state = 1;
 //0--等于號(hào)
 operator = 0;
 
 
}

//第十一步：計(jì)算
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)于計(jì)算器的精彩文章請(qǐng)查看《計(jì)算器專題》 ，更多精彩等你來(lái)發(fā)現(xiàn)！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論