JS快速實(shí)現(xiàn)簡(jiǎn)單計(jì)算器
本文實(shí)例為大家分享了JS實(shí)現(xiàn)簡(jiǎn)單計(jì)算器的具體代碼，供大家參考，具體內(nèi)容如下
直接上圖
HTML部分
<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title>我的第一個(gè)計(jì)算器</title> <link rel='stylesheet' href='http://m.b3g6.com/bcjs/計(jì)算器.css' rel='external nofollow' /> <script src='http://m.b3g6.com/bcjs/計(jì)算器.js'> </script> </head> <body> <h1 style='text-align: center;'>歡迎使用</h1> <!--<audio src='http://m.b3g6.com/bcjs/audio/1.mp3' id='music'> </audio>--> <hr /> <p style='text-align: center;color:#6495ED;'>輸入不要超過(guò)8位數(shù)哦</p> <div class='box'> <div class='header'> <div class='screen'><b id='s1'></b></div> <div class='screen'><b id='s2'></b></div> </div> <div class='content'> <input type='button' name='' value='開(kāi)始' /> <input type='button' name='' value='清零' /> <input type='button' name='' value='刪除' /> <input type='button' name='' value='關(guān)閉' /> <input type='button' name='' value='1' /> <input type='button' name='' value='2' /> <input type='button' name='' value='3' /> <input type='button' name='' value='+' /> <input type='button' name='' value='4' /> <input type='button' name='' value='5' /> <input type='button' name='' value='6' /> <input type='button' name='' value='-' /> <input type='button' name='' value='7' /> <input type='button' name='' value='8' /> <input type='button' name='' value='9' /> <input type='button' name='' value='*' /> <input type='button' name='' value='0' /> <input type='button' name='' value='.' /> <input type='button' name='' value='=' /> <input type='button' name='' value='÷' /> <span style='line-height: 30px;'> 制作人:xxx 監(jiān)督人:xxx </span> </div> </div> </body></html>
CSS部分
* { margin: 0px; padding: 0px;}/*body { background: cornflowerblue;}*/.box { width: 260px; height: 330px; border: 5px solid cornflowerblue; margin: 60px auto; border-radius: 10px;}.header { width: 260px; height: 80px; background:lightcyan;}.screen { width: 260px; height: 40px; background:lightcyan; font-size: 25px; text-align: center;}.content { width: 260px; height: 250px; color: yellowgreen; background: #FAEBD7; text-align: center;}input { text-align: center; width: 60px; height: 40px; background: pink; margin-top: 4px; font-size: 15px;}b { color: fuchsia;}
JS部分
window.onload = function() { function $(id) { return document.getElementById(id); } function put1(id){ $(id).onclick = function() { $('s1').innerHTML = $('s1').innerHTML+this.value; if ($('s1').innerHTML==116) { prompt('你愛(ài)我嗎'); $('s1').innerHTML = '嘻嘻' } if ($('s1').innerHTML==1129) { alert('我愛(ài)你'); } if ($('s1').innerHTML==1314520) { alert('我愛(ài)你'); } } } var result; $('b=').onclick = function() { result = eval($('s1').innerHTML); $('s2').innerHTML = '='+result; } $('start').onclick = function() { $('s1').innerHTML = '歡迎使用'; $('s2').innerHTML = '使用前清零'; $('music').play(); } $('clear').onclick = function() { $('s1').innerHTML = ''; $('s2').innerHTML = ''; } $('stop').onclick = function() { $('s1').innerHTML = '再見(jiàn)'; setTimeout(function() { $('s1').innerHTML = ''; $('s2').innerHTML = ''; },3000); $('music').pause(); } $('del').onclick = function() { $('s1').innerHTML = $('s1').innerHTML.substr(0, $('s1').innerHTML.length - 1); } put1('b1'); put1('b2'); put1('b3'); put1('b4'); put1('b5'); put1('b6'); put1('b7'); put1('b8'); put1('b9'); put1('b0'); put1('b+'); put1('b-'); put1('bx'); put1('b÷'); put1('b.');}
更多計(jì)算器功能實(shí)現(xiàn)，請(qǐng)點(diǎn)擊專題： 計(jì)算器功能匯總 進(jìn)行學(xué)習(xí)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Java commons-httpclient如果實(shí)現(xiàn)get及post請(qǐng)求2. 一文帶你徹底理解Java序列化和反序列化3. JS中6個(gè)對(duì)象數(shù)組去重的方法4. Python基于requests庫(kù)爬取網(wǎng)站信息5. vscode運(yùn)行php報(bào)錯(cuò)php?not?found解決辦法6. python中文本字符處理的簡(jiǎn)單方法記錄7. PHP laravel實(shí)現(xiàn)導(dǎo)出PDF功能8. Python使用Selenium自動(dòng)進(jìn)行百度搜索的實(shí)現(xiàn)9. PHP利用curl發(fā)送HTTP請(qǐng)求的實(shí)例代碼10. 資深程序員：給Python軟件開(kāi)發(fā)測(cè)試的25個(gè)忠告！
網(wǎng)公網(wǎng)安備