iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript制作简单网页计算器
  • 127
分享到

JavaScript制作简单网页计算器

js计算器 2022-11-13 14:11:01 127人浏览 薄情痞子
摘要

本文实例为大家分享了javascript制作简单网页计算器的具体代码,供大家参考,具体内容如下 一、题目 利用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)就是保留两位小数;

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

--结束END--

本文标题: JavaScript制作简单网页计算器

本文链接: https://www.lsjlt.com/news/172114.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript制作简单网页计算器
    本文实例为大家分享了JavaScript制作简单网页计算器的具体代码,供大家参考,具体内容如下 一、题目 利用JavaScript中的函数,完成数字加、减、乘、除的运算,实现一个简单...
    99+
    2022-11-13
    js 计算器
  • JavaScript制作简单计算器功能
    本文实例为大家分享了JavaScript制作简单计算器的具体代码,供大家参考,具体内容如下 1. 任务要求 1)掌握数据的类型转换 2)学会获取文本框控件的数据以及给相应控件赋值 3...
    99+
    2022-11-13
  • JavaScript实现简单网页版计算器
    背景 由于我又被分进了一个新的项目组,该项目需要用js,因为我没接触过,所以领导准备给我一周时间学习,没错,实现一个简单的支持四则混合运算的计算器就是作业,所以有了这篇文章 故,这篇...
    99+
    2022-11-12
  • JSP实现简单网页计算器
    本文实例为大家分享了JSP实现简单网页计算器的具体代码,供大家参考,具体内容如下 一、构造一个简单的计算器,能够进行“+、—、*、/”运算 (1)...
    99+
    2022-11-13
  • Vue实现简单网页计算器
    本文实例为大家分享了Vue实现简单网页计算器的具体代码,供大家参考,具体内容如下 案例描述 1、 考核知识点 2、 创建vue实例和对v-model内置指令的使用 3、 练习目标 创...
    99+
    2022-11-13
  • python制作简单计算器功能
    本文实例为大家分享了python实现简单计算器功能的具体代码,供大家参考,具体内容如下 效果如图: 主要思路: 用列表保存按下的键,按下等于,转换为字符串,利用内置函数eval计算...
    99+
    2022-11-13
  • 用Java制作简单的计算器
    本篇文章主要是提供思路,当然文章末尾也又提供了源代码。 代码也是写了几天,重要的理解,不是直接复制粘贴就交作业了。 转载请注明出处,尊重作者劳动成果。 目录 界面的设计: 事件的响应: 计算: 详细代码如下:  总结: 要制作一个简...
    99+
    2023-10-09
    java spring jvm
  • node.js+express制作网页计算器
    环境: 主机:WIN10 express安装: 1.安装express-generator 输入命令: npm install -g express-generator 2.安装express 输入...
    99+
    2022-06-04
    计算器 制作网页 node
  • JSP如何实现简单网页计算器
    小编给大家分享一下JSP如何实现简单网页计算器,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!一、构造一个简单的计算器,能够进行“+、&mdash;、*、/”运算(1)编写jsp页面,用户通过表单输入两个操作数和运算...
    99+
    2023-06-29
  • Vue怎么实现简单网页计算器
    这篇文章主要介绍“Vue怎么实现简单网页计算器”,在日常操作中,相信很多人在Vue怎么实现简单网页计算器问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue怎么实现简单网页计算器”的疑惑有所帮助!接下来,请跟...
    99+
    2023-06-30
  • C++制作简单的计算器功能
    计算器这个基本都很熟悉,一个简单的计算器有加法,减法,乘法,除法这四种功能。 如下图 此处我此处逻辑如下,先判断输入的运算符符号,然后在判断输入的数字来进行一个计算。 #inclu...
    99+
    2022-11-13
  • Qt实现制作简单的计算器
    目录前言完整代码效果图前言 今天使用qt制作了一个很简单的计算器,觉得挺有意思的,所以在这里跟大家分享一下。 这里先跟大家说说使用到的函数: 1、槽连接函数 connect(信号发送...
    99+
    2022-12-19
    Qt实现计算器 Qt计算器
  • XHTML怎么制作简单网页
    这篇文章主要介绍“XHTML怎么制作简单网页”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“XHTML怎么制作简单网页”文章能帮助大家解决问题。   用一分钟制作自...
    99+
    2022-10-19
  • JavaScript实现网页版简易计算器功能
    本文实例为大家分享了JavaScript实现网页版计算器功能的具体代码,供大家参考,具体内容如下 运行效果 运行:直接将下面的代码放到任意文本文件中,文件后缀名改为.html,然后...
    99+
    2022-11-13
  • 用javascript实现简单计算器
    本文实例为大家分享了javascript实现简单计算器的具体代码,供大家参考,具体内容如下 设计一个简单的计算器 代码 <body> <a>第一个...
    99+
    2022-11-12
  • Android Studio制作一个简单的计算器APP
    虽然现在我们日常生活中很少用到计算器,但是第一次尝试在Android Studio上做一个计算器 程序设计步骤: (1)在布局文件中声明编辑文件框EditText,按钮Button等组件。 (2)在MainActivity中获取组件实例。 ...
    99+
    2023-10-03
    android android studio
  • 怎么用python制作简单计算器功能
    今天小编给大家分享一下怎么用python制作简单计算器功能的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。效果如图:主要思路:...
    99+
    2023-06-29
  • 怎么使用Qt制作简单的计算器
    这篇文章主要讲解了“怎么使用Qt制作简单的计算器”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么使用Qt制作简单的计算器”吧!前言这里先跟大家说说使用到的函数:槽连接函数connect(信...
    99+
    2023-07-04
  • Python制作简单的网页爬虫
    1.准备工作: 工欲善其事必先利其器,因此我们有必要在进行Coding前先配置一个适合我们自己的开发环境,我搭建的开发环境是: 操作系统:Ubuntu 14.04 LTS Python版本:2.7.6 ...
    99+
    2022-06-04
    爬虫 简单 网页
  • js制作简易计算器
    本文实例为大家分享了js制作简易计算器的具体代码,供大家参考,具体内容如下 要制作一个如图所示的简易计算器,首先要建立一个表单,制作出如图所示的样子。 <table bo...
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作