首頁 > 開發者 > JavaScript
JavaScript網頁計算機代碼，該計算機是用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篇
//實現計算機功能//結果var result = 0;//顯示框中的數（預設為“0”）var screenNum = "0";//數的初始輸入狀態，預設為0；當按了任意運算子鍵後，數的輸入狀態變為1var state = 0;//防止重複按運算子鍵var avoidRepeat = true;//運算子鍵（預設為0--等號）var operator = 0;//第一步：擷取按索引值，並顯示在顯示框中function command(num) { //擷取顯示框的值 var str = String(document.form1.txt.value); //對該值進行判斷，如果該值不為"0"，且輸入狀態0，則返回前者，否則為""(雙重三目運算) //兩個判斷條件：1、顯示框中值是否為"0", 2、數的輸入狀態 str = (str != "0")?((state == 0)?str:""):""; //給當前值追加字元 str = str + String(num); //重新整理顯示 document.form1.txt.value = str; //按了任一數字鍵後，數的輸入狀態變為0 state = 0; //重設防止重複按鍵 avoidRepeat = true;}//第二步：確保輸入的數是合法的，每個數至多隻有一個小數點function dot() { var str = String(document.form1.txt.value); //若該數前面未接運算子，則返回前值，否則為"0"； str = (state == 0)?str:"0"; //Java裡String有length()方法，而JS裡String有length屬性 for(i=0;i<=str.length;i++) { //substr()擷取下標從i開始，個數為1個的子串 if(str.substr(i,1)==".") { //當存在小數點時，則程式終止 return; } } //若無小數點，則在該數後面加上 str = str+"."; //重新整理顯示 document.form1.txt.value = str; //恢複數的初始輸入狀態 state = 0; }//第三步：處理退格鍵function Backspace() { var str= String(document.form1.txt.value); //若顯示框中數不等於"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() { //顯示框設為"0" document.form1.txt.value = "0"; //恢複數的初始輸入狀態 state = 0; //恢複運算子鍵，預設為0--等號 operator = 0;}//第五步：加法function add() { //調用計算函數 calculate(); //更改數的輸入狀態 state = 1; //更改運算子鍵，1--加號 operator = 1; }//第六步：減法function subtract() { //調用計算函數 calculate(); //更改數的輸入狀態 state = 1; //2--減號 operator = 2; }//第七步：乘法function multiply() { //調用計算函數 calculate(); //更改數的輸入狀態 state = 1; //3--乘號 operator = 3; }//第八步：除法function divide() { //調用計算函數 calculate(); //更改數的輸入狀態 state = 1; //4--除號 operator = 4; }//第九步：加號或減號function sign() { //5--加號或減號 operator = 5; //調用計算函數 calculate(); //更改數的輸入狀態 state = 1; //0--等號 operator = 0; //加號或減號可以連續按 avoidRepeat = true;}//第十步：等於function equal() { //調用計算函數 calculate(); //更改數的輸入狀態 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){ //設定顯示框的值 document.getElementById("txt").value="除數不能為0"; //3s後，執行清屏函數 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; } //當按了運算子鍵後，不能再按 avoidRepeat = false; } }//第十二步：清屏函數function clearScreen() { document.getElementById("txt").value = "0"; }
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
