html输入两个数实现加减乘除功能-662P.COM

在网页制作过程中制作一个简单计算器功能是非常常见的需求，通过在文本输入两个数，能够实现两个数的加减乘除，主要通过parseFloat() 函数，其语法介绍可以参考下本文

一、parseFloat() 函数

在网页中制作一个简单的计算器，在文本框输入两个数，能够实现两个数的加减乘除。
parseFloat() 函数可解析一个字符串，并返回一个浮点数。
该函数指定字符串中的首个字符是否是数字。如果是，则对字符
串进行解析，直到到达数字的末端为止，然后以数字返回该数字，
而不是作为字符串。
语法：parseFloat(string)；

二、JavaScript 全局属性

属性	描述
Infinity	代表正的无穷大的数值。
NaN	指示某个值是不是数字值。
undefined	指示未定义的值。

三、完整代码

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

<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() 函数可解析一个字符串，并返回一个浮点数。

该函数指定字符串中的首个字符是否是数字。如果是，则对字符

串进行解析，直到到达数字的末端为止，然后以数字返回该数字，

而不是作为字符串。

*/

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>

效果展示:

在这里插入图片描述

html

一、parseFloat() 函数

二、JavaScript 全局属性

三、完整代码

0评论