JavaScript制作简单网页计算器

本文实例为大家分享了JavaScript制作简单网页计算器的具体代码,供大家参考,具体内容如下

一、题目

利用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)就是保留两位小数;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2022-08-08

javascript-简单的计算器实现步骤分解(附图)

知识点: 1.数学运算"+,-,*,/"的使用 2.输入内容的判断,对于事件对象的来源的判断 效果:   代码: 复制代码 代码如下: <style> #calculate { line-height: 60px; text-align: center; background: #ccc; font-size: 16px; font-weight: bold; } #calculate tbody input{ width: 100%; height: 60px; back

js实现一个简易计算器

本文实例为大家分享了JS实现简易计算器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>14th_test</title> <meta charset="gb2312"> </head> <body> <h1>这是一个标题</h1> <p>以下是一个简易计算器</p> <tab

js网页版计算器的简单实现

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head> <meta http-equiv=&

html+js实现简单的计算器代码(加减乘除)

html+js实现简单的计算器代码(加减乘除) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <table> <tr> <td&

js实现简单计算器

参考部分资料,编写一个简单的计算器案例,虽然完成了正常需求,但是也有不满之处,待后续实力提升后再来补充,先把不足之处列出: 1:本来打算只要打开页面,计算器的输入框会显示一个默认为0的状态,但是在输入框加入默认显示为0的时候,选择数据输入时,该0会显示输入数字的前面,例如"0123",由于能力有限,待后续实力提升再来补充完善! 2:目前只能实现鼠标控制选择按钮,待完善键盘录入功能. 3:乘法的那个符号在本来想改成"×"这个符号的,待后续完善. 附图片一张: html

Vue.js实现的计算器功能完整示例

本文实例讲述了Vue.js实现的计算器功能.分享给大家供大家参考,具体如下: 1. HTML部分代码 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="css/css.css" rel="external nofollow" > <sc

纯javascript代码实现计算器功能(三种方法)

今天来分享一下用纯javascript代码编写的一个计算器程序,很多行业都能用到这个程序,例如做装修预算.贷款利率等等. 首先来看一下完成后的效果: 方法一: 具体编写代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&q

javascript写的简单的计算器,内容很多,方法实用,推荐

最近用javascript写了一个简单的计算器,自己测试感觉还好,先给大家观赏下界面: 界面就是这样了,但是功能如何呢? 现在只是个简单的标准计算器,能进行加减乘除连续运算,以及求余运算.如果发生被除数为零的错误,下面会给出提示,就像这样: 自己不知道写的怎么样,但是对于新手来说,这肯定是一份大餐,里面可以接触到的东西不少,可以拿来学习.如果有高手看出里面的疏漏.错误等望不吝赐教,给予指点. 下面贴上代码,希望里面的注释足够多了. js部分: 复制代码 代码如下: var num=0,resul

简易js代码实现计算器操作

复制代码 代码如下: <html> <head> <title>JS版计算器</title> <link rel="stylesheet" type="text/css" href=""> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <!--

用JS写的简单的计算器实现代码

  1.本页效果图片     2.美化后的效果 Array.prototype.remove=function(index) { if(isNaN(index)||index>this.length){return false;} for(var i=0,n=0;i 0){ del = 1; this.tmp = this.register[0]; } if(_sign == '-'){ this.tmp = -this.tmp; }else{ this.tmp = Math.abs(this.

JS实现的简单四则运算计算器功能示例

本文实例讲述了JS实现的简单四则运算计算器功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <meta name="content-type" content="text/html; charset=UTF-8"> <head> <title>www.jb51.net 计算器 Calculator</title> <!

详解用Node.js写一个简单的命令行工具

本文介绍了用Node.js写一个简单的命令行工具,分享给大家,具体如下: 操作系统需要为Linux 1. 目标 在命令行输入自己写的命令,完成目标任务 命令行要求全局有效 命令行要求可以删除 命令行作用,生成一个文件,显示当前的日期 2. 代码部分 新建一个文件,命名为sherryFile 文件sherryFile的内容 介绍: 生成一个文件,文件内容为当前日期和创建者 #! /usr/bin/env node console.log('command start'); const fs = r

用JS写的一个Ajax库(实例代码)

myajax是一个用js编写的一个跨浏览器的ajax库,支持get, post, jsonp请求,精巧,简单. 一.发送GET请求: myajax.get({ <span style="white-space:pre"> </span>data: {}, //参数 url: "", //请求地址 //发生错误是调用 error: function(data) { }, //请求成功调用 success: function(data){ <

用js编写的简单的计算器代码程序

最近编写的一个简单的计算器代码程序,先给大家展示一下 分享代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta htt

利用D3.js实现最简单的柱状图示例代码

首先把效果图放出来: 具备了一个柱状图的基础元素:柱形,坐标轴,刻度,数值等. 不得不说,d3.js比直接用的echarts更麻烦,但是确实更自由. 来看看如何实现吧. //确定画布的大小 var width = 400; var height = 400; //在 body 里添加一个 SVG 画布 var svg = d3.select("body") .append("svg") .attr("width", width) .attr(&q

JS中实现简单Formatter函数示例代码

JS原生并没有提供方便使用的Formatter函数,用字符拼接的方式看起来混乱难读,而且使用起来很不方便.个人感觉C#里提供的语法比较好用,如: String.Format("Welcome to learn '{0}','{0}' is awesome,you will {1} it!","Javascript","love"); 这种有顺序的替换方式,比较清晰,而且在要替换同一内容时候可以省去传递重复参数的情况,下面是JS简单实现版本(没有严

php+mysql写的简单留言本实例代码

guestbook.php:  <head>  <meta http-equiv="Content-Language" c>  <meta http-equiv="Content-Type" c>  <title></title>  <STYLE>A:link {          COLOR: #002878; TEXT-DECORATION: none  }  A:visited {    

用JS写的一个TableView控件代码

请看看编码是否规范,使用是否方便HTML: 代码 复制代码 代码如下: <table id="customTableView"> <thead> <tr> <td>编号</td> <td>姓名</td> </tr> </thead> <tbody><!--template-tbody--> <tr name="" style=&q