如何用JS实现2个数相乘

JavaScript017

如何用JS实现2个数相乘,第1张

用onkeyup效果能好点吧 一下

---------------

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=GB18030">

<title>Insert title here</title>

</head>

<script type="text/javascript">

function account()

{

var a=document.all.a.value

var b=document.all.b.value

var c=a*b

document.all.c.value=c

}

</script>

<body>

单价：<input id="a" type="text" value="60">

数量：<input id="b" type="text" onkeyup="account()">

总和 <input id="c" type="text">

<input type="button" onclick="account()" value="计算">

</body>

</html>

在了解位运算之前, 必须先了解一下什么是原码, 反码和补码, 以及二进制与十进制的转换.

原码

一个数在计算机中是以二进制的形式存在的, 其中第一位存放符号, 正数为0, 负数为1. 原码就是用第一位存放符号的二进制数值. 例如2的原码为00000010, -2的原码为10000010

反码

正数的反码是它本身, 负数的反码是在其原码的基础上, 符号位不变, 其余各位取反.

可见如果一个反码表示的是负数, 并不能直观的看出它的数值, 通常要将其转换成原码再计算

补码

正数的补码是它本身, 负数的补码是在其原码基础上, 符号位不变, 其余各位取反, 最后+1. (即负数的补码为在其反码的基础上+1)

可见对于负数, 补码的表示方式也是让人无法直观的看出其数值的, 通常也需要转换成原码再计算.

正整数十进制转二进制

正整数的十进制转二进制的方法为将一个十进制数除以2, 得到的商再除以2, 以此类推知道商为1或0时为止, 倒序取得除得的余数, 即为转换所得的二进制数.

负整数十进制转二进制

负整数的十进制转二进制, 先将该负整数对应的正整数转为二进制, 然后对其取反再+1. 即补码的形式

十进制小数转二进制

十进制小数转二进制的方法为"乘2取整", 对十进制的小数部分乘2, 得到的整数部分即是相应的二进制码数, 然后继续对得到的小数部分乘2, 如此不断重复, 直到小数部分为0或达到精度要求为止. 顺序取得每次的整数部分, 即是该十进制小数的二进制表示.

按位运算符有6个

&: 按位与

|: 按位或

^: 按位异或

~: 按位取反

>>: 右移

<<: 左移

将运算数以二进制表示, 对应位都为1, 则结果为1, 否则为0.

使用场景示例:

判断一个数是奇数还是偶数

奇数的二进制码的最后一位数肯定是1, 而1只有最后一位为1, 按位与运算后, 结果肯定只有最后一位数是1. 而偶数的二进制表示的最后一位数是0, 和1进行按位与运算, 结果的所有位都是0.

将运算数以二进制表示, 对应位有一个为1, 则结果为1, 否则为0.

使用场景示例:

对浮点数向下求整

其实浮点数是不支持位运算的, 所以会先把小数位丢弃, 然后以整数进行位运算, 而任何数与0进行按位或操作, 结果都是它本身, 就好像是对浮点数向下求整.

将运算数以二进制表示, 对应位相同为0, 相异为1.

异或满足交换律和结合律, 数字与它本身进行异或操作, 得到0数字与0进行异或操作, 得到它本身.

使用场景示例:

交换两个变量数字的值

将操作数转换为二进制数, 然后按位求反.

浮点数是不支持位运算的，所以会先直接去除小数部分，转成整数再进行位运算，就好像是对浮点数向下求整.

~~可以进行类型转换,位运算会默认将非数字类型转换成数字类型再进行运算 （转换结果为整数 直接去除小数部分）

使用场景示例:

类型转换

移位运算符将操作数转换成二进制, 然后向左或向右移动, 超过的位丢弃, 空出的位补0.

使用场景示例:

类型转换

任何小数 把它 >>0可以取整

如3.14159 >>0 = 3

其默认将非数字类型的转换为数字类型再做运算的性质与 ~~ ， | 0 一样

<script type="text/javascript">

function G(e){return document.getElementById(e)}

</script>

单价：<input type="text" id="p" name="price" onkeyup="this.value=this.value.replace(/[^0-9\.]/g,'')" />

数量：<input type="text" id="c" name="count" onkeyup="this.value=this.value.replace(/[^0-9\.]/g,'')G('total').value=G('c').value*G('p').value" />

金额：<input type="text" id="total" name="total" />

注意：input元素 以及HTML 任何元素的 ID 都是唯一的，也就是说 你还想增加行这样的效果

那么请在 id 和 name 属性中 后面加不同的后缀来保证ID 和 name 的唯一性，另外还要改动 一点JS

下面是两条的情况 ，你注意看规律，自己看明白：

<script type="text/javascript">

function G(e){return document.getElementById(e)}

</script>

单价：<input type="text" id="p" name="price" onkeyup="this.value=this.value.replace(/[^0-9\.]/g,'')" />

数量：<input type="text" id="c" name="count" onkeyup="this.value=this.value.replace(/[^0-9\.]/g,'')G('total').value=G('c').value*G('p').value" />

金额：<input type="text" id="total" name="total" /><br>

单价：<input type="text" id="p1" name="price1" onkeyup="this.value=this.value.replace(/[^0-9\.]/g,'')" />

数量：<input type="text" id="c1" name="count1" onkeyup="this.value=this.value.replace(/[^0-9\.]/g,'')G('total1').value=G('c1').value*G('p1').value" />

金额：<input type="text" id="total1" name="total1" />