溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

使用javascript實(shí)現(xiàn)一個(gè)簡易計(jì)算器功能

發(fā)布時(shí)間：2020-10-30 16:49:35 來源：億速云 閱讀：198 作者：Leah 欄目：開發(fā)技術(shù)

今天就跟大家聊聊有關(guān)使用javascript實(shí)現(xiàn)一個(gè)簡易計(jì)算器功能，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

功能：

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)編程思想，解決問題的能力和方法
3、鍛煉和培養(yǎng)利用多種編程思路，完成預(yù)先設(shè)定的目標(biāo)

頁面效果：

使用javascript實(shí)現(xiàn)一個(gè)簡易計(jì)算器功能

源代碼

html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>簡易計(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ù)的問題；文本框里面有小數(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 '←' :
  //長度減一
  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);
 }
 

}

看完上述內(nèi)容，你們對(duì)使用javascript實(shí)現(xiàn)一個(gè)簡易計(jì)算器功能有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手