javascript實(shí)現(xiàn)簡(jiǎn)易計(jì)算器功能
更新時(shí)間：2020年09月23日 16:23:24 作者：于珂琛。
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡(jiǎn)易計(jì)算器功能，實(shí)現(xiàn)四則運(yùn)算，小數(shù)點(diǎn)，回退，歸0等功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了javascript實(shí)現(xiàn)簡(jiǎn)易計(jì)算器的具體代碼，供大家參考，具體內(nèi)容如下
功能：
1、實(shí)現(xiàn)單擊數(shù)字按鈕輸入數(shù)字
2、實(shí)現(xiàn)基礎(chǔ)四則運(yùn)算功能，并添加必要的異常處理，例如：除數(shù)不能為零
3、實(shí)現(xiàn)小數(shù)點(diǎn)添加功能，并添加異常處理，小數(shù)點(diǎn)只能出現(xiàn)一次
4、實(shí)現(xiàn)正負(fù)號(hào)功能
5、實(shí)現(xiàn)回退功能，已經(jīng)是最后一位時(shí)，顯示框顯示為零
6、清屏功能
使用的知識(shí)點(diǎn)：
1、利用大量的自定義函數(shù)實(shí)現(xiàn)業(yè)務(wù)邏輯
2、靈活運(yùn)用事件及事件處理
3、培養(yǎng)異常處理的編程方法
4、培養(yǎng)并實(shí)踐利用不同思路實(shí)現(xiàn)編程
綜合練習(xí)目的：
1、將CSS、HTML和JS有效的驚醒技術(shù)組合，實(shí)現(xiàn)業(yè)務(wù)功能
2、鍛煉和培養(yǎng)編程思想，解決問(wèn)題的能力和方法
3、鍛煉和培養(yǎng)利用多種編程思路，完成預(yù)先設(shè)定的目標(biāo)
頁(yè)面效果：
源代碼
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>簡(jiǎn)易計(jì)算器</title> <link rel="stylesheet" type="text/css" href="demo.css" > <script type="text/javascript" src="demo.js"></script> </head> <body> <form action="http//:www.baidu.com"> <input type="text" id="text" value="0" disabled /><br/> <input type="button" id="reset" class="btn" value="C"/> <input type="button" id="back" class="btn" value="←"/> <input type="button" id="plus" class="btn" value="+/-"/> <input type="button" id="divide" class="btn" value="/"/><br/> <input type="button" id="num1" class="btn" value="1"/> <input type="button" id="num2" class="btn" value="2"/> <input type="button" id="num3" class="btn" value="3"/> <input type="button" id="multiply" class="btn" value="*"/><br/> <input type="button" id="num4" class="btn" value="4"/> <input type="button" id="num5" class="btn" value="5"/> <input type="button" id="num6" class="btn" value="6"/> <input type="button" id="subtract" class="btn" value="-"/><br/> <input type="button" id="num7" class="btn" value="7"/> <input type="button" id="num8" class="btn" value="8"/> <input type="button" id="num9" class="btn" value="9"/> <input type="button" id="add" class="btn" value="+"/><br/> <input type="button" id="num0" class="btn" value="0"/> <input type="button" id="point" class="btn" value="."/> <input type="button" id="equal" class="btn" value="="/> <input type="button" id="ddd" class="btn" value="d"/> </form> </body> </html>
css
*{
margin: 0;
padding: 0;
}
/*內(nèi)外邊距*/
input{
width: 160px;
}
/*寬*/
form{
width: 200px;
height: 300px;
margin: 100px auto 0;
}
/*寬高；外邊距*/
#text{
text-align: right;
padding-right: 10px;
}
/*文字靠右*/
.btn:hover{
background: #ccc;
border: 2px solid #ccc;
}
/*背景顏色，邊框*/
.btn{
width: 40px;
height: 25px;
margin-top: 5px;
}
/*寬高，上邊距*/
js
window.onload = function(){
var t = document.getElementById('text');//數(shù)字文本
var num = {
//數(shù)字0-9
num1:document.getElementById('num1'),
num2:document.getElementById('num2'),
num3:document.getElementById('num3'),
num4:document.getElementById('num4'),
num5:document.getElementById('num5'),
num6:document.getElementById('num6'),
num7:document.getElementById('num7'),
num8:document.getElementById('num8'),
num9:document.getElementById('num9'),
num0:document.getElementById('num0')
};
var symbol = {
divide:document.getElementById('divide'),//除
multiply:document.getElementById('multiply'),//乘
subtract:document.getElementById('subtract'),//減
add:document.getElementById('add'),//加
reset:document.getElementById('reset'),//歸零
back:document.getElementById('back'),//回退
plus:document.getElementById('plus'),//正負(fù)號(hào)
equal:document.getElementById('equal'),//等于號(hào)
point:document.getElementById('point'),//小數(shù)點(diǎn)
ddd:document.getElementById('ddd')//跳百度
};
var n = [];//儲(chǔ)存符號(hào)
var sum = '';//前面儲(chǔ)存輸入的數(shù)字
var a = false;
for(var i in symbol){
symbol[i].onclick = function(){
switch(this.value){
case '.' :
if(text.value!== "0" && this.value=="."){
//文本框里數(shù)字不為零，并且輸入小數(shù)點(diǎn)
if(text.value.indexOf(".")!==-1){
// 處理點(diǎn)重復(fù)的問(wèn)題；文本框里面有小數(shù)點(diǎn)
text.value = text.value;
} else {
text.value += this.value;
}
} else {
text.value += this.value;
}
break;
case '+':
if(n != '+'){
n = this.value; //儲(chǔ)存符號(hào)
sum = t.value; //儲(chǔ)存輸入的數(shù)字
t.value = '0'; //清0
}
break;
case '-':
if(n != '-'){
n = this.value;
sum = t.value;
t.value = '0';
}
break;
case '*':
if(n != '*'){
n = this.value;
sum = t.value;
t.value = '0';
}
break;
case '/':
if(n != '/'){
n = this.value;
sum = t.value;
t.value = '0';
}
break;
case '=':
switch(n){
case '+':
t.value = parseFloat(sum) + parseFloat(t.value); //輸出結(jié)果
n = ''; //符號(hào)清空
break;
case '-':
t.value = parseFloat(sum) - parseFloat(t.value);
n = '';
break;
case '*':
t.value = parseFloat(sum) * parseFloat(t.value);
n = '';
break;
case '/':
if(parseFloat(t.value) == 0){
alert('除數(shù)不能為0');
t.value=0;
} else {
t.value = parseFloat(sum) / parseFloat(t.value);
n = '';
}
break;
}
break;
case '←' :
//長(zhǎng)度減一
if (t.value.length>1) {
t.value = t.value.substr(0,t.value.length-1);
} else {
t.value = '0';
}
break;
case 'C' :
//清0
t.value = 0;
break;
case '+/-' :
//點(diǎn)擊一次*-1
t.value = t.value * -1;
break;
case 'd':
window.open('http://www.baidu.com');
break;
}
}
}
//封裝，點(diǎn)擊數(shù)字輸入到文本域中
function number(numx){
if (t.value == '0') {
t.value = numx;
} else {
t.value += numx;
}
}
//輸入數(shù)字
num.num1.onclick = function(){
number(this.value);
}
num.num2.onclick = function(){
number(this.value);
}
num.num3.onclick = function(){
number(this.value);
}
num.num4.onclick = function(){
number(this.value);
}
num.num5.onclick = function(){
number(this.value);
}
num.num6.onclick = function(){
number(this.value);
}
num.num7.onclick = function(){
number(this.value);
}
num.num8.onclick = function(){
number(this.value);
}
num.num9.onclick = function(){
number(this.value);
}
num.num0.onclick = function(){
number(this.value);
}
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了js之遍歷嵌套數(shù)組對(duì)象方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
javascript中可以通過(guò)四個(gè)屬性獲得元素的偏移量，offsetHeight、offsetWidth、offsetLeft、offsetTop，下面為大家解釋下各屬性的含義2014-06-06
uniapp使用uni自帶websocket進(jìn)行即時(shí)通訊詳細(xì)步驟
在開(kāi)發(fā)程序過(guò)程中通信功能還是比較常用到的,下面這篇文章主要給大家介紹了關(guān)于uniapp使用uni自帶websocket進(jìn)行即時(shí)通訊的詳細(xì)步驟,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
在js中實(shí)現(xiàn)郵箱格式的驗(yàn)證方法(推薦)
下面小編就為大家?guī)?lái)一篇在js中實(shí)現(xiàn)郵箱格式的驗(yàn)證方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
本文介紹一個(gè)簡(jiǎn)單可行的辦法，來(lái)做基于gulp構(gòu)建的中小型項(xiàng)目中的seajs合并壓縮，感興趣的朋友一起看看詳情吧2016-06-06
如何使用JS寫個(gè)方法判斷當(dāng)前時(shí)區(qū)是否是夏令時(shí)
文章介紹了如何使用JavaScript判斷當(dāng)前時(shí)區(qū)是否處于夏令時(shí),由于JavaScript標(biāo)準(zhǔn)庫(kù)沒(méi)有直接提供此功能,可以通過(guò)比較本地時(shí)間和UTC時(shí)間的差異來(lái)推斷,文章還提供了使用moment.js和moment-timezone插件進(jìn)行更精確夏令時(shí)檢測(cè)的示例,感興趣的朋友一起看看吧2024-12-12
這篇文章主要介紹了js判斷字符長(zhǎng)度及中英文數(shù)字等,需要的朋友可以參考下2014-03-03
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)錄音上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要介紹了JavaScript基于面向?qū)ο笾^承，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了JavaScript構(gòu)建自己的模板小引擎,結(jié)合實(shí)例形式分析了javascript自定義模板引擎的實(shí)現(xiàn)與使用方法,需要的朋友可以參考下2018-12-12