JavaScript实现两数相减并显示结果
作者:拾光时间:2026-10-23 16:49:12浏览:668
本文介绍如何使用JavaScript获取两个输入框中的数值,计算它们的差值,并将结果动态显示在指定的div元素中。通过简单的DOM操作和事件监听,实现前端基础的数据交互与展示功能,适合初学者参考学习。
JavaScript实现两数相减并显示结果
本文分享了一段JavaScript代码实例,用于计算两个数值的差值,供读者参考。
需求
需求
用户需要在两个输入框中分别输入数字,点击按钮后,程序计算这两个数字的差,并将结果显示在ID为result的div元素中。
实现代码
实现代码
<!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里面的值,然后拿到减,把结果放到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")
// 事件函数绑定
oBtn.onclick = function(){
// 计算input里面数字的差 然后放到div中
var num1 = oIpt1.value
var num2 = oIpt2.value
var result = num1-num2
// 给div设置一个内容 result
oBox.innerHTML = result
}
</script>
</body>
</html>
上述代码实现了前述需求,旨在为前端开发学习者提供实用参考。
以上就是本文的全部内容,希望对学习有所帮助,欢迎支持本站。
作者最新文章
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础:字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58
