JS實(shí)現(xiàn)蘋(píng)果計(jì)算器
本文實(shí)例為大家分享了JS實(shí)現(xiàn)蘋(píng)果計(jì)算器的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title>手機(jī)</title> <style type='text/css'> #phone{ position: relative; width: 380px; height: 700px; box-shadow: 1px 1px 10px #808080; margin: auto; border-radius: 30px; } .kj{ position: absolute; width: 8px; height: 60px; background-color: black; right: -8px ; top:100px; } .yl{ position: absolute; width: 8px; height: 80px; background-color: black; left: -8px; top: 85px; } .top{ width: 120px; height: 50px; /* box-shadow: 1px 1px 10px #808080; */ margin: auto; } .mkf{ float: left; width: 100px; height: 10px; border-radius: 5px; background-color: black; margin-right: 10px; margin-top: 20px; } .sxj{ float: left; width: 10px; height: 10px; border-radius: 5px; background-color: black; margin-top: 20px; } .screen{ width: 370px ; height: 600px; background-color: black; margin: auto; } .result-num{ height: 120px; /* padding-top: 30px; */ } .sp{ float: right; color: white; font-size: 50px; margin-top: 50px; } .num{ height: 480px; } .key{ width: 82.5px; height: 82.5px; border-radius: 50px; background-color: #808080; float: left; margin: 5px; text-align: center; line-height: 80px; font-size: 20px; color: white; } .first{ background-color: #B0B0B0; color: black; } .second{ background-color: orange; } .third{ width: 175px; } .home{ width: 45px; height: 45px; border-radius: 25px; background-color: #B0B0B0; margin: 3px auto 0px auto; } </style> </head> <body> <div id='phone'> <!--開(kāi)機(jī)鍵--> <div class='kj'></div> <!--音量--> <div class='yl'></div> <!-- 手機(jī)頂部 --> <div class='top'> <!-- 麥克風(fēng) --> <div class='mkf'></div> <!-- 攝像頭 --> <div class='sxj'></div> </div> <!-- 屏幕 --> <div class='screen'> <div class='result-num'> <span class='sp'>0</span> </div><div class='num'> <div onclick='clearCompute()'>AC</div> <div onclick='deleteLastNum()'>←</div> <div class='key first'>%</div> <div onclick='fun(’/’)'>/</div> <div onclick='fun(7)'>7</div> <div onclick='fun(8)'>8</div> <div onclick='fun(9)'>9</div> <div onclick='fun(’*’)'>*</div> <div onclick='fun(4)'>4</div> <div onclick='fun(5)'>5</div> <div onclick='fun(6)'>6</div> <div onclick='fun(’-’)'>-</div> <div onclick='fun(1)'>1</div> <div onclick='fun(2)'>2</div> <div onclick='fun(3)'>3</div> <div onclick='fun(’+’)'>+</div> <div onclick='fun(0)'>0</div> <div onclick='fun(’.’)'>.</div> <div onclick='compute()'>=</div> </div> </div> <!-- home鍵 --> <div class='home'> </div> </div> <script type='text/javascript'> var span = document.querySelector('.sp'); /** * @param {Object} num * 點(diǎn)擊數(shù)字鍵盤(pán) 將數(shù)字替換到我們的span標(biāo)簽內(nèi)部 */ function fun(num){ var value = span.innerText; if(value == 0){ span.innerText = num; }else{ span.innerText = span.innerText.concat(num); } } /** * 計(jì)算結(jié)果的 */ function compute(){ var value = span.innerText; var result= eval(value); span.innerText = result; } /** * 清空計(jì)算區(qū)域 重置為0 */ function clearCompute(){ span.innerText='0'; } /** * 刪除計(jì)算區(qū)域的最后一個(gè)字符 */ function deleteLastNum(){ var value = span.innerText; console.log(typeof(value)) if(value == 0){} else{ /** * value是一個(gè)字符串 * zs123 * 字節(jié)：文本在計(jì)算器底層存儲(chǔ)的時(shí)候都是字節(jié)存儲(chǔ)的 編碼集 將字符轉(zhuǎn)成特定的字節(jié)在計(jì)算機(jī)上存儲(chǔ)的 * 字符：人類(lèi)能看懂的一個(gè)字母 或者一個(gè)中文漢字 * a b 中 國(guó) aj * * 字符串就是一個(gè)一個(gè)字符組成的一個(gè)集合體 字符串String提供了很多常用的方法 以便我們對(duì)這個(gè)字符數(shù)組進(jìn)行相關(guān)操作 */ if(value.length!=1){ span.innerText = value.substring(0,value.length-1) }else{ span.innerText='0'; } } } </script> </body></html>
效果圖：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Gitlab CI-CD自動(dòng)化部署SpringBoot項(xiàng)目的方法步驟2. 基于javascript處理二進(jìn)制圖片流過(guò)程詳解3. ajax請(qǐng)求添加自定義header參數(shù)代碼4. Java Lock接口實(shí)現(xiàn)原理及實(shí)例解析5. 詳談ajax返回?cái)?shù)據(jù)成功 卻進(jìn)入error的方法6. axios和ajax的區(qū)別點(diǎn)總結(jié)7. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)8. 淺談SpringMVC jsp前臺(tái)獲取參數(shù)的方式 EL表達(dá)式9. ASP中解決“對(duì)象關(guān)閉時(shí),不允許操作。”的詭異問(wèn)題……10. 利用CSS3新特性創(chuàng)建透明邊框三角
網(wǎng)公網(wǎng)安備