html輸入兩個數(shù)實現(xiàn)加減乘除功能
發(fā)布時間：2021-08-07 16:59:48 作者：Jian Yue 
我要評論
我要評論在網(wǎng)頁制作過程中制作一個簡單計算器功能是非常常見的需求，通過在文本輸入兩個數(shù)，能夠?qū)崿F(xiàn)兩個數(shù)的加減乘除，主要通過parseFloat() 函數(shù)，其語法介紹可以參考下本文
一、parseFloat() 函數(shù)
在網(wǎng)頁中制作一個簡單的計算器，在文本框輸入兩個數(shù)，能夠?qū)崿F(xiàn)兩個數(shù)的加減乘除。
parseFloat() 函數(shù)可解析一個字符串，并返回一個浮點數(shù)。
該函數(shù)指定字符串中的首個字符是否是數(shù)字。如果是，則對字符
串進行解析，直到到達數(shù)字的末端為止，然后以數(shù)字返回該數(shù)字，
而不是作為字符串。
語法：parseFloat(string)；
二、JavaScript 全局屬性
| 屬性 | 描述 |
|---|---|
| Infinity | 代表正的無窮大的數(shù)值。 |
| NaN | 指示某個值是不是數(shù)字值。 |
| undefined | 指示未定義的值。 |
三、完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript">
function cal(){
var nums = document.getElementsByName("num");
var sz = document.getElementsByName("js");
var result = document.getElementsByName("rs");
var n1 = parseFloat(nums[0].value);
var n2 = parseFloat(nums[1].value);
/*parseFloat() 函數(shù)可解析一個字符串，并返回一個浮點數(shù)。
該函數(shù)指定字符串中的首個字符是否是數(shù)字。如果是，則對字符
串進行解析，直到到達數(shù)字的末端為止，然后以數(shù)字返回該數(shù)字，
而不是作為字符串。
*/
switch(sz[0].value){
case "add" :
result[0].value = n1 + n2 ;
break;
case "min" :
result[0].value = n1 - n2 ;
break;
case "mul" :
result[0].value = n1 * n2 ;
break;
case "div" :
result[0].value = n1/n2;
break;
}
}
</script>
</head>
<body>
<div align="center">
<input type="text" name="num" value="" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" />
<select name="js" size="1">
<option value="add">+</option>
<option value="min">-</option>
<option value="mul">*</option>
<option value="div">/</option>
</select>
<input type="text" name="num" value=""onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" />
=
<input type="text" name="rs" value=""/><br>
<button id="btn"onclick="cal()">計算</button>
</div>
</body>
</html>
效果展示:
到此這篇關(guān)于html輸入兩個數(shù)實現(xiàn)加減乘除的文章就介紹到這了,更多相關(guān)html加減乘除內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 這篇文章主要介紹了html5 外鏈式實現(xiàn)加減乘除的代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-04