自动计算金额

自动计算金额

开发工具与关键技术：C# MVC

作者：李宥良

撰写时间：2019年6月25日

首先我们先看图片

这就是上面图片的源码

数量:

<input id=txtAmount value=0 onkeyup="checkInt(this);" onpaste="checkInt(this);" oncut="checkInt(this);" ondrop="checkInt(this);" onchange="checkInt(this);">

单价:

<input id=txtPrice value=0 onkeyup="checkP(this);" onpaste="checkP(this);" oncut="checkP(this);" ondrop="checkP(this);" onchange="checkP(this);" style="border-right-width:0px;margin-right:0px;">

<input style="border-left-width:0px;margin-left:-4px;width:18px" value="￥" readonly>

总价:

<input id=txtTotal value=0 style="border-right-width:0px;margin-right:0px;" readonly>

它看上去也许有些复杂，不过我们可以分别研究事件的不同部分

下面我讲解一下这些属性

onkeyup 事件属性定义和用法

正如您看到的，这是一个简单的带有名为 "onkeyup" 输入框的 HTML 事件。输入框的事件属性定义了一个由 onkeyup 事件触发的函数。

onkeyup 属性在用户（在键盘上）释放按键时触发。

相对于 onkeyup 事件的事件次序：

onkeydown onkeypress onkeyup 

当用户输入数据时，名为 "checkInt()" 的函数就会被执行。函数的执行是由 "onkeyup" 事件触发的。另外需要说明的是，当用户在文本框中输入数据时把手指从键盘按键上移开时，函数 checkInt 就会被调用

onkeyup 事件会在键盘按键被松开时发生。

onkeyup 事件，每当有字符输入文本框时，此函数就会执行。

//----ondrop事件

ondrop 当被拖元素正在被拖放时运行的脚本。 

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

当放置被拖数据时，会发生 drop 事件。

在上面的例子中，ondrop 属性调用了一个函数，checkInt()：

被拖数据是被拖元素的 id 

把被拖元素追加到放置元素（目标元素）中 

//-----onchange事件

onchange事件属性，当值改变时检查输入字段：

定义和用法onchange 在元素值改变时触发。

我们将在用户改变输入框内容时当输入框的值改变时触发onchange事件属性就会执行JavaScript 代码

在下面的文本框中输入数字时，也就是当改变选择时调用的事件句柄

onchange 事件常用于输入字段，当用户改变输入字段的内容时，将调用 checkInt() 函数。

总体上来讲就是当输入框输入值的时候把手指从键盘按键上移开时就触发checkInt()事件的，同时输入框的值发生改变或者修改时触发onchange事件。

例子解释 - checkInt() 函数

每当有字符输入文本框时，此函数就会执行。

假如文本域中存在某些输入，函数也会执行

checkInt() onchange() 函数是一个位于 HTML 页面 script 部分的 JavaScript 函数。

此函数包含以下代码：

<script>

    function checkInt(o){

theV=isNaN(parseInt(o.value))?0:parseInt(o.value);

    if(theV!=o.value){o.value=theV;}

txtTotal.value=txtAmount.value*txtPrice.value;

    }

    function checkP(o){

theV=isNaN(parseFloat(o.value))?0:parseFloat(o.value);

    theV=parseInt(theV*100)/100;

    if(theV!=o.value){

    theV=(theV*100).toString();

theV=theV.substring(0,theV.length-2)+"."+theV.substring(theV.length-2,theV.length)

    o.value=theV;

    }

    txtTotal.value=txtAmount.value*txtPrice.value;

    }

</script>

最终结果图

标签：函数,金额,value,自动,事件,计算,onkeyup,theV,checkInt
来源： https://blog.csdn.net/weixin_44547914/article/details/93915384