JavaScript計(jì)算出兩個(gè)數(shù)的差值

更新時(shí)間：2020年03月19日 14:06:52 作者：裕博

這篇文章主要為大家詳細(xì)介紹了JavaScript計(jì)算出兩個(gè)數(shù)的差值，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript計(jì)算兩個(gè)數(shù)差的具體代碼，供大家參考，具體內(nèi)容如下

需求

在兩個(gè)輸入框中輸入兩個(gè)數(shù)字，點(diǎn)擊按鈕的時(shí)候，計(jì)算出兩個(gè)數(shù)字的差并且顯示到id為result的div中。

實(shí)現(xiàn)代碼

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 body{
 padding-top: 100px;
 text-align: center;
 }
 #result{
 width: 50%;
 height: 100px;
 margin: 0 auto;
 border: 1px solid #ccc;
 }
 </style>
 </head>

 <body>
 <input type="text" id="ipt1"/>
 <input type="text" id="ipt2"/>
 <button id="btn">計(jì)算</button>
 <div class="result"></div>
 <script type="text/javascript">
 // 得到input里面的值，然后拿到減，把結(jié)果放到div中
 // input.value div.innerHTML 事件綁定
 // 找對(duì)象 input button div
 var oIpt1 = document.getElementById("ipt1")
 var oIpt2 = document.getElementById("ipt2")
 var oBtn = document.getElementById("btn")
 var oBox = document.getElementById("result")
 // 事件函數(shù)綁定
 oBtn.onclick = function(){
 // 計(jì)算input里面數(shù)字的差 然后放到div中
 var num1 = oIpt1.value
 var num2 = oIpt2.value
 var result = num1-num2
 // 給div設(shè)置一個(gè)內(nèi)容 result
 oBox.innerHTML = result
 }
 </script>
 </body>

</html>

上面代碼實(shí)現(xiàn)剛開始說的需求，希望對(duì)學(xué)習(xí)前端開發(fā)的小伙伴有幫助。

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

您可能感興趣的文章:

相關(guān)文章

JS實(shí)現(xiàn)字符串中去除指定子字符串方法分析
這篇文章主要介紹了JS實(shí)現(xiàn)字符串中去除指定子字符串方法,結(jié)合實(shí)例形式分析了javascript使用字符串替換與分割、聚合兩種子字符串去除相關(guān)操作技巧,需要的朋友可以參考下
2018-05-05
js實(shí)現(xiàn)字符串的16進(jìn)制編碼不加密
關(guān)于十六進(jìn)制編碼的問題在很多情況下都會(huì)用到，所以使用JS寫了個(gè)小程序轉(zhuǎn)換一下
2014-04-04
srcElement表格樣式
srcElement表格樣式...
2006-09-09
圖片動(dòng)畫橫條廣告帶上下滾動(dòng)的JS代碼
可以自定義廣告的圖片、鏈接、長、寬等。光標(biāo)移到圖片上會(huì)出現(xiàn)左右箭頭，有需要的朋友可以參考一下
2013-10-10
JavaScript模擬實(shí)現(xiàn)新浪下拉菜單效果
這篇文章主要為大家介紹了如何通過JavaScript模擬實(shí)現(xiàn)新浪的下拉菜單效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以動(dòng)手試一試
2022-03-03
JS轉(zhuǎn)換HTML轉(zhuǎn)義符的方法
下面小編就為大家?guī)硪黄狫S轉(zhuǎn)換HTML轉(zhuǎn)義符的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
js中實(shí)現(xiàn)字符串和數(shù)組的相互轉(zhuǎn)化詳解
這篇文章主要介紹了js中實(shí)現(xiàn)字符串和數(shù)組的相互轉(zhuǎn)化，感興趣的小伙伴們可以參考一下
2016-01-01
webpack cjs運(yùn)行時(shí)分析示例詳解
這篇文章主要介紹了webpack cjs運(yùn)行時(shí)分析，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-12-12
js正則表達(dá)式中exec用法實(shí)例
這篇文章主要介紹了js正則表達(dá)式中exec用法,實(shí)例分析了javascript中使用exec執(zhí)行正則表達(dá)式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-07-07
php常見的頁面跳轉(zhuǎn)方法匯總
Web系統(tǒng)中，從一個(gè)網(wǎng)頁跳轉(zhuǎn)到另一個(gè)網(wǎng)頁，是LAMP項(xiàng)目中最常用的技術(shù)之一。頁面跳轉(zhuǎn)可能是由于用戶單擊鏈接、按鈕等引發(fā)的，也可能是系統(tǒng)自動(dòng)產(chǎn)生的。此處介紹PHP中常用的實(shí)現(xiàn)頁面自動(dòng)跳轉(zhuǎn)的方法。
2015-04-04