html、css、js实现简易计算器
生活随笔
收集整理的這篇文章主要介紹了
html、css、js实现简易计算器
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
?學(xué)習(xí)HTML，CSS，JS一個(gè)月后，想著能自己是否能寫出一個(gè)簡(jiǎn)單的東西，故編寫了簡(jiǎn)易的計(jì)算器，之前也寫過(guò)一個(gè)坦克大戰(zhàn)，坦克大戰(zhàn)的有些基本功能沒(méi)有實(shí)現(xiàn)，
故也沒(méi)有記錄下來(lái)，想來(lái)，對(duì)這行初來(lái)咋到的，還是需要留下些東西供自己日后回憶，于是寫下這篇隨筆；因第一次寫博客，不知道怎么上傳源代碼，也不知道怎么在博客頁(yè)面實(shí)現(xiàn)計(jì)算效果。
下面是完成后計(jì)算器頁(yè)面：
該計(jì)算器只是實(shí)現(xiàn)了簡(jiǎn)易的計(jì)算功能，很多其他功能沒(méi)有實(shí)現(xiàn)，如運(yùn)算的優(yōu)先級(jí)功能，在后面的學(xué)習(xí)中再慢慢改進(jìn)吧！
?
因計(jì)算器布局比較規(guī)整，故用table表格布局，也可以用div或列表來(lái)布局；單元格里加入button標(biāo)簽，整體上大的table里含三列兩行，在單元格里再插入表格；
下面代碼是：大的table里的第一行，包括時(shí)間、計(jì)算結(jié)果、清零和退格。
以下是HTML部分
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>計(jì)算器</title> 6 <link rel="stylesheet" type="text/css" href="計(jì)算器.css"/> 7 <script src="計(jì)算器.js" type="text/javascript" charset="utf-8"></script> 8 </head> 9 <body> 10 <table border="0" cellspacing="0" cellpadding="" id='main'> 11 <tr> 12 <th id='time'> 13 </th> 14 <th > 15 <input type="text" name="" id="result" value="0" /> 16 </th> 17 <th> 18 <input type="button" name="" id="" value="清零" onclick="clean()"/> 19 <input type="button" name="" id="" value="退格" onclick='backspace()'/> 20 </th> 21 </tr>下面代碼是：大的table里的第二行的第一個(gè)單元格（左邊的計(jì)算板塊），單元格內(nèi)加入table表格
1 <tr> 2 <td> 3 <table id="table1"> 4 <tr> 5 <td> 6 <input type="button" name="" id="" value="sin" onclick="calc1('sin')"/> 7 </td> 8 <td> 9 <input type="button" name="" id="" value="cos" onclick="calc1('cos')"/> 10 </td> 11 <td> 12 <input type="button" name="" id="" value="tan" onclick="calc1('tan')"/> 13 </td> 14 </tr> 15 <tr> 16 <td> 17 <input type="button" name="" id="" value="asin" onclick="calc1('asin')"/> 18 </td> 19 <td> 20 <input type="button" name="" id="" value="acos" onclick="calc1('acos')"/> 21 </td> 22 <td> 23 <input type="button" name="" id="" value="atan" onclick="calc1('atan')"/> 24 </td> 25 </tr> 26 <tr> 27 <td> 28 <input type="button" name="" id="" value="PI" onclick="calc1('PI')"/> 29 </td> 30 <td> 31 <input type="button" name="" id="" value="1/X" onclick="calc1('1/x')"/> 32 </td> 33 <td> 34 <input type="button" name="" id="" value="exp" onclick="calc1('exp')"/> 35 </td> 36 </tr> 37 <tr> 38 <td> 39 <input type="button" name="" id="" value="Inx" onclick="calc1('Inx')"/> 40 </td> 41 <td> 42 <input type="button" name="" id="" value="lgx" onclick="calc1('lgx')"/> 43 </td> 44 <td> 45 <input type="button" name="" id="" value="n!" onclick="calc1('n!')"/> 46 </td> 47 </tr> 48 </table> 49 </td>下面代碼是：大的table里的第二行的第二個(gè)單元格（數(shù)字板塊），單元格內(nèi)加入table表格
1 <td> 2 <table id="table2"> 3 <tr> 4 <td> 5 <input type="button" name="" id="" value="7" onclick="num(7)"/> 6 </td> 7 <td> 8 <input type="button" name="" id="" value="8" onclick="num(8)"/> 9 </td> 10 <td> 11 <input type="button" name="" id="" value="9" onclick="num(9)"/> 12 </td> 13 </tr> 14 <tr> 15 <td> 16 <input type="button" name="" id="" value="4" onclick="num(4)"/> 17 </td> 18 <td> 19 <input type="button" name="" id="" value="5" onclick="num(5)"/> 20 </td> 21 <td> 22 <input type="button" name="" id="" value="6" onclick="num(6)"/> 23 </td> 24 </tr> 25 <tr> 26 <td> 27 <input type="button" name="" id="" value="1" onclick="num(1)"/> 28 </td> 29 <td> 30 <input type="button" name="" id="" value="2" onclick="num(2)"/> 31 </td> 32 <td> 33 <input type="button" name="" id="" value="3" onclick="num(3)"/> 34 </td> 35 </tr> 36 <tr> 37 <td> 38 <input type="button" name="" id="" value="0" onclick="num(0)"/> 39 </td> 40 <td> 41 <input type="button" name="" id="" value="." onclick="dian()"/> 42 </td> 43 <td> 44 <input type="button" name="" id="" value="=" onclick="calc('=')"/> 45 </td> 46 </tr> 47 </table> 48 </td>下面代碼是：大的table里的第二行的第三個(gè)單元格（右邊板塊），單元格內(nèi)加入table表格
1 <td> 2 <table id="table3"> 3 <tr> 4 <td> 5 <input type="button" name="" id="" value="+" onclick="calc('+')"/> 6 </td> 7 <td> 8 <input type="button" name="" id="" value="取整" onclick="calc('取整')"/> 9 </td> 10 </tr> 11 <tr> 12 <td> 13 <input type="button" name="" id="" value="-" onclick="calc('-')"/> 14 </td> 15 <td> 16 <input type="button" name="" id="" value="取余" onclick="calc('%')"/> 17 </td> 18 </tr> 19 <tr> 20 <td> 21 <input type="button" name="" id="" value="*" onclick="calc('*')"/> 22 </td> 23 <td> 24 <input type="button" name="" id="" value="x^y" onclick="calc('x^y')"/> 25 </td> 26 </tr> 27 <tr> 28 <td> 29 <input type="button" name="" id="" value="/" onclick="calc('/')"/> 30 </td> 31 <td> 32 <input type="button" name="" id="" value="+/-" onclick="calc('+/-')"/> 33 </td> 34 </tr> 35 </table> 36 </td> 37 </tr> 38 </table> 39 </body> 40 </html>編寫完HTML部分后，對(duì)計(jì)算器按鈕進(jìn)行布局和美化，可以根據(jù)個(gè)人想法設(shè)置
以下是CSS部分：
1 #main{ 2 border: 10px outset orange; 3 margin: 30px auto; 4 background: #ABABAB; 5 box-shadow: 5px 5px #CCCCCC inset; 6 padding-top: 20px; 7 }/*設(shè)置最外層表格樣式*/ 8 th{ 9 height: 40px; 10 border: 2px outset #CCCCCC; 11 } 12 #result{ 13 width: 100%; 14 height: 100%; 15 box-shadow: 3px 3px #CCCCCC inset; 16 text-align: right; 17 font-size: 20px; 18 } 19 [type=button]{ 20 width: 60px; 21 height: 40px; 22 box-shadow: 3px 3px #CCCCCC,3px 3px #CCCCCC inset; 23 background-image:linear-gradient(to top right,#000,#fff);/*設(shè)置按鈕漸變色*/ 24 color: #00FFFF; 25 font-weight: bold; 26 margin: 5px; 27 border-radius: 10px/6px; 28 }/*設(shè)置所有butto的樣式*/ 29 #table1,#table2,#table3{ 30 margin-top: 20px; 31 border: 2px outset #CCCCCC; 32 } 33 [type=button]:hover{ 34 background-image:linear-gradient(to top right,#fff,#000); 35 } 36 #time{ 37 margin: 0; 38 padding: 0; 39 color:#00FFFF; 40 }樣式設(shè)置好后，開始JS部分，實(shí)現(xiàn)簡(jiǎn)易計(jì)算功能
首先定義幾個(gè)全局變量，后面實(shí)現(xiàn)計(jì)算功能時(shí)會(huì)用上
1 var sum=0; 2 var Boo=false;//判斷是否按下計(jì)算符號(hào) 3 var ope;//存儲(chǔ)計(jì)算符號(hào)的變量當(dāng)我們按下數(shù)字鍵的時(shí)候，數(shù)字會(huì)顯示出來(lái)，所以先獲取數(shù)字
1 //獲取數(shù)字 2 function num(Num) { 3 var result=document.getElementById('result'); 4 if (Boo) { 5 result.value=Num; 6 Boo=false;//若接受過(guò)運(yùn)算符，文本框清零 7 }else{ 8 if (result.value=='0') { 9 result.value=Num; 10 } else{ 11 result.value+=Num; 12 } 13 } 14 }這個(gè)時(shí)候，在測(cè)試的時(shí)候，多次點(diǎn)擊小數(shù)點(diǎn)，小數(shù)點(diǎn)會(huì)出現(xiàn)多次，需要避免出現(xiàn)這種情況，indexOf檢索字符，沒(méi)有檢索到時(shí)，返回-1
1 //避免出現(xiàn)兩個(gè)小數(shù)點(diǎn) 2 function dian () { 3 var result=document.getElementById('result'); 4 if (result.value.indexOf('.')==-1) { 5 result.value+='.'; 6 } 7 }清零，可以是重新加載頁(yè)面，也可以將默認(rèn)值設(shè)為零沒(méi)，這里設(shè)置為重新加載；
退格，沒(méi)點(diǎn)一次按鈕，字符長(zhǎng)度減1，當(dāng)為空時(shí)，設(shè)置默認(rèn)值為0；
1 //清零，重新加載頁(yè)面 2 function clean() { 3 location.replace(location) 4 } 5 //退格 6 function backspace() { 7 var result=document.getElementById('result'); 8 result.value=result.value.substring(0,result.value.length-1); 9 if (result.value=='') { 10 result.value=0; 11 } 12 }實(shí)現(xiàn)這些功能后，進(jìn)入簡(jiǎn)易計(jì)算功能，需要用到之前定義的全局變量
首先實(shí)現(xiàn)二元運(yùn)算，如加減乘除等 ，涉及到兩個(gè)數(shù)字的：
1 function calc(op){ 2 var result=document.getElementById('result').value*1; 3 if (result=='') { 4 result=0; 5 } 6 Boo=true; 7 switch (ope){ 8 case '+': 9 sum=sum+result; 10 break; 11 case '-': 12 sum=sum-result; 13 break; 14 case '*': 15 sum=sum*result; 16 break; 17 case '/': 18 sum=sum/result; 19 break; 20 case '取整': 21 sum=Math.floor(sum/result); 22 break; 23 case '%': 24 sum=sum%result; 25 break; 26 case 'x^y': 27 sum=Math.pow(sum,result); 28 break; 29 case '+/-': 30 sum=result*(-1); 31 break; 32 case '=': 33 document.getElementById('result').value=sum; 34 break; 35 default:sum=parseFloat(result); 36 break; 37 } 38 document.getElementById('result').value=sum; 39 ope=op; 40 }接著實(shí)現(xiàn)一元運(yùn)算，首先進(jìn)行角度與弧度的轉(zhuǎn)換，且需要對(duì)浮點(diǎn)數(shù)的計(jì)算進(jìn)行一點(diǎn)簡(jiǎn)單處理：
1 function calc1(op){ 2 var result=document.getElementById('result').value*1; 3 var π=Math.PI*2/360;//角度轉(zhuǎn)換成弧度 4 var deg=360/(Math.PI*2);//弧度轉(zhuǎn)換成角度 5 if (result=='') { 6 result=0; 7 } 8 Boo=true; 9 switch (op){ 10 case 'sin': 11 sum=Math.round(Math.sin(result* π)*100000000000000)/100000000000000; //sum=Math.sin(result* π);Math.round()解決浮點(diǎn)數(shù)運(yùn)算問(wèn)題 12 break; //程序處理浮點(diǎn)數(shù)的時(shí)候，每一次運(yùn)算都會(huì)取一次近似值，所以最終的結(jié)果，總是近似值，而不是我們通過(guò)代數(shù)得出的結(jié)果。 13 case 'cos': 14 sum=Math.round(Math.cos(result* π)*100000000000000)/100000000000000; 15 break; 16 case 'tan': 17 sum=Math.round(Math.tan(result* π)*100000000000000)/100000000000000; 18 break; 19 case 'asin': 20 sum=Math.round(Math.asin(result)*deg*100000000000000)/100000000000000+'°'; 21 break; 22 case 'acos': 23 sum=Math.round(Math.acos(result)*deg*100000000000000)/100000000000000+'°'; 24 break; 25 case 'atan': 26 sum=Math.round(Math.atan(result)*deg*100000000000000)/100000000000000+'°'; 27 break; 28 case 'PI': 29 sum=Math.PI; 30 break; 31 case '1/x': 32 sum=1/parseFloat(result); 33 break; 34 case 'exp': 35 sum=Math.exp(result); 36 break; 37 case 'Inx': 38 sum=Math.log(result); 39 break; 40 case 'lgx': 41 sum=Math.log10(result); 42 break; 43 case 'n!': 44 for (var i=1;i<result;i++) { 45 sum=sum*i; 46 } 47 break; 48 default:sum=parseFloat(result); 49 break; 50 } 51 document.getElementById('result').value=sum; 52 }這樣計(jì)算器的簡(jiǎn)易功能基本就實(shí)現(xiàn)了，最后我們加上時(shí)間，當(dāng)打開頁(yè)面的時(shí)候，出現(xiàn)時(shí)鐘：
1 //設(shè)置時(shí)間 2 window.οnlοad=function(){ 3 showTime(); 4 } 5 function showTime(){ 6 var today=new Date(); 7 var y=today.getFullYear(); 8 var M=today.getMonth()+1; 9 var d=today.getDate(); 10 var h=today.getHours(); 11 var m=today.getMinutes(); 12 var s=today.getSeconds(); 13 m=checkTime(m); 14 s=checkTime(s); 15 var week=today.getDay(); 16 var w=new Array('星期天','星期一','星期二','星期三','星期四','星期五','星期六'); 17 for (var i=0;i<w.length;i++) { 18 document.getElementById('time').innerHTML=y+'年'+M+'月'+d+'日'+'</br>'+h+":"+m+":"+s+' '+w[week]; 19 } 20 setTimeout('showTime()',500); 21 } 22 //數(shù)字小于10時(shí)，前面添加一個(gè)0 23 function checkTime(i){ 24 if (i<10) { 25 i="0" + i; 26 } 27 return i 28 }?
轉(zhuǎn)載于:https://www.cnblogs.com/zou1052265451/p/6652970.html
總結(jié)
以上是生活随笔為你收集整理的html、css、js实现简易计算器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： VI编辑，backspace无法删除解决
- 下一篇： 单纯上传图片