一、题目

利用JavaScript中的函数，完成数字加、减、乘、除的运算，实现一个简单的计算器。

二、代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页计算器</title>
</head><body>
<div><p>数字1：<input type="text" id="num1"/></p><p>数字2：<input type="text" id="num2"/></p><p><input type="button" value="相加" onclick="add()"/><input type="button" value="相减" onclick="sub()"/><input type="button" value="相乘" onclick="mul()"/><input type="button" value="相除" onclick="div()"/></p><p>结果（数字1 op 数字2）：<p><input type="text" id="result"/></p></p>
</div>
<script>function add(){var num1=parseFloat(document.getElementById("num1").value);var num2=parseFloat(document.getElementById("num2").value);if(isNaN(num1)||isNaN(num2)){alert("请输入数字！");}else{result.value=(num1+num2).toFixed(2);return result.value;}}function sub(){var num1=parseFloat(document.getElementById("num1").value);var num2=parseFloat(document.getElementById("num2").value);if(isNaN(num1)||isNaN(num2)){alert("请输入数字！");}else{result.value=(num1-num2).toFixed(2);return result.value;}}function mul(){var num1=parseFloat(document.getElementById("num1").value);var num2=parseFloat(document.getElementById("num2").value);if(isNaN(num1)||isNaN(num2)){alert("请输入数字！");}else{result.value=(num1*num2).toFixed(2);return result.value;}}function div(){var num1=parseFloat(document.getElementById("num1").value);var num2=parseFloat(document.getElementById("num2").value);if(isNaN(num1)||isNaN(num2)){alert("请输入数字！");}else if(num2==0){alert("除数不能为0！");}else{result.value=(num1/num2).toFixed(2);return result.value;}}</script>
</body>
</html>

三、结果

四、总结

document.getElementById("num1").value获取的是一个字符串；

NaN表示非数值；

parseFloat()函数解析字符串并返回浮点数；

toFixed() 方法可把 Number 四舍五入为指定小数位数的数字;toFixed(2)就是保留两位小数；

用JavaScript制作简单的网页计算器相关推荐

HTML+CSS+Javascript制作简单版网页时钟
HTML+CSS+Javascript制作简单版网页时钟 <!DOCTYPE html> <html><head><meta charset="ut ...
java jsp网页计算器_使用JSP制作一个超简单的网页计算器的实例分享
实现一个简单的计算器程序,要求:使用jsp+javabean模式实现. 项目源代码如下: 文件:calculator.jsp 简单的计算机进行计算 --%> cal.calculate(); ...
php简单网页制作代码,用HTML和CSS以及JS制作简单的网页菜单界面的代码
这篇文章主要介绍了使用HTML+CSS+JS制作简单的网页菜单界面,这个ABROAD项目所使用的JavaScript部分代码非常简单,需要的朋友可以参考下写ABROAD项目用到了标签这个东东,其实标 ...
HTML+CSS+JavaScript制作结婚倒计时网页模板 520情人节表白源码HTML 七夕情人节表白源码HTML 生日祝福代码HTML...
❉ html+css+javascript制作结婚倒计时网页模板(520/七夕情人节/程序员告白) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白, ...
使用html和css制作简单的网页
使用html和css制作简单的网页创作不易,可否给作者点个赞再走 html部分: /** * author 阿木木 * date 09/26 10:23 * / <html><he ...
设计一个简单的网页计算器
设计一个简单的网页计算器一.代码 <!DOCTYPE html> <html> <head><meta charset="UTF-8"& ...
asp.net实现一个简单的网页计算器（能够实现加减乘除）
asp.net实现一个能够进行加减乘除)简单的网页计算器效果图实现代码: aspx文件代码: <%@ Page Language="C#" AutoEventWireup ...
一个简单的网页计算器-php网站建设代码段分享
功能说明:接收用户输入数字并判断,实现加.减.乘.除.取余功能,能够保存输入的数值并验证输入的数值是否符合要求. <!doctype html> <html> <head ...
用html编写一个诗歌的网页,试验2用HTML语言制作简单的网页.doc
<计算机网络B>实验指导书实验三网页制作测绘工程学院实验三网页制作一.实验目的 1.简单了解HTML语言. 2.认识网页以及网页的结构. 3.掌握用HTML语言制作简单网页的方 ...

用JavaScript制作简单的网页计算器

一、题目

二、代码

三、结果

四、总结

用JavaScript制作简单的网页计算器相关推荐

最新文章

热门文章