JS制作簡(jiǎn)易計(jì)算器的實(shí)例代碼
做一個(gè)簡(jiǎn)易計(jì)算器，效果圖片
c表示清空，為一個(gè)空字符串
+/-表示該值為正還是負(fù)
%表示當(dāng)前值/100
←表示退格，往前刪除一個(gè)值
eval 函數(shù)是能夠計(jì)算出字符串表達(dá)式或者語句的結(jié)果，把結(jié)果求出來。
代碼如下
<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title></title> <style type='text/css'> #div1{ margin:20px auto; width:420px; height:490px; background-color:#E8E8E8; border:1px solid #ccc; border-radius:5px; } .div2{ width:410px; height:60px; border:1px solid #ccc; margin:5px auto; border-radius:5px; text-align:right; font-size:30px; background-color:white; padding-top:10px; } .div3{ width:410px; height:60px; margin:5px auto; float:left; } .div13{ float:left; width:70px; height:60px; border:1px solid #ccc; background-color: ghostwhite; margin-left:8px; text-align:center; font-size:30px; color:deepskyblue; border-radius:5px; cursor:default; padding-top:10px; box-shadow:4px 3px 3px #CCCCCC; } .div133{width:160px;} .top{margin-top:10px;margin-left:10px;} .color{color:black;} .top1{margin-top:20px;margin-left:10px;} .top2{margin-top:30px;margin-left:10px;} .top3{margin-top:40px ;margin-left:10px;} .div23{float:left;} .div33{float:left;} </style> </head> <body> <div id='div1'> <div id='input'><b>0</b></div> <div class='div3'> <div onclick='w(’ ’)'><b>C</b></div> <div class='div13'onclick='w(’opposite’)'><b>+/-</b></div> <div onclick='w(’percent’)'><b>%</b></div> <div onclick='w(’backspace’)'><b>←</b></div> </div> <div class='div3'> <div onclick='a(’7’)'><b>7</b></div> <div onclick='a(’8’)'><b>8</b></div> <div onclick='a(’9’)'><b>9</b></div> <div onclick='a(’+’)'><b>+</b></div> <div onclick='a(’-’)'><b>-</b></div> </div> <div class='div3'> <div onclick='a(’4’)'><b>4</b></div> <div class='div13 top1 color'onclick='a(’5’)'><b>5</b></div> <div onclick='a(’6’)'><b>6</b></div> <div onclick='a(’*’)'><b>×</b></div> <div onclick='a(’/’)'><b>÷</b></div> </div> <div class='div3'> <div onclick='a(’1’)'><b>1</b></div> <div onclick='a(’2’)'><b>2</b></div> <div class='div13 top2 color'onclick='a(’3’)'><b>3</b></div> <div class='div13 top2'onclick='w(’pow’)'><b>x<sup>2</sup></b></div> <div onclick='w(’sqrt’)'><b>√</b></div> </div> <div class='div3'> <div onclick='a(’0’)'><b>0</b></div> <div class='div13 top3'onclick='a(’.’)'><b>.</b></div> <div class='div13 top3'onclick='e(’=’)'><b>=</b></div> </div> </div> <script> input=document.getElementById('input'); s=''; function a(v) { s=s+v; input.innerHTML=s; } function e(v) { input.innerHTML=eval(s); }function w(type) { switch(type) { case ’ ’:s=’’;break; case ’opposite’:s=-s;break; case ’percent’:s=s/100;break; case ’pow’:s=Math.pow(s,2);break; case ’sqrt’:s=Math.sqrt(s);break; case ’backspace’:s=s.substr(s,s.length-1);// case ’backspace’:s=s.substring(0,s.length-1); } input.innerHTML=s; } </script> </body></html>
這里我本來是采用的substring這個(gè)函數(shù)的，但是在計(jì)算的時(shí)候，當(dāng)只留下一個(gè)值的時(shí)候，按←的時(shí)候就不起作用，但是把substring改成substr的時(shí)候就能清除的了，原因我覺得應(yīng)該是這樣:s=s.substring(s,s.length-1);當(dāng)只剩下一個(gè)值的時(shí)候，假設(shè)s值為7,substring中的第一個(gè)參數(shù)為是，表示中國(guó)字符串的首地址，就是0，第二個(gè)參數(shù)為0，怎么取，但是換成這樣是可以的s=s.substring(0,s.length-1);，但是用s=s.substr(s,s.length-1);當(dāng)只剩下一個(gè)值的時(shí)候是可以清除掉的，我想應(yīng)該是當(dāng)?shù)诙€(gè)參數(shù)是取得個(gè)數(shù)為0的時(shí)候，就把空字符串賦給s了吧。
以上就是JS制作簡(jiǎn)易計(jì)算器的實(shí)例代碼的詳細(xì)內(nèi)容，更多關(guān)于JS制作簡(jiǎn)易計(jì)算器的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. vue使用moment如何將時(shí)間戳轉(zhuǎn)為標(biāo)準(zhǔn)日期時(shí)間格式2. bootstrap select2 動(dòng)態(tài)從后臺(tái)Ajax動(dòng)態(tài)獲取數(shù)據(jù)的代碼3. js select支持手動(dòng)輸入功能實(shí)現(xiàn)代碼4. php redis setnx分布式鎖簡(jiǎn)單原理解析5. 《Java程序員修煉之道》作者Ben Evans：保守的設(shè)計(jì)思想是Java的最大優(yōu)勢(shì)6. CSS3中Transition屬性詳解以及示例分享7. Python數(shù)據(jù)相關(guān)系數(shù)矩陣和熱力圖輕松實(shí)現(xiàn)教程8. 如何在PHP中讀寫文件9. java加載屬性配置properties文件的方法10. 什么是Python變量作用域
網(wǎng)公網(wǎng)安備