javascript實(shí)現(xiàn)簡(jiǎn)易的計(jì)算器
利用javascript實(shí)現(xiàn)簡(jiǎn)易的計(jì)算器，供大家參考，具體內(nèi)容如下
1、先構(gòu)思整個(gè)計(jì)算器的模式以及想要實(shí)現(xiàn)的功能，按模塊創(chuàng)建相應(yīng)的div，在“head”中設(shè)置其樣式和布局。
2、用“input”標(biāo)簽創(chuàng)建text類(lèi)型，置為輸出框；依次創(chuàng)建buttom類(lèi)型，置為按鈕，內(nèi)容為1、2、3……；創(chuàng)建“=”，并在input中對(duì)他進(jìn)行點(diǎn)擊事件“οnclick=”result()””.
3、添加script，利用var定義class里面的值,并賦值給一個(gè)新的變量，
4、編寫(xiě)for循環(huán)語(yǔ)句，執(zhí)行代碼內(nèi)容
5、最后添加result函數(shù)，執(zhí)行結(jié)果。
源代碼如下（自行設(shè)置style的值）：
<body><div class="contour">
<div class="screen">
<input class="text" type="text" value=''οnfοcus="this.blur();">
</div>
<div class="click">
<div>
<input class="bt t" type="button" value="1">
<input class="bt t" type="button" value='2'>
<input class="bt t" type="button" value='3'>
<input class="bt t" type="button" value='+'>
</div>
<div>
<input class="bt t" type="button" value='4'>
<input class="bt t" type="button" value='5'>
<input class="bt t" type="button" value='6'>
<input class="bt t" type="button" value='-'>
</div>
<div>
<input class="bt t" type="button" value='7'>
<input class="bt t" type="button" value='8'>
<input class="bt t" type="button" value='9'>
<input class="bt t" type="button" value='*'>
</div>
<div>
<input class="bt t" type="button" value='#'>
<input class="bt t" type="button" value='0'>
<input id="result" class="t" type="button" value='=' onclick="result()">
<input class="bt t" type="button" value='/'>
</div>
</div>
</div>
<script>
var btnArr = document.getElementsByClassName("bt");
// var result=document.getElementById("result");
var text = document.getElementsByClassName("text")[0];
// console.log(btnArr)
// 用js給某一個(gè)元素添加click事件
// btnArr[0].οnclick=function(){
// alert()
// }
// for循環(huán)添加click事件
// input的value指的是 input的值
var showNum=''
//alert(btnArr[1].value);
for(var i=0;i<btnArr.length;i++){
btnArr[i].οnclick=function(){
showNum =showNum+this.value;
text.value = showNum;
}
}
function result(){
text.value=eval(showNum)
}
</script>
</body>
關(guān)于計(jì)算器的精彩文章請(qǐng)查看《計(jì)算器專(zhuān)題》 ，更多精彩等你來(lái)發(fā)現(xiàn)！
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
細(xì)說(shuō)JavaScript中的this指向與綁定規(guī)則
本文主要詳細(xì)介紹了JavaScript中的this指向與綁定規(guī)則，默認(rèn)綁定，隱式綁定，顯示綁定，new綁定這四個(gè)規(guī)則，文中有相關(guān)的代碼示例供大家參考，感興趣的同學(xué)可以閱讀下2023-05-05
js實(shí)現(xiàn)快速分享功能(你的文章分享工具)
這是一款簡(jiǎn)單易用的文章分享工具，您只需將下面的html代碼拷貝到模板中就可以實(shí)現(xiàn)文章快速分享功能，具體的實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-06-06
Javascript 判斷 object 的特定類(lèi)轉(zhuǎn)載
Javascript 判斷 object 的特定類(lèi)轉(zhuǎn)載...2007-02-02
javascript中for...of和for..in循環(huán)的區(qū)別
JS中循環(huán)語(yǔ)句眾多，你是否也有用的時(shí)候突然不知道用哪個(gè)的經(jīng)歷，本文主要介紹了javascript中for...of和for..in循環(huán)的區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
webpack 如何同時(shí)輸出壓縮和未壓縮的文件的實(shí)現(xiàn)步驟
這篇文章主要介紹了webpack 如何同時(shí)輸出壓縮和未壓縮的文件的實(shí)現(xiàn)步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了淺談JS中this在各個(gè)場(chǎng)景下的指向，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
javascript實(shí)現(xiàn)在指定元素中垂直水平居中
當(dāng)談到網(wǎng)頁(yè)的布局中，居中問(wèn)題一直得不到很有效的解決，居中通常是相對(duì)于某一個(gè)元素的，比如我們經(jīng)常所說(shuō)的屏幕居中的問(wèn)題，我們了解父元素的信息越多，我們就越能更加容易的實(shí)現(xiàn)居中布局。下面我們通過(guò)具體的實(shí)例來(lái)看看javascript如何來(lái)實(shí)現(xiàn)垂直水平居中2015-09-09
layui技巧：下拉框未展示問(wèn)題;下拉框的onchange事件處理;關(guān)閉彈出層,重新加載父頁(yè)面;父頁(yè)面如何傳遞參數(shù)給彈出層的iframe頁(yè)面;表單元素處于禁用狀態(tài);表單提交如何獲取表單元素值集合;數(shù)據(jù)表格固定列;帶搜索的下拉框;表單提交阻止頁(yè)面跳轉(zhuǎn);父頁(yè)面和子窗口傳遞值2024-07-07
前端實(shí)現(xiàn)電子簽名的步驟及注意事項(xiàng)
本文詳細(xì)介紹了前端技術(shù)中電子簽名的實(shí)現(xiàn)方法,包括技術(shù)選型如HTML5?Canvas和SVG,以及實(shí)現(xiàn)步驟和數(shù)據(jù)安全措施,電子簽名確保了法律效力和數(shù)據(jù)的安全性,適用于多種文件簽署需求,需要的朋友可以參考下2024-11-11
javascript之學(xué)會(huì)吝嗇 精簡(jiǎn)代碼
前端開(kāi)發(fā)，要學(xué)會(huì)吝嗇:2010-04-04