js實(shí)現(xiàn)計(jì)算器功能
本文實(shí)例為大家分享了js實(shí)現(xiàn)計(jì)算器功能的具體代碼，供大家參考，具體內(nèi)容如下
知識(shí)點(diǎn)
eval() 函數(shù)可計(jì)算某個(gè)字符串，并執(zhí)行其中的的 JavaScript 代碼。
代碼如下
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>js計(jì)算器</title> <link href='http://www.piao2010.com/css/計(jì)算器.css' rel='stylesheet'></head><body><h1 class='h1'>計(jì)算器</h1> <div class='box'> <form name='calculator'> <input type='button' value='C'> <input type='text' id='display'> <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='get(this.value);'> <input type='button' value='=' onclick='calculates();'> </form> <div><script src='http://www.piao2010.com/js/計(jì)算器.js'></script></body></html>
.h1{ position: relative; color:blueviolet; font-size:50px; text-align: center; top:50px;}.box{ width:500px; position: relative; top: 100px; left:50%; margin-left: -250px; text-align: center; background: #495678; padding:80px 0; border-radius: 20px; box-shadow: 4px 4px #3d4a65;}.btn{ background:rgba(255,192,203,0.8); border: 1px solid pink; cursor:pointer; outline:none; font-size:30px; margin:10px 15px; height: 70px; width: 70px; box-shadow: 0 5px #1a1313de;}.btn:active{ transform: translateY(2px);}.btn:first-child{ margin-left:-300px;}#display{ overflow: hidden; box-sizing: border-box; padding-right:18px; text-align: right; outline: none; border:1px solid #4caf50; color:yellow; font-size: 30px; width:280px; position: absolute; height: 50px; top:95px; right:55px; background-color: #4caf50;}#display,.btn,.box{ border-radius:35px;}.operator{ background:orange;}.other{ background:white;}
//清空 document.getElementById('clear').addEventListener('click',function(){ document.getElementById('display').value=''; });//運(yùn)算 function get(value) { document.getElementById('display').value+=value; } //結(jié)果 function calculates() { var result=0; result=document.getElementById('display').value; document.getElementById('display').value = eval(result); }
效果圖
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. ASP中實(shí)現(xiàn)字符部位類似.NET里String對(duì)象的PadLeft和PadRight函數(shù)2. XML解析錯(cuò)誤：未組織好 的解決辦法3. 小技巧處理div內(nèi)容溢出4. CSS可以做的幾個(gè)令你嘆為觀止的實(shí)例分享5. 得到XML文檔大小的方法6. ASP動(dòng)態(tài)網(wǎng)頁制作技術(shù)經(jīng)驗(yàn)分享7. 解析原生JS getComputedStyle8. 淺談?dòng)蓀osition屬性引申的css進(jìn)階討論9. ASP實(shí)現(xiàn)加法驗(yàn)證碼10. 詳解瀏覽器的緩存機(jī)制
網(wǎng)公網(wǎng)安備