使用Javascript簡(jiǎn)單計(jì)算器
本文實(shí)例為大家分享了js簡(jiǎn)單計(jì)算器的實(shí)現(xiàn)代碼,供大家參考,具體內(nèi)容如下
1.html代碼
<input type="text" name="" id="txt-num1">//輸入第一個(gè)數(shù) <select id="dropdown"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select>//下拉菜單,讓用戶選擇自己需要的運(yùn)算符 <input type="text" name="" id="txt-num2">//輸入第二個(gè)數(shù) <button type="" id="btn">=</button>//當(dāng)點(diǎn)擊等于時(shí)就會(huì)輸出結(jié)果 <input type="" name="" id="txt-result">//結(jié)果存儲(chǔ)在這里
2.JS代碼
<script type="text/javascript">
var btn_result=document.getElementById('btn');//獲取等號(hào)的ID
var num1=document.getElementById('txt-num1');//獲取第一個(gè)數(shù)的ID
var num2=document.getElementById('txt-num2');//獲取第二個(gè)數(shù)的ID
var result=document.getElementById('txt-result');//獲取結(jié)果ID
var drop=document.getElementById('dropdown');//獲取下拉菜單ID
btn_result.onclick=function(){//這句代碼的意思是兩個(gè)數(shù)的運(yùn)算全是等號(hào)引起的,當(dāng)點(diǎn)擊等號(hào)時(shí)就會(huì)使兩個(gè)數(shù)值進(jìn)行運(yùn)算
var v1=parseFloat(num1.value);//把num轉(zhuǎn)化為數(shù)值型 string------>number
var v2=parseFloat(num2.value);
var v3=drop.value;//用v3 來(lái)存儲(chǔ)下拉菜單的值
var num;///num用于接收兩數(shù)的運(yùn)算結(jié)果
switch(v3){//判斷用戶選的是哪種運(yùn)算符,并進(jìn)行運(yùn)算
case "+":
num=v1+v2;
break;
case "-":
num=v1-v2;
break;
case "*":
num=v1*v2;
break;
case "/":
num=v1/v2;
break;
default:
num=v1+v2;
break;
}
result.value=num;//把結(jié)果保存到result中
}
</script>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js實(shí)現(xiàn)簡(jiǎn)易計(jì)算器功能
- js實(shí)現(xiàn)一個(gè)簡(jiǎn)易計(jì)算器
- js+html實(shí)現(xiàn)周歲年齡計(jì)算器
- javascript寫(xiě)的簡(jiǎn)單的計(jì)算器,內(nèi)容很多,方法實(shí)用,推薦
- 簡(jiǎn)易js代碼實(shí)現(xiàn)計(jì)算器操作
- js實(shí)現(xiàn)簡(jiǎn)單計(jì)算器
- 用JS寫(xiě)的簡(jiǎn)單的計(jì)算器實(shí)現(xiàn)代碼
- javascript-簡(jiǎn)單的計(jì)算器實(shí)現(xiàn)步驟分解(附圖)
- html+js實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器代碼(加減乘除)
- JavaScript實(shí)現(xiàn)簡(jiǎn)單計(jì)算器功能
相關(guān)文章
網(wǎng)頁(yè)實(shí)時(shí)顯示服務(wù)器時(shí)間和javscript自運(yùn)行時(shí)鐘
如果每秒通過(guò)ajax加載服務(wù)器時(shí)間的話,就會(huì)產(chǎn)生大量的請(qǐng)求,于是打算使用js 來(lái)解決這個(gè)需求2014-06-06
es6函數(shù)name屬性功能與用法實(shí)例分析
這篇文章主要介紹了es6函數(shù)name屬性,結(jié)合實(shí)例形式分析了es6函數(shù)name屬性基本原理、功能、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
Bootstrap模態(tài)框(Modal)實(shí)現(xiàn)過(guò)渡效果
這篇文章主要為大家詳細(xì)介紹了Bootstrap模態(tài)框(Modal)實(shí)現(xiàn)過(guò)渡效果的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03
Javascript中eval函數(shù)的詳細(xì)用法與說(shuō)明
Javascript中eval函數(shù)的詳細(xì)用法與說(shuō)明...2007-03-03
JavaScript給每一個(gè)li節(jié)點(diǎn)綁定點(diǎn)擊事件的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript給每一個(gè)li節(jié)點(diǎn)綁定點(diǎn)擊事件的實(shí)現(xiàn)方法,包括js循環(huán)給li綁定參數(shù)不同的點(diǎn)擊事件,需要的朋友可以參考下2016-12-12
JavaScript中Null與Undefined的區(qū)別解析
這篇文章主要介紹了JavaScript中Null與Undefined的區(qū)別解析,本文給出了多個(gè)代碼實(shí)例講解它們之間的區(qū)別,需要的朋友可以參考下2015-06-06
javascript實(shí)現(xiàn)瀑布流加載圖片原理
這篇文章主要為大家介紹了javascript實(shí)現(xiàn)瀑布流加載圖片效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-02-02

