JavaScript計算出兩個數(shù)的差值
更新時間：2020年03月19日 14:06:52 作者：裕博
這篇文章主要為大家詳細介紹了JavaScript計算出兩個數(shù)的差值，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript計算兩個數(shù)差的具體代碼，供大家參考，具體內(nèi)容如下
需求
在兩個輸入框中輸入兩個數(shù)字，點擊按鈕的時候，計算出兩個數(shù)字的差并且顯示到id為result的div中。
實現(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">計算</button>
<div class="result"></div>
<script type="text/javascript">
// 得到input里面的值，然后拿到減，把結(jié)果放到div中
// input.value div.innerHTML 事件綁定
// 找對象 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(){
// 計算input里面數(shù)字的差 然后放到div中
var num1 = oIpt1.value
var num2 = oIpt2.value
var result = num1-num2
// 給div設(shè)置一個內(nèi)容 result
oBox.innerHTML = result
}
</script>
</body>
</html>
上面代碼實現(xiàn)剛開始說的需求，希望對學(xué)習(xí)前端開發(fā)的小伙伴有幫助。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JS實現(xiàn)字符串中去除指定子字符串方法,結(jié)合實例形式分析了javascript使用字符串替換與分割、聚合兩種子字符串去除相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
關(guān)于十六進制編碼的問題在很多情況下都會用到，所以使用JS寫了個小程序轉(zhuǎn)換一下2014-04-04
srcElement表格樣式...2006-09-09
可以自定義廣告的圖片、鏈接、長、寬等。光標移到圖片上會出現(xiàn)左右箭頭，有需要的朋友可以參考一下2013-10-10
這篇文章主要為大家介紹了如何通過JavaScript模擬實現(xiàn)新浪的下拉菜單效果，文中的示例代碼講解詳細，感興趣的小伙伴可以動手試一試2022-03-03
下面小編就為大家?guī)硪黄狫S轉(zhuǎn)換HTML轉(zhuǎn)義符的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
js中實現(xiàn)字符串和數(shù)組的相互轉(zhuǎn)化詳解
這篇文章主要介紹了js中實現(xiàn)字符串和數(shù)組的相互轉(zhuǎn)化，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了webpack cjs運行時分析，本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了js正則表達式中exec用法,實例分析了javascript中使用exec執(zhí)行正則表達式的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
Web系統(tǒng)中，從一個網(wǎng)頁跳轉(zhuǎn)到另一個網(wǎng)頁，是LAMP項目中最常用的技術(shù)之一。頁面跳轉(zhuǎn)可能是由于用戶單擊鏈接、按鈕等引發(fā)的，也可能是系統(tǒng)自動產(chǎn)生的。 此處介紹PHP中常用的實現(xiàn)頁面自動跳轉(zhuǎn)的方法。2015-04-04