利用js实现input输入数据后自动进行计算，实时显示数据

最新推荐文章于 2024-04-22 03:57:53 发布
最新推荐文章于 2024-04-22 03:57:53 发布
阅读量3.5w 收藏 36
点赞数 8
分类专栏： 大前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42249896/article/details/80963514
版权 
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>无标题</title>
        <script type="text/javascript">
        function sum(obj) {
var z = document.getElementById("z");
            var a = document.getElementById("a");
            var b = document.getElementById("b");
            var c = document.getElementById("c");
all.value=parseInt(z.value);
if(a.value!='')
{
y.value=parseInt(a.value);
h.value=parseInt(z.value)-parseInt(a.value);
}
if(a.value!=''&&b.value!='')
{
y.value=parseInt(b.value)+parseInt(a.value);
h.value=parseInt(z.value)-parseInt(a.value)-parseInt(b.value);
}
if(a.value!=''&&b.value!=''&&c.value!='')
{
y.value=parseInt(b.value)+parseInt(a.value)+parseInt(c.value);
h.value=parseInt(z.value)-parseInt(a.value)-parseInt(b.value)-parseInt(c.value);
}
        }
        </script>
    </head>
    <body>
总分：<input type="text" id="z" onkeyup="sum(this);" />
        <input type="text" id="a" onkeyup="sum(this);" />
        <input type="text" id="b" onkeyup="sum(this);" />
        <input type="text" id="c" onkeyup="sum(this);" />
总分：<input type='text' id='all' style="border:0px solid white; width:25px" />
已选：<input type='text' id='y' style="border:0px solid white; width:25px" />
还剩：<input type='text' id='h' style="border:0px solid white; width:25px" />
    </body>

</html>

效果图：

实时显示的！！！

普及小知识：

onkeyup：键盘按下的时候会触发onkeydown，松开键盘时会出发onkeyup。

parseInt：parseInt() 函数可解析一个字符串，并返回一个整数。

 

parseInt("10");			//返回 10
parseInt("19",10);		//返回 19 (10+9)

 

光头强儿
关注
  • 8
    点赞
  • 踩
  • 36
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
专栏目录
JavaScript实现input输入数据后的自动计算
银域果酒的博客
04-17 2370
  最近搞毕设也稍微玩玩JavaScript，之前的添加商品模块本来是要手动输入原价、定价、折扣的，想让折扣能根据原价和定价自动出来，如果有类似需求也能照样实现。效果如图：   在原价或者定价后的input中输入数字后按Enter或者点击空白处即可计算折扣，当原价和定价没有都给出时折扣为NaN。   代码如下： <html> <head> <script type="text/javascript"> function jisuan(obj){ var pr
js如何模拟表单输入
最新发布
Coffee coder
04-23 394
到了react时代就不同了，虽然也可以通过js拿到dom，给dom.value设置，但是react的状态绑定下，单纯给dom设置value，可是不会直接让react对于的状态也变化的。理论上，react上的事件虽然不是直接绑在dom，而是合成事件，但合成事件也是root上绑定的事件，等待冒泡上来的，new Event也设置了bubbles:true。jQuery时代，模拟表单输入很简单，本质上就是操作dom，选择对于的dom，给dom.value设置值即可。用了另外一种方式给dom设置value。
js控制input数字输入[情况差不多全部考虑到了]
大橙子_Change的博客
04-22 185
2.这会阻止浏览器缓存会话历史记录中的数据。若表单数据缓存于会话历史记录，用户提交表单后，再点击返回按钮返回之前的表单页面，则会显示用户之前输入的数据。1.这会告诉浏览器，不要为了以后在类似表单上自动填充而保存用户输入的数据。但浏览器不一定遵守。
JavaScript中输入框获取用户输入并计算
qq_45165340的博客
01-21 1417
JavaScript中输入框，用户输入数据，获取数据并进行一些操作 h5部分: 第一个输入框: 第二个输入框: js部分: //定义一个求和函数 function sum(){ var a=document.getElementById(“a”).value; //转换为Number类型 a=Number(a); var b=document.getElementById(“b”).value; b=Number(b); var c=a+b; c=Number©; alert(“第一个数第二个数的和为:”
html输入能自动计算,利用js实现input输入数据后自动进行计算，实时显示数据
weixin_39767513的博客
05-31 584
无标题function sum(obj) {var z = document.getElementById("z");var a = document.getElementById("a");var b = document.getElementById("b");var c = document.getElementById("c");all.value=parseInt(z.value);if...
js:使用输入框接收数值并计算
yiXin_Chen的博客
01-13 1425
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3.使用输入框接收数值并计算</title> </head> <body> </body> <script> var num1=prompt("请输入第一个数"); var num2=prompt("请输入第二个数".
js实现input输入数据后自动进行计算，实时显示数据
努力变好
08-02 5273
js实现input输入数据后自动进行计算，实时显示数据，input输入框限制输入的数值的大小.
JS实现是一个文本框（值为参数）输入另一个显示（查询结果）
weixin_34138521的博客
02-10 1865
JS实现是一个文本框（值为参数）输入另一个显示（查询结果） 最近在项目当中遇到了这么一个问题：“在一个文本框中输入编号,然后从数据库中查询对应的名称动态的显示在另一个文本框中。” 当一个文本框失去焦点的时候就动态的执行相应的方法，从后台查出数据然后显示在页面上。所以这个时候需要做的就是用JS写一个文本框触发...
js实现自动加和（实时显示）
郑能量
04-25 879
<div> <input type="text" id="z" onkeyup="sum(this);" /> <input type="text" id="a" onkeyup="sum(this);" /> <input type="text" id="b" onkeyup="sum(this);" /&gt...
js实现单个输入框内简单的加减乘除计算
黑夜心依的博客
05-31 1880
代码示例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div> <input type="text" id="comp" onchange="compute()"> <button onclick="clearInput()"&
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
10-15
在JavaScript编程中，数据绑定是一种将视图与模型紧密连接的技术，使得视图中的变化能够自动反映到模型中，反之亦然。Vue.js框架就是利用这种机制构建动态用户界面的。本篇将介绍如何使用原生JavaScript实现类似Vue...
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
10-24
在JavaScript编程中，有时我们需要实现在用户在文本框（`<textarea>`）中输入内容时，页面中的其他元素（如`<div>`）能够实时显示这些输入。这通常用于创建实时预览、编辑器功能或者反馈用户输入的效果。在给定的...
jQuery购物车自动计算金额表单多数据加减商城购物结算
03-20
在这个主题中，"jQuery购物车自动计算金额表单多数据加减商城购物结算"涉及到的核心知识点主要包括jQuery库的使用、动态计算、表单处理以及多数据管理。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM...
vue实现简单实时汇率计算功能
08-31
每个`moneyBox`包含一个span元素和一个input元素，input元素使用`v-model`指令与Vue实例中的数据模型进行双向绑定，这样当用户输入时，数据模型会自动更新，反之亦然。 ```html 汇率转换 <div class="moneyBox">...
js实现自动计算
03-26
本文将深入探讨如何使用JavaScript实现自动计算功能，这对于构建动态表单、在线计算器或者其他需要实时数据处理的应用至关重要。 【描述】： 这篇博文（原链接：https://wangjl19890122.iteye.com/blog/1153342）...
用javascript实现10的阶乘
m0_60502228的博客
08-25 587
结果：
jsinput输入完触发事件_JavaScript event 事件详解
weixin_39923262的博客
11-28 8498
JavaScript是一种以事件驱动(Event-driven)的开发语言。事件驱动是程式设计的主要流程，是由图形化使用者操作界面(UI)的交互事件为主要核心，藉由事件的触发动作(鼠标点击、键盘输入等等)或是感应器的信息，以此启动程式。维基百科对它的解释是：事件驱动程序设计（英语：Event-driven programming）是一种电脑程序设计模型。这种模型的程序运行流程是由用户的动作（如鼠标...
Input用户输入完后再执行方法
卡卡罗特的博客
09-16 5994
在开发过程中，input的用户输入的值，绑定的onchange事件，如果没敲一次键盘，执行一次方法，请求一次数据的话就很耗内存了；这里用一下lodash <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"><
JQ 实现input输入完后 自动查询
05-17
你可以使用 jQuery 的 `keyup()` 事件来监听输入框的内容变化，然后在事件处理程序中发送 AJAX 请求来查询数据。以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <title>自动查询示例</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function(){ // 监听输入框的输入事件 $("#search-input").keyup(function(){ // 获取输入框的值 var keywords = $(this).val(); // 发送 AJAX 请求查询数据 $.ajax({ url: "search.php", data: {keywords: keywords}, success: function(result){ // 显示查询结果 $("#search-result").html(result); } }); }); }); </script> </head> <body> <input type="text" id="search-input" placeholder="请输入关键词"> <div id="search-result"></div> </body> </html> ``` 在这个示例中，当用户在输入框中输入文本时，`keyup()` 事件会被触发，然后获取输入框的值并发送 AJAX 请求到 `search.php` 页面，查询数据。查询结果会在 `#search-result` 元素中显示出来。你需要根据实际情况修改代码中的 URL 和 AJAX 请求参数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值