用HTML+CSS+JavaScript實(shí)現(xiàn)計(jì)算器的設(shè)計(jì)
2014-11-23 06:19:00于萬(wàn)國(guó)
衡水學(xué)院學(xué)報(bào) 2014年4期
于 萬(wàn) 國(guó)
(河北民族師范學(xué)院 數(shù)學(xué)與計(jì)算機(jī)系，河北 承德 067000)
1 背景分析
用戶在瀏覽網(wǎng)頁(yè)時(shí)，經(jīng)常會(huì)使用到計(jì)算器來(lái)執(zhí)行一些計(jì)算功能，用HTML+CSS+JavaScript的完美組合可以設(shè)計(jì)一個(gè)界面美觀、方便實(shí)用的計(jì)算器.用HMTL實(shí)現(xiàn)網(wǎng)頁(yè)的基本結(jié)構(gòu)，即一個(gè)五行四列的表格，第一行第一個(gè)單元格是跨列的，用做結(jié)果框，其它每個(gè)單元格里是一個(gè)
圖1 計(jì)算器外觀
2 設(shè)計(jì)實(shí)現(xiàn)
2.1 分析網(wǎng)頁(yè)結(jié)構(gòu)，寫出index.html代碼
整個(gè)頁(yè)面沒(méi)有其他內(nèi)容，只有一個(gè)計(jì)算器，可以使用表格和按鈕組合寫出，之后需要使用JavaScript取到每個(gè)按鈕的值，這里可以使用給每個(gè)按鈕設(shè)置value屬性來(lái)為之后做準(zhǔn)備，結(jié)果框可以使用ID屬性，來(lái)為之后編寫JavaScript代碼做基礎(chǔ).網(wǎng)頁(yè)結(jié)構(gòu)代碼如下：
2.2 分析網(wǎng)頁(yè)的表現(xiàn)形式，使用CSS對(duì)其進(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é)果框中，這里字符串中的值會(huì)在多個(gè)函數(shù)中用到，所以先將其定義為全局變量：str = ""；
2) 寫數(shù)據(jù)顯示函數(shù)showData().也就是將用戶點(diǎn)擊過(guò)的數(shù)據(jù)顯示出來(lái)，這里可以先將用戶點(diǎn)擊的數(shù)據(jù)存入字符串中，以備之后計(jì)算使用，然后將字符串顯示出來(lái).之后使用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)擊過(guò)的數(shù)據(jù)顯示在結(jié)果框中.下來(lái)就要考慮當(dāng)用戶點(diǎn)擊等號(hào)時(shí)，將運(yùn)算結(jié)果顯示在結(jié)果框中.這個(gè)問(wèn)題需要分三步解決：第一，當(dāng)用戶點(diǎn)擊等號(hào)時(shí)，之前點(diǎn)擊的被運(yùn)算數(shù)在結(jié)果框中清除；第二，進(jìn)行數(shù)據(jù)運(yùn)算；第三，將運(yùn)算結(jié)果顯示在結(jié)果框中.這三個(gè)步驟合在一起放在一個(gè)函數(shù)calculate中.
4) 在calculate()函數(shù)中，第一步，清除用戶點(diǎn)擊過(guò)的被運(yùn)算數(shù)，使用document.getElementById("result"). innerHTML = ""語(yǔ)句，跟之前所使用的語(yǔ)句是同樣的道理.第二步，進(jìn)行數(shù)據(jù)運(yùn)算可以使用eval()函數(shù)，此函數(shù)的功能是計(jì)算某個(gè)字符串，并返回計(jì)算結(jié)果，這里可以將其返回結(jié)果存入resultNum中.第三步，將resultNum顯示在結(jié)果框中，仍然是使用的document.getElementById("result").innerHTML = resultNum這條語(yǔ)句.另外，還有一種情況，用戶在計(jì)算完成后，可能不直接清除計(jì)算結(jié)果，而是在當(dāng)前結(jié)果的基礎(chǔ)上繼續(xù)運(yùn)算，所以需要將計(jì)算結(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時(shí)，字符串內(nèi)容清空，并將結(jié)果框中的內(nèi)容清0，這里可以編寫函數(shù)clearData().第一步字符串內(nèi)容清空；第二步，結(jié)果框中顯示0，可以使用語(yǔ)句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)容，該計(jì)算器給出不同的響應(yīng)，比如：當(dāng)用戶點(diǎn)擊"="時(shí)，執(zhí)行計(jì)算函數(shù)；當(dāng)用戶點(diǎn)擊"C"時(shí)，執(zhí)行數(shù)據(jù)清除函數(shù)；當(dāng)用戶點(diǎn)擊其他數(shù)字和運(yùn)算符時(shí)，執(zhí)行數(shù)據(jù)顯示函數(shù).這里可以使用每個(gè)按鈕加一個(gè)onclick屬性，其屬性值為相應(yīng)的響應(yīng)函數(shù)，但這種辦法代碼量較多，不提倡用這種方法.換種方法，可以使用語(yǔ)句document. getElementsByTagName("button")先獲得所有button這些標(biāo)記，然后使用for循環(huán)，給所有按鈕添加鼠標(biāo)點(diǎn)擊響應(yīng)函數(shù).這個(gè)響應(yīng)函數(shù)就要分如上說(shuō)的三種情況了，在這個(gè)響應(yīng)函數(shù)中可以使用switch語(yǔ)句來(lái)解決這個(gè)問(wèn)題，當(dāng)分別點(diǎn)擊"="、"C"和其他數(shù)據(jù)時(shí)執(zhí)行不同的操作，即等于不同的響應(yīng)函數(shù)名.diverseFun(which)代碼如下：
3 總結(jié)
在該實(shí)現(xiàn)方法中用到了JavaScript中的BOM和DOM模型的使用，JavaScript中事件處理函數(shù)以及每個(gè)自定義函數(shù)之間的關(guān)系等等.利用好這些知識(shí)點(diǎn)，可以實(shí)現(xiàn)更加復(fù)雜的計(jì)算器.
猜你喜歡
輻射防護(hù)(2024年6期)2024-12-31 00:00:00
數(shù)學(xué)物理學(xué)報(bào)(2022年6期)2022-12-15 08:46:30
青少年日記·小學(xué)生版(2019年2期)2019-09-02 13:37:38
大連工業(yè)大學(xué)學(xué)報(bào)(2018年4期)2018-07-31 02:51:16
光學(xué)精密工程(2016年6期)2016-11-07 09:07:26
讀寫算(中)(2015年10期)2015-11-07 07:24:10
讀寫算·小學(xué)中年級(jí)版(2015年10期)2015-10-20 16:48:09
小天使·二年級(jí)語(yǔ)數(shù)英綜合(2015年8期)2015-07-06 11:41:58
燕山大學(xué)學(xué)報(bào)(2014年1期)2014-03-11 15:28:11
測(cè)繪科學(xué)與工程(2013年6期)2013-03-11 15:07:57
