javascript实践案例:网页计算器_优品建站

javascript实践案例:网页计算器

网页计算器在网站制作中是很常见的功能。下面利用JavaScript中的函数,完成整数加、减、乘、除的运算,实现一个简易版的计算器。具体步骤如下。
(1)编写HTML页面
1 <p>整数1:<input id="num1" type="text"></p>
2 <p>整数2:<input id="num2" type="text"></p>
3 <p>
4  <input type="button" value="相加" onclick="calc(add)">
5  <input type="button" value="相减" onclick="calc(sub)">
6  <input type="button" value="相乘" onclick="calc(mul)">
7  <input type="button" value="相除" onclick="calc(div)">
8 </p>
9 <p> 结果: <input id="result" type="text" readonly></p>
上述第1~2行代码设置的文本框用于输入需要运算的操作数,第3~8行用于指定计算方式。例如,单击“相加”按钮,则触发calc()函数,传递add参数,实现加法运算,并将结果显示到第9行设置的只读文本框中。
(2)编写calc()函数,用于获取并处理用户输入的数据,完成指定操作的函数调用。
1 <script>
2  function calc(func) {
3   var result = document.getElementById('result');
4   var num1 = parseInt(document.getElementById('num1').value);
5   var num2 = parseInt(document.getElementById('num2').value);
6   if (isNaN(num1) || isNaN(num2)) {
7    alert(’请输入数字’);
8    return false;
9   }
10   result.value = func(num1, num2);
11  }
12 </script>
上述第3行代码,用于返回id为result 的元素对象。第4~9行代码获取并转换用户输入的数据,保证参与运算的都是整数,当转换后的数据为NaN时给出提示信息,并停止脚本继续运行。第10行代码用于调用指定的函数(如add、sub等),并将结果显示到指定的区域中。
(3)继续编写函数,实现加、减、乘、除运算。
1 function add(num1, num2) {// 加法
2  return num1 + num2;
3 }
4 function sub(num1, num2) {// 减法
5  return num1 - num2;
6 }
7 function mul(num1, num2) {// 乘法
8  return num1 * num2;
9 }
10 function div(num1, num2) {// 除法
11  if (num2 === 0) {
12  alert(’除数不能为0');
13  return '';
14  }
15  return num1 / num2;
16 }
在上述代码中,在进行除法运算前,首先要判断除数是否为0,若不为0则进行运算,若为0则在弹出的警告框中给出提示信息,然后返回空字符串。
接下来在浏览器中访问,并进行测试运算,具体如图4-10所示。

图4-10 网页计算器

  • JavaScript中常用的判空方法
    在JavaScript中判断一个变量是否为空时,我们往往会想到对变量取反,然后判断是否为true。
  • JavaScript代理模式例子——小明追MM的故事
    本文我们从一个小例子开始熟悉代理模式的结构——小明追MM的故事。
  • javascript实战案例:统计某一个字符的个数
    找出字符串“Can you can a can as a Canner can can a can”中字符c的个数,不区分大小写。
  • html5+css3+javascript实用案例:分组标签制作联系方式
    本案例将实现明日学院网站的“联系我们”页面。将介绍<div>和<span>分组标签,对页面的内容进行分类分组处理。下面将详细介绍<div>标签和<span>标签。
  • JavaScript中的Hash结构
    除了支持数组结构外,JavaScript也支持键值对格式的数据,一般称为Hash,类似于Java语言中的java.util.HashMap类。
  • JavaScript动手实践案例:省份城市的三级联动
    在Web开发中,地区联动是很常见的功能。例如,购物、外卖等需要选择填写的送货地址。其中,省份城市的三级联动则是最基础的功能。接下来,请利用数组保存相关的省份、城市和区域的信息。
  • JavaScript的toString()函数与valueOf()函数
    关于等于运算符的内容中,如果比较的内容包含对象类型数据,则会涉及隐式转换,那么就会调用toString()函数和valueOf()函数。本节会详细讲解toString()函数与valueOf()函数,并通过实例来看看它们的使用场景。
  • javascript使用策略模式实现缓动动画
    本节并不会从头到尾地编写一个完整的游戏,我们首先要做的是让一个小球按照不同的算法进行运动。
  • JavaScript实战题:求出任意5个数的最大值
    如何求出n个数中的最大值?很简单!只需定义一个变量,每次在比较两个数后,将较大的数赋值给变量就可以了。
  • 很少人知道的引用JavaScript脚本文件方法,高效、稳定!
    本节介绍引用JavaScript脚本文件的用法,了解如何在HTML网页中使用JavaScript代码。
  • 网站制作 服务

    免费网站制作报价,免费优化,1对1服务,个性化定制服务

    pc和wap网站制作

    多年建站经验,上千个成功案例,
    为您提供一站式服务

    网站维护改版

    大厂经验工程师对现有网站进行
    改版,修复,维护。

    小程序制作

    微信小程序,支付宝小程序,
    百度小程序

    响应式网页设计

    响应式网页设计可以与多种设备兼容,
    如智能手机,平板电脑和PC