前端——编写一个简易网页计算器

HTML+JS实现的简单网页计算器,

原创

已于 2023-10-24 21:32:39 修改 · 3.1k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节 #javascript #html5 #学习

于 2023-10-24 15:39:34 首次发布

本文介绍了如何使用HTML和JavaScript实现一个基本的网页计算器，包括输入框、运算符按钮和计算函数，以及输入验证和基本数学运算功能。

如下图效果所示，输入两个运算数，点击不同的运算符，会在下方得到不同的运算结果

分析与代码实现

在HTML部分，定义了一个标题为"网页计算器"的网页，并创建了两个输入框和四个按钮。最后，创建了一个只读的结果显示框，便于计算结果的输出

在JavaScript部分，定义了一个名为compute的函数，该函数接收一个参数func，根据func的值调用相应的计算函数。函数内部首先获取输入的两个数字的值，并使用validateInput函数验证输入是否合法。如果输入不合法，则返回false；否则，根据func的值调用相应的计算函数，并将结果赋值给结果显示框。

再定义了一些辅助函数，包括验证输入是否合法的validateInput函数、加法函数add、减法函数sub、乘法函数mul和除法函数div。其中，除法函数会检查除数是否为0，如果是0则提示错误并返回false。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>网页计算器</title>  
</head>  
<body>  
    <!-- 输入运算数1 -->
    <p>运算数1：<input id="num1" type="text"></p>  
    <!-- 输入运算数2 -->
    <p&g