500 Internal Server Error
用HTML+CSS+JavaScript實(shí)現(xiàn)計算器的設(shè)計
2014-11-23 06:19:00于萬國
衡水學(xué)院學(xué)報 2014年4期
于 萬 國
(河北民族師范學(xué)院 數(shù)學(xué)與計算機(jī)系，河北 承德 067000)
1 背景分析
用戶在瀏覽網(wǎng)頁時，經(jīng)常會使用到計算器來執(zhí)行一些計算功能，用HTML+CSS+JavaScript的完美組合可以設(shè)計一個界面美觀、方便實(shí)用的計算器.用HMTL實(shí)現(xiàn)網(wǎng)頁的基本結(jié)構(gòu)，即一個五行四列的表格，第一行第一個單元格是跨列的，用做結(jié)果框，其它每個單元格里是一個
圖1 計算器外觀
2 設(shè)計實(shí)現(xiàn)
2.1 分析網(wǎng)頁結(jié)構(gòu)，寫出index.html代碼
整個頁面沒有其他內(nèi)容，只有一個計算器，可以使用表格和按鈕組合寫出，之后需要使用JavaScript取到每個按鈕的值，這里可以使用給每個按鈕設(shè)置value屬性來為之后做準(zhǔn)備，結(jié)果框可以使用ID屬性，來為之后編寫JavaScript代碼做基礎(chǔ).網(wǎng)頁結(jié)構(gòu)代碼如下：
2.2 分析網(wǎng)頁的表現(xiàn)形式，使用CSS對其進(jìn)行美化修飾，寫出css.css
要注意的是，結(jié)果框中的內(nèi)容顯示方式是從右向左.CSS代碼如下：
body{font:bolder 26px ;}
#result{text-align:right;}
table,td{border:1px solid #C0C0C0;}
td{ padding:10px;}
button{width:50px; height:50px; }
2.3 編寫外部JavaScript文件js.js
分解如下：
1) 將用戶點(diǎn)擊的數(shù)據(jù)存入字符串中并將其顯示在結(jié)果框中，這里字符串中的值會在多個函數(shù)中用到，所以先將其定義為全局變量：str = ""；
2) 寫數(shù)據(jù)顯示函數(shù)showData().也就是將用戶點(diǎn)擊過的數(shù)據(jù)顯示出來，這里可以先將用戶點(diǎn)擊的數(shù)據(jù)存入字符串中，以備之后計算使用，然后將字符串顯示出來.之后使用ocument.getElementById("result").innerHTML= str； 其中document.getElementById是DOM中的方法，"result"是結(jié)果框的ID屬性值，innerHTML是將str中的值顯示在結(jié)果框中.函數(shù)showData()代碼如下：
function showData(which){
str += which.value;
document.getElementById("result").innerHTML = str;
}
3) 以上的showData()函數(shù)寫好后，當(dāng)我們添加了相應(yīng)的事件響應(yīng)函數(shù)之后就可以實(shí)現(xiàn)用戶點(diǎn)擊過的數(shù)據(jù)顯示在結(jié)果框中.下來就要考慮當(dāng)用戶點(diǎn)擊等號時，將運(yùn)算結(jié)果顯示在結(jié)果框中.這個問題需要分三步解決：第一，當(dāng)用戶點(diǎn)擊等號時，之前點(diǎn)擊的被運(yùn)算數(shù)在結(jié)果框中清除；第二，進(jìn)行數(shù)據(jù)運(yùn)算；第三，將運(yùn)算結(jié)果顯示在結(jié)果框中.這三個步驟合在一起放在一個函數(shù)calculate中.
4) 在calculate()函數(shù)中，第一步，清除用戶點(diǎn)擊過的被運(yùn)算數(shù)，使用document.getElementById("result"). innerHTML = ""語句，跟之前所使用的語句是同樣的道理.第二步，進(jìn)行數(shù)據(jù)運(yùn)算可以使用eval()函數(shù)，此函數(shù)的功能是計算某個字符串，并返回計算結(jié)果，這里可以將其返回結(jié)果存入resultNum中.第三步，將resultNum顯示在結(jié)果框中，仍然是使用的document.getElementById("result").innerHTML = resultNum這條語句.另外，還有一種情況，用戶在計算完成后，可能不直接清除計算結(jié)果，而是在當(dāng)前結(jié)果的基礎(chǔ)上繼續(xù)運(yùn)算，所以需要將計算結(jié)果保存在字符串中. calculate()函數(shù)代碼如下：
function calculate(){
document.getElementById("result").innerHTML = '';
var resultNum = eval(str);
resultNum += '';
if (resultNum.indexOf(".")>0)
{
var a = resultNum.indexOf(".");
resultNum = resultNum.substring(0,a+3);
}
document.getElementById("result").innerHTML = resultNum;
str = resultNum;
}
5) 當(dāng)用戶點(diǎn)擊C時，字符串內(nèi)容清空，并將結(jié)果框中的內(nèi)容清0，這里可以編寫函數(shù)clearData().第一步字符串內(nèi)容清空；第二步，結(jié)果框中顯示0，可以使用語句document.getElementById("result").innerHTML = 0.函數(shù)clearData() 代碼如下：
function clearData(){
str = "";
document.getElementById("result").innerHTML = 0;
}
6) 編寫事件響應(yīng)函數(shù)diverseFun(which).也就是當(dāng)用戶點(diǎn)擊不同的內(nèi)容，該計算器給出不同的響應(yīng)，比如：當(dāng)用戶點(diǎn)擊"="時，執(zhí)行計算函數(shù)；當(dāng)用戶點(diǎn)擊"C"時，執(zhí)行數(shù)據(jù)清除函數(shù)；當(dāng)用戶點(diǎn)擊其他數(shù)字和運(yùn)算符時，執(zhí)行數(shù)據(jù)顯示函數(shù).這里可以使用每個按鈕加一個onclick屬性，其屬性值為相應(yīng)的響應(yīng)函數(shù)，但這種辦法代碼量較多，不提倡用這種方法.換種方法，可以使用語句document. getElementsByTagName("button")先獲得所有button這些標(biāo)記，然后使用for循環(huán)，給所有按鈕添加鼠標(biāo)點(diǎn)擊響應(yīng)函數(shù).這個響應(yīng)函數(shù)就要分如上說的三種情況了，在這個響應(yīng)函數(shù)中可以使用switch語句來解決這個問題，當(dāng)分別點(diǎn)擊"="、"C"和其他數(shù)據(jù)時執(zhí)行不同的操作，即等于不同的響應(yīng)函數(shù)名.diverseFun(which)代碼如下：
3 總結(jié)
在該實(shí)現(xiàn)方法中用到了JavaScript中的BOM和DOM模型的使用，JavaScript中事件處理函數(shù)以及每個自定義函數(shù)之間的關(guān)系等等.利用好這些知識點(diǎn)，可以實(shí)現(xiàn)更加復(fù)雜的計算器.
猜你喜歡
青少年科技創(chuàng)新報(2024年23期)2024-07-12 00:00:00
中學(xué)生天地(A版)(2022年10期)2022-11-23 06:42:50
奧秘(創(chuàng)新大賽)(2019年12期)2019-11-29 18:26:17
少年文藝·我愛寫作文(2017年6期)2017-06-12 23:21:56
商用汽車(2016年11期)2016-12-19 01:20:16
商用汽車(2016年6期)2016-06-29 09:18:54
商用汽車(2016年4期)2016-05-09 01:23:12
商業(yè)評論(2014年9期)2015-02-28 04:32:41
創(chuàng)業(yè)家(2015年10期)2015-02-27 07:55:08
創(chuàng)業(yè)家(2015年10期)2015-02-27 07:54:39
