基于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.4tl426be.cn/bcjs/style.css' rel='external nofollow' > <script type='text/javascript' src='http://m.4tl426be.cn/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);};
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. python利用os模塊編寫文件復(fù)制功能——copy()函數(shù)用法2. php測(cè)試程序運(yùn)行速度和頁面執(zhí)行速度的代碼3. php網(wǎng)絡(luò)安全中命令執(zhí)行漏洞的產(chǎn)生及本質(zhì)探究4. 三個(gè)不常見的 HTML5 實(shí)用新特性簡(jiǎn)介5. 無線標(biāo)記語言(WML)基礎(chǔ)之WMLScript 基礎(chǔ)第1/2頁6. ajax請(qǐng)求添加自定義header參數(shù)代碼7. Python使用jupyter notebook查看ipynb文件過程解析8. 解決Python 進(jìn)程池Pool中一些坑9. 解決python腳本中error: unrecognized arguments: True錯(cuò)誤10. IntelliJ IDEA創(chuàng)建普通的Java 項(xiàng)目及創(chuàng)建 Java 文件并運(yùn)行的教程
網(wǎng)公網(wǎng)安備