使用JavaScript实现Input输入数据后自动计算并实时显示

最新推荐文章于 2021-12-29 16:07:58 发布
最新推荐文章于 2021-12-29 16:07:58 发布
阅读量4.4k 收藏 10
点赞数 1
分类专栏： 前端 文章标签： 学习历程记录

代码实现：

<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)

原文：https://blog.csdn.net/qq_42249896/article/details/80963514

远方©
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html输入能自动计算,利用js实现input输入数据后自动进行计算，实时显示数据
weixin_39767513的博客
05-31 588
无标题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实现input输入数据后自动进行计算，实时显示数据
努力变好
08-02 5307
js实现input输入数据后自动进行计算，实时显示数据，input输入框限制输入的数值的大小.
html输入内容计算,HTML 中input输入内容即时计算事件
weixin_35784728的博客
06-05 431
html>监听输入框值的即时变化onpropertychangeoninputfunctionimmediately(){varelement=document.getElementById("mytext");if("\v"=="v"){element.onpropertychange=webChange;}else{element.addEventListe...
html输入能自动计算器,HTML自制计算器
weixin_36043375的博客
05-31 439
1 2 3 4 5 自制计算器6 7 8 9 10 $(function(){11 var $btn=$("#calc")12 // 取消已绑定的事件:13 $btn.off('click');14 $btn.click(function() {15 var x=parsefloat($('#x').val()),16 ...
javascript实现数据双向绑定的三种方式小结
12-11
Vue.js采用的是依赖收集和发布订阅模式，它会自动追踪每个计算属性的依赖，并在数据变化时通知相关组件进行更新。这种方式减少了不必要的遍历，提高了性能。 ```html <input v-model="value"> <p>{{ value }} ...
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
10-15
当模型的数据发生变化时，视图会接收到通知并自动更新显示。 首先，我们创建一个观察者对象`observer`，包含三个核心方法：`addSubscriber`用于订阅事件，`removeSubscriber`用于退订事件，以及`publish`用于发布...
vue实现简单实时汇率计算功能
08-31
在未来，为了实现更准确的实时汇率计算，你可以考虑使用外部API，如Open Exchange Rates或CoinGecko等，它们提供实时汇率数据，只需在Vue实例中引入API请求并处理返回的数据即可。 总结来说，这个示例展示了Vue.js...
实时输入数字自动转换为货币形式并计算.rar
07-05
这个"实时输入数字自动转换为货币形式并计算.rar"压缩包文件显然涉及到一个前端功能，它允许用户在输入框中输入数字时，数字会立即被格式化成货币样式，并可能同时执行一些简单的计算。这一功能对于电商平台、财务...
实现vue的算向绑定加数据计算
最新发布
06-19
在这个场景中，`inputValue`通过`v-model`双向绑定到输入框，当用户输入数字时，`calculate`方法会被触发（你可以在这里添加自定义的处理逻辑），而`calculatedValue`会根据`inputValue`的值进行计算并显示在页面上...
js自动计算值
05-25
说明：将前面的两个填完后，直接点击最后一个input框就可以得出最后的结果
html js 在文本框选择自动计算乘,怎么让JS实现在文本框中输入数字时，同时输出这个数字，并再输出一个乘以0.39的值？...
weixin_42512012的博客
06-03 422
上衣中英文尺表码表对照生成functiongou(thisobj,cobj,yobj,lv){document.getElementById(cobj).innerHTML=!isNaN(thisobj.value)?thisobj.value:0;document.getElementById(yobj).innerHTML=!isNaN(thisobj.val...
html代码显示计算结果,我想用JS或HTML代码完成以下计算公式，自动生成计算结果，应该怎么办？...
weixin_35780601的博客
06-15 563
匿名用户1级2015-03-26 回答123456789101112131415161718192021222324252627282930313233343536373839404142434445html>cursortest请输入参数1：请输入参数2：请输入参数3：请输入参数4：请输入参数5：请输入参数6：请点击提交查看结果结果显示为：$(document).ready(functi...
html+js实现的简单计算器(加减乘除)
热门推荐
静湖微风
04-13 6万+
function setOp(op, opTips) { var tb=document.getElementById("tb_calc"); tb.style.display = "none"; document.getElementById("x").value = ""; do
html点击按钮自动填数字,HTML Input Number defaultValue用法及代码示例
weixin_39578674的博客
06-03 667
HTML DOM中的DOM输入数字defaultValue属性用于设置或返回数字字段的默认值。此属性用于反映HTML值属性。默认值和值之间的主要区别在于，默认值表示默认值，并且在进行一些更改后该值包含当前值。此属性对于查明数字字段是否已更改很有用。用法:它返回defaultValue属性。numberObject.defaultValue它用于设置defaultValue属性。numberObje...
javascript/HTML实现多个text控件自动/动态计算总数
Mobidogs Blog
07-01 3575
untitledinput {width: 40px;}function autocalc(e){var field, val,total=0,i=0;for (i; i{field = arguments[i];val = parseFloat(field.value); //get valueif (!isNaN(val)) //number?{total += val; //ac
html表格输入求和,vue + element-ui的表格(table)组件, 如何实现后期用户输入一列数据, 然后求和刚才一列的和...
weixin_33743292的博客
06-04 632
问题描述在表格的input框里面输入数字, 然后总价那一行计算刚才输入的总和问题出现的环境背景及自己尝试过哪些方法相关代码js代码:summary-method="getSummaries" 是框架自带属性var Main = {data() {return {tableData6: [{id: '12987122',name: '王小虎111',amount1: '234',amount2: ...
通过input输入整数进行计算
寄北测试学习进阶记录
12-29 2729
通过input输入整数来计算 ‘’’ a = input(“请输入a的值”) b = input(“请输入b的值”) print(int(a) + int(b)) ‘’’ a = int(input(“请输入a的值”)) b = int(input(“请输入b的值”)) print(a + b)
input输入数值自动计算
qq_44211323的博客
07-08 6351
有很多时候我们需要在一些输入框输入某一些内容后然后就在其他地方显示出来一些结果，例如计算一些和、差、商、积等等，也可以有复杂的运算，只要符合你的需求即可。 例如下面一个例子的，通过填写去程预计时间和回程预计时间计算出总预计时间，其实方法很简单，就是获取到去程和回程的预计时间一加起来就是总预计时间了。 但是我们在页面上只能给输入框输入数值，这需要电脑自己去计算。需要让电脑自己执行计算...
vue input 输入的字母自动转换成大写
09-03
### 回答1： 可以在 Vue 组件的 methods 中定义一个函数来监听 input 事件，在函数中调用 JavaScript 的 toUpperCase() 方法将输入的字母转换为大写。然后将转换后的值赋值给组件的数据。 例如: ``` <template> <div> <input v-model="inputValue" @input="changeToUpperCase"/> </div> </template> <script> export default { data() { return { inputValue: '' } }, methods: { changeToUpperCase() { this.inputValue = this.inputValue.toUpperCase() } } } </script> ``` 监听 input 事件，并调用 changeToUpperCase 方法，将输入的字母转换为大写。 ### 回答2： 要实现Vue中输入的字母自动转换成大写，可以使用v-model指令和一个自定义过滤器。 首先，在需要输入的input标签上使用v-model指令进行双向绑定，将输入值绑定到一个data中的变量上。例如： ```html <input v-model="inputValue" /> ``` 然后，在Vue实例中定义一个自定义的过滤器，用来将输入的字母转换为大写。例如： ```javascript filters: { uppercase(value) { return value.toUpperCase(); } } ``` 接下来，在需要展示输入结果的地方，使用过滤器将绑定的变量进行转换，并在其中显示。例如： ```html <div>{{ inputValue | uppercase }}</div> ``` 这样，输入的字母就会自动转换为大写并显示在页面上。 完整的代码示例： ```html <template> <div> <input v-model="inputValue" /> <div>{{ inputValue | uppercase }}</div> </div> </template> <script> export default { data() { return { inputValue: "" }; }, filters: { uppercase(value) { return value.toUpperCase(); } } }; </script> ``` 这样，当在输入框中输入小写字母时，会自动转换为大写，并在下方显示。 ### 回答3： 在Vue中，可以使用v-model指令和计算属性，轻松实现输入框中输入的字母自动转换成大写。 首先，我们将v-model指令应用在输入框上，绑定一个变量，比如"inputText"，用于存储用户输入的值。 ```html <input v-model="inputText" type="text"> ``` 然后，我们可以创建一个计算属性，将该变量的值转换为大写。 ```javascript computed: { transformedText: function() { return this.inputText.toUpperCase(); } } ``` 在上述代码中，我们创建了一个计算属性"transformedText"，它返回绑定的变量"inputText"的值经过toUpperCase()方法转换为大写后的结果。 最后，我们在模板中使用这个计算属性来显示转换后的值。 ```html <p>{{ transformedText }}</p> ``` 这样，无论用户在输入框中输入什么字母，它们都会被自动转换为大写并显示在页面上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值