JS快速實現(xiàn)簡單計算器
更新時間：2020年04月08日 08:31:19 作者：小屠的博客
這篇文章主要為大家詳細介紹了JS快速實現(xiàn)簡單計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(xiàn)簡單計算器的具體代碼，供大家參考，具體內容如下
直接上圖
HTML部分
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的第一個計算器</title> <link rel="stylesheet" href="計算器.css" rel="external nofollow" /> <script src="計算器.js"> </script> </head> <body> <h1 style="text-align: center;">歡迎使用</h1> <!--<audio src="audio/1.mp3" id="music"> </audio>--> <hr /> <p style="text-align: center;color:#6495ED;">輸入不要超過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="" id="start" value="開始" /> <input type="button" name="" id="clear" value="清零" /> <input type="button" name="" id="del" value="刪除" /> <input type="button" name="" id="stop" value="關閉" /> <input type="button" name="" id="b1" value="1" /> <input type="button" name="" id="b2" value="2" /> <input type="button" name="" id="b3" value="3" /> <input type="button" name="" id="b+" value="+" /> <input type="button" name="" id="b4" value="4" /> <input type="button" name="" id="b5" value="5" /> <input type="button" name="" id="b6" value="6" /> <input type="button" name="" id="b-" value="-" /> <input type="button" name="" id="b7" value="7" /> <input type="button" name="" id="b8" value="8" /> <input type="button" name="" id="b9" value="9" /> <input type="button" name="" id="bx" value="*" /> <input type="button" name="" id="b0" value="0" /> <input type="button" name="" id="b." value="." /> <input type="button" name="" id="b=" value="=" /> <input type="button" name="" id="b÷" 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("你愛我嗎");
$("s1").innerHTML = "嘻嘻"
}
if ($("s1").innerHTML==1129) {
alert("我愛你");
}
if ($("s1").innerHTML==1314520) {
alert("我愛你");
}
}
}
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 = "再見";
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.");
}
更多計算器功能實現(xiàn)，請點擊專題： 計算器功能匯總 進行學習
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
用javascript實現(xiàn)XML的解析的實現(xiàn)代碼，需要的朋友可以參考下。2009-11-11
javascript 對象 與 prototype 原型用法實例分析
這篇文章主要介紹了javascript 對象 與 prototype 原型用法,結合實例形式分析了javascript 對象 與 prototype 原型實現(xiàn)對象創(chuàng)建、繼承、拷貝等相關操作技巧,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了微信小程序事件流原理解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-11-11
自動完成JS類，用戶體驗較好。封裝成類，方便使用。本站2009-03-03
這篇文章主要為大家詳細介紹了JS簡易的計算器實現(xiàn)代碼,，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)本地分頁加載，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
最近在使用TS+Vue的開發(fā)模式，發(fā)現(xiàn)項目中大量使用了裝飾器，看得我手足無措，今天特意研究一下實現(xiàn)原理，方便自己理解這塊知識點，有需要的小伙伴也可以參考一下2022-10-10
javascript 異步頁面查詢實現(xiàn)代碼(asp.net)
異步頁面查詢，其實與自動完成時一樣的原理，根據用戶輸入的關鍵詞自動的與數(shù)據庫中的匹配，并顯示出來，提高用戶體驗，但主要搜索量大的話，增加服務器開銷。2010-05-05
這篇文章主要介紹了微信小程序基于本地緩存實現(xiàn)點贊功能的方法,涉及微信小程序界面布局、事件響應及緩存操作等相關實現(xiàn)技巧,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了微信小程序實現(xiàn)列表的橫向滑動，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07