javascript白色簡(jiǎn)潔計(jì)算器
本文中計(jì)算器代碼很簡(jiǎn)單,你可以很容易把該網(wǎng)頁特效應(yīng)用到你的項(xiàng)目中。
HTML
首先我們?cè)诰W(wǎng)頁上放置一個(gè)輸入框及多個(gè)計(jì)算器按鈕。
<div id="calcuator"> <input type="text" id="input-box" value="0" size="21" maxlength="21" readonly="readonly" /> <div id="btn-list"> <div onclick="operator('clear')" class=" btn-30 btn-radius color-red clear-marginleft"> C</div> <div onclick="operator('opposite')" class=" btn-30 btn-radius color-blue"> +/-</div> <div onclick="operator('percent')" class=" btn-30 btn-radius color-blue"> %</div> <div onclick="operator('backspace')" class=" btn-70 btn-radius color-red font-14"> ←</div> <div onclick="typetoinput('7')" class=" btn-30 btn-radius clear-marginleft"> 7</div> <div onclick="typetoinput('8')" class=" btn-30 btn-radius"> 8</div> <div onclick="typetoinput('9')" class=" btn-30 btn-radius"> 9</div> <div onclick="operator('plus')" class=" btn-30 btn-radius color-blue font-14"> +</div> <div onclick="operator('minus')" class=" btn-30 btn-radius color-blue font-14"> -</div> <div onclick="typetoinput('4')" class=" btn-30 btn-radius clear-marginleft"> 4</div> <div onclick="typetoinput('5')" class=" btn-30 btn-radius"> 5</div> <div onclick="typetoinput('6')" class=" btn-30 btn-radius"> 6</div> <div onclick="operator('multiply')" class=" btn-30 btn-radius color-blue font-14"> ×</div> <div onclick="operator('divide')" class=" btn-30 btn-radius color-blue font-12"> ÷</div> <div onclick="typetoinput('1')" class=" btn-30 btn-radius clear-marginleft"> 1</div> <div onclick="typetoinput('2')" class=" btn-30 btn-radius"> 2</div> <div onclick="typetoinput('3')" class=" btn-30 btn-radius"> 3</div> <div onclick="operator('pow')" class=" btn-30 btn-radius color-blue font-14"> ײ</div> <div onclick="operator('sqrt')" class=" btn-30 btn-radius color-blue font-12"> √</div> <div onclick="typetoinput('0')" class=" btn-70 btn-radius clear-marginleft"> 0</div> <div onclick="typetoinput('.')" class=" btn-30 btn-radius"> .</div> <div onclick="operator('result')" class=" btn-70 btn-radius color-red font-14"> =</div> </div> </div>
js
根據(jù)操作類型作相應(yīng)操作:
function operator(type) { switch (type) { case "clear": input.value = "0"; _string.length = 0; /*document.getElementById("ccc").innerHTML=""; for(i=0;i<_string.length;i++) { document.getElementById("ccc").innerHTML+=_string[i]+" " }*/ break; case "backspace": if (checknum(input.value) != 0) { input.value = input.value.replace(/.$/, ''); if (input.value == "") { input.value = "0"; } } break; case "opposite": if (checknum(input.value) != 0) { input.value = -input.value; } break; case "percent": if (checknum(input.value) != 0) { input.value = input.value / 100; } break; case "pow": if (checknum(input.value) != 0) { input.value = Math.pow(input.value, 2); } break; case "sqrt": if (checknum(input.value) != 0) { input.value = Math.sqrt(input.value); } break; case "plus": if (checknum(input.value) != 0) { _string.push(input.value); _type = "plus"input.value = "+"; input.name = "type"; } break; case "minus": if (checknum(input.value) != 0) { _string.push(input.value); _type = "minus"input.value = "-"; input.name = "type"; } break; case "multiply": if (checknum(input.value) != 0) { _string.push(input.value); _type = "multiply"input.value = "×"; input.name = "type"; } break; case "divide": if (checknum(input.value) != 0) { _string.push(input.value); _type = "divide"input.value = "÷"; input.name = "type"; } break; case "result": if (checknum(input.value) != 0) { _string.push(input.value); if (parseInt(_string.length) % 2 != 0) { _string.push(_string[_string.length - 2]) } if (_type == "plus") { input.value = parseFloat(result(_string)[0]) + parseFloat(result(_string)[1]); input.name = "type" } else if (_type == "minus") { input.value = parseFloat(result(_string)[0]) - parseFloat(result(_string)[1]); input.name = "type" } else if (_type == "multiply") { input.value = parseFloat(result(_string)[0]) * parseFloat(result(_string)[1]); input.name = "type" } else if (_type == "divide") { input.value = parseFloat(result(_string)[0]) / parseFloat(result(_string)[1]); input.name = "type" } break; } } }
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
- 簡(jiǎn)易js代碼實(shí)現(xiàn)計(jì)算器操作
- 用JS寫的簡(jiǎn)單的計(jì)算器實(shí)現(xiàn)代碼
- javascript-簡(jiǎn)單的計(jì)算器實(shí)現(xiàn)步驟分解(附圖)
- js網(wǎng)頁版計(jì)算器的簡(jiǎn)單實(shí)現(xiàn)
- 基于JSP實(shí)現(xiàn)一個(gè)簡(jiǎn)單計(jì)算器的方法
- js實(shí)現(xiàn)模擬計(jì)算器退格鍵刪除文字效果的方法
- javascript簡(jiǎn)單計(jì)算器 可美化
- JSP實(shí)現(xiàn)計(jì)算器功能(網(wǎng)頁版)
- javascript實(shí)現(xiàn)簡(jiǎn)易計(jì)算器的代碼
- 用js編寫的簡(jiǎn)單的計(jì)算器代碼程序
- JS實(shí)現(xiàn)的簡(jiǎn)單四則運(yùn)算計(jì)算器功能示例
相關(guān)文章
js使用removeChild方法動(dòng)態(tài)刪除div元素
本節(jié)為大家介紹了js使用removeChild方法動(dòng)態(tài)刪除div元素,需要的朋友可以參考下2014-08-08微信小程序webview實(shí)現(xiàn)長(zhǎng)按點(diǎn)擊識(shí)別二維碼功能示例
這篇文章主要介紹了微信小程序webview實(shí)現(xiàn)長(zhǎng)按點(diǎn)擊識(shí)別二維碼功能,結(jié)合實(shí)例形式分析了webview二維碼識(shí)別相關(guān)操作技巧,需要的朋友可以參考下2019-01-01微信公眾平臺(tái) 客服接口發(fā)消息的實(shí)現(xiàn)代碼(Java接口開發(fā))
這篇文章主要介紹了微信公眾平臺(tái) 客服接口發(fā)消息的實(shí)現(xiàn)代碼(Java接口開發(fā)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04js實(shí)現(xiàn)hashtable的賦值、取值、遍歷操作實(shí)例詳解
這篇文章主要介紹了js實(shí)現(xiàn)hashtable的賦值、取值、遍歷操作,結(jié)合實(shí)例形式分析了哈希表的原理、哈希鍵值對(duì)操作相關(guān)技巧,需要的朋友可以參考下2016-12-12es6 javascript對(duì)象Object.values() , Object.entr
這篇文章主要介紹了es6 javascript對(duì)象Object.values() , Object.entries()的示例代碼,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-12-12直接拿來用的頁面跳轉(zhuǎn)進(jìn)度條JS實(shí)現(xiàn)
這篇文章主要為大家分享了一款直接拿來用的頁面跳轉(zhuǎn)進(jìn)度條,由javascript實(shí)現(xiàn),可以直接跳轉(zhuǎn)到相應(yīng)頁面,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-01-01