基于html+css+js實(shí)現(xiàn)簡(jiǎn)易計(jì)算器代碼實(shí)例
使用html+css+js實(shí)現(xiàn)簡(jiǎn)易計(jì)算器，
效果圖如下：
html代碼如下
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <title>calculator</title> <link rel='stylesheet' type='text/css' href='http://m.b3g6.com/bcjs/style.css' rel='external nofollow' > <script type='text/javascript' src='http://m.b3g6.com/bcjs/contain.js'></script> <title>Document</title></head><body> <div class='calculator'> <form name='calculator'> <input type='text' value=''> <br> <input type='button' value='TYNAM'> <input type='button' value='AC' onclick='cleardisplay();'> <input type='button' value='<-' onclick='del();'> <input type='button' value='/' onclick='get(this.value);'> <br> <input type='button' value='7' onclick='get(this.value);'> <input type='button' value='8' onclick='get(this.value);'> <input type='button' value='9' onclick='get(this.value);'> <input type='button' value='*' onclick='get(this.value);'> <br> <input type='button' value='4' onclick='get(this.value);'> <input type='button' value='5' onclick='get(this.value);'> <input type='button' value='6' onclick='get(this.value);'> <input type='button' value='+' onclick='get(this.value);'> <br> <input type='button' value='1' onclick='get(this.value);'> <input type='button' value='2' onclick='get(this.value);'> <input type='button' value='3' onclick='get(this.value);'> <input type='button' value='-' onclick='get(this.value);'> <br> <input type='button' value='0' onclick='get(this.value);'> <input type='button' value='.' onclick='get(this.value);'> <input type='button' value='=' onclick='calculates();'> </form> </div> </body></html>
CSS代碼如下：
* { border: none; font-family: ’Open Sans’, sans-serif; margin: 0; padding: 0;}.calculator { background-color: #fff; height: 600px; margin: 50px auto; width: 600px;}form { background-color: rgb(75, 70, 71); padding: 5px 1px auto; width: 245px;}.btn { outline: none; cursor: pointer; font-size: 20px; height: 45px; margin: 5px 0 5px 10px; width: 45px; }.btn:first-child { margin: 5px 0 5px 10px;}#display { outline: none; background-color: #dededc; color: rgb(75, 70, 71); font-size: 40px; height: 47px; text-align: right; width: 224px; margin: 10px 10px auto;}.number { background-color: rgb(143, 140, 140); color: #dededc;}.operator { background-color: rgb(239, 141, 49); color: #ffffff;}.equal{ width: 105px;}.txt{ font-size:12px; background: none;}
JS代碼如下：
/* display clear */ function cleardisplay() { document.getElementById('display').value = '';}/* del */function del() { var numb = ''; numb = document.getElementById('display').value; for(i=0;i<numb.length;i++) { document.getElementById('display').value = numb.substring(0,numb.length-1); if(numb == ’’) { document.getElementById('display').value = ’’; } }} /* recebe os valores */function get(value) { document.getElementById('display').value += value; } /* calcula */function calculates() { var result = 0; result = document.getElementById('display').value; document.getElementById('display').value = ''; document.getElementById('display').value = eval(result);};
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. JS中6個(gè)對(duì)象數(shù)組去重的方法2. Java commons-httpclient如果實(shí)現(xiàn)get及post請(qǐng)求3. 資深程序員：給Python軟件開發(fā)測(cè)試的25個(gè)忠告！4. 一文帶你徹底理解Java序列化和反序列化5. PHP程序員簡(jiǎn)單的開展服務(wù)治理架構(gòu)操作詳解(二)6. PHP利用curl發(fā)送HTTP請(qǐng)求的實(shí)例代碼7. Python基于requests庫爬取網(wǎng)站信息8. vscode運(yùn)行php報(bào)錯(cuò)php?not?found解決辦法9. PHP laravel實(shí)現(xiàn)導(dǎo)出PDF功能10. python中文本字符處理的簡(jiǎn)單方法記錄
網(wǎng)公網(wǎng)安備