快捷導(dǎo)航

javascript實(shí)現(xiàn)簡(jiǎn)易計(jì)算器

更新時(shí)間：2017年02月01日 10:20:35 作者：Jack-小俊

這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡(jiǎn)易計(jì)算器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前言

hello，大家好，學(xué)習(xí)一段時(shí)間了，學(xué)習(xí)了框架和后臺(tái)的內(nèi)容，為了防止前端的js和jq的熟練度不夠，忘記很多算法和基礎(chǔ)用法，會(huì)陸陸續(xù)續(xù)更新一些小的功能效果code，用于記錄和積累，不足之處很多，封裝性和代碼冗余暫且不嚴(yán)格要求，盡力完善，保持更新..

簡(jiǎn)易加減乘除計(jì)算器，利用表單的value值取值，用原生js實(shí)現(xiàn).可直接復(fù)制到編輯器，打開即可運(yùn)行.

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>加減乘除計(jì)算器</title> 
 <script type="text/javascript">
 function count(){ 
 var a = parseInt(document.getElementById("txt1").value);
 var b = parseInt(document.getElementById("txt2").value) ;
 var sign = document.getElementById("select").value;
 var result = 0;
  switch(sign){
   case "+": result = a+b;
   break;
   case "-": result = a-b;
   break;
   case "*": result = a*b;
   break;
   case "/": result = a/b;
   break;
   case "%": result = a%b;
   break;
   }
 document.getElementById("answer").value = result;
 }
 </script> 
 </head> 
 <body>
 <input type='text' id='txt1' /> 
 <select id='select'>
  <option value='+'>+</option>
  <option value="-">-</option>
  <option value="*">*</option>
  <option value="/">/</option>
  <option value="%">%</option>
 </select>
 <input type='text' id='txt2' /> 
  <input type='button' value=' = ' onclick="count()"/> 
  <!--通過 = 按鈕來調(diào)用創(chuàng)建的函數(shù)，得到結(jié)果--> 
 <input type='text' id='answer' /> 
 </body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript 動(dòng)態(tài)三角函數(shù)實(shí)例詳解
本文通過實(shí)例代碼給大家實(shí)例講解了javascript動(dòng)態(tài)三角函數(shù)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下
2017-01-01
OpenCV.js實(shí)現(xiàn)喬丹動(dòng)圖素描效果圖文教程
這篇文章主要為大家介紹了OpenCV.js實(shí)現(xiàn)喬丹動(dòng)圖素描效果的圖文教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
layui.js實(shí)現(xiàn)的表單驗(yàn)證功能示例
這篇文章主要介紹了layui.js實(shí)現(xiàn)的表單驗(yàn)證功能,結(jié)合實(shí)例形式分析了基于layui.js的事件監(jiān)聽、驗(yàn)證、判定等相關(guān)操作技巧,需要的朋友可以參考下
2017-11-11
js打開word文檔預(yù)覽操作示例【不是下載】
這篇文章主要介紹了js打開word文檔預(yù)覽操作,結(jié)合實(shí)例形式分析了兩種javascript打開word文檔在線預(yù)覽相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05
js控制頁面控件隱藏顯示的兩種方法介紹
兩種方法的不同之處在于控件隱藏后是否還在頁面上占位，詳細(xì)的示例代碼如下，大家可以感受下
2013-10-10
Javascript中的 “&” 和 “|” 詳解
本文主要介紹了Javascript中的 “&” 和 “|” 的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02
詳解js靜態(tài)檢查工具eslint配置文件
這篇文章主要介紹了js靜態(tài)檢查工具eslint配置文件的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-11-11
JavaScript深入介紹WebAPI的用法
JS分成三個(gè)大的部分：ECMAScript、DOM API、BOM API，其中：ECMAScript是讓前端開發(fā)建立基本的編程思維。但是要想真正來寫一個(gè)更加復(fù)雜的有交互式的頁面,還需要WebAPI的支持，相當(dāng)于把后端編程實(shí)現(xiàn)成前端交互。DOM+BOM就組成了WebAPI
2022-06-06
優(yōu)雅處理前端異常的幾種方式推薦
前端一直是距離用戶最近的一層,隨著產(chǎn)品的日益完善,我們會(huì)更加注重用戶體驗(yàn),而前端異常卻如鯁在喉,甚是煩人,下面這篇文章主要給大家推薦介紹了關(guān)于優(yōu)雅處理前端異常的幾種方式,需要的朋友可以參考下
2022-08-08
用原生JS對(duì)AJAX做簡(jiǎn)單封裝的實(shí)例代碼
下面小編就為大家?guī)硪黄迷鶭S對(duì)AJAX做簡(jiǎn)單封裝的實(shí)例代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-07-07