JavaScript制作簡單計(jì)算器

JavaScript經(jīng)典小項(xiàng)目——制作簡單的計(jì)算器功能
使用JS完成一個(gè)簡單的計(jì)算器 功能。實(shí)現(xiàn)2個(gè)輸入框中輸入整數(shù)后,點(diǎn)擊第三個(gè)輸入框能給出2個(gè)整數(shù)的加減乘除。
該項(xiàng)目中所涉及的內(nèi)容包括:構(gòu)建函數(shù)(count),document.getElementById的用法,switch判斷運(yùn)算法則,使用parseInt().
具體步驟:
第一,首先是<body>部分:利用html標(biāo)簽構(gòu)建輸入框<input>,選擇框<select>和確定按鈕<button>.
<body>
<input type="text" id="txt-1" />
<select>
<option value="+">+</option>
<option value="-">-</option>
<option value=""></option>
<option value="/">/</option>
</select>
<input type="text" id="txt-2" />
<input type="button" value="=" onclick="count()" />
<input type="text" id="fruit" />
</body>

第二步是<head>部分:構(gòu)建函數(shù)。
<head>
<script type="text/javascript">
function count() {
var numb1=document.getElementById("txt-1").value;
var numb2=document.getElementById("txt-2").value;
var numb3=document.getElementById("select").value;
//通過document.getElementById().value獲取相應(yīng)的值,并賦值給相對(duì)應(yīng)的變量。
var result="";
switch (numb3) {
case "+":
result = parseInt(numb1) + parseInt(numb2) ;
break;

   case "-":
         result = parseInt(numb1) - parseInt(numb2);
         break;

  case "*":
        result = parseInt(numb1) * parseInt(numb2);
        break;

  case "/":
        result = parseInt(numb1) / parseInt(numb2);
        break;
}

//使用switch判斷運(yùn)算法則實(shí)現(xiàn)加減乘除的運(yùn)算法則。

document.getElementById("fruit").value = result;

// 設(shè)置結(jié)果輸出框的值。
}
</script>
</head>

本次項(xiàng)目的練習(xí)是針對(duì)學(xué)習(xí)JavaScript新人的提升和歷練,希望我的寫作對(duì)你有一定的幫助。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 工廠模式類似于現(xiàn)實(shí)生活中的工廠可以產(chǎn)生大量相似的商品,去做同樣的事情,實(shí)現(xiàn)同樣的效果;這時(shí)候需要使用工廠模式。簡單...
    舟漁行舟閱讀 8,130評(píng)論 2 17
  • 《ijs》速成開發(fā)手冊(cè)3.0 官方用戶交流:iApp開發(fā)交流(1) 239547050iApp開發(fā)交流(2) 10...
    葉染柒丶閱讀 5,644評(píng)論 0 7
  • 單例模式 適用場景:可能會(huì)在場景中使用到對(duì)象,但只有一個(gè)實(shí)例,加載時(shí)并不主動(dòng)創(chuàng)建,需要時(shí)才創(chuàng)建 最常見的單例模式,...
    Obeing閱讀 2,315評(píng)論 1 10
  • 1. Java基礎(chǔ)部分 基礎(chǔ)部分的順序:基本語法,類相關(guān)的語法,內(nèi)部類的語法,繼承相關(guān)的語法,異常的語法,線程的語...
    子非魚_t_閱讀 34,706評(píng)論 18 399
  • 原文: https://github.com/ecomfe/spec/blob/master/javascript...
    zock閱讀 3,488評(píng)論 2 36

友情鏈接更多精彩內(nèi)容