返回顶部
首页 > 资讯 > 前端开发 > JavaScript >js制作简易计算器
  • 665
分享到

js制作简易计算器

2024-04-02 19:04:59 665人浏览 泡泡鱼
摘要

本文实例为大家分享了js制作简易计算器的具体代码,供大家参考,具体内容如下 要制作一个如图所示的简易计算器,首先要建立一个表单,制作出如图所示的样子。 <table bo

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

要制作一个如图所示的简易计算器,首先要建立一个表单,制作出如图所示的样子。


<table border="1" cellspacing="0" >
   <tr><th colspan="2">购物简易计算器</th></tr>
   <tr>
    <td>第一个数</td>
       <td><input type="text" id="inputId1" /></td>
   </tr>
   <tr>
    <td>第二个数</td>
       <td><input type="text" id="inputId2" /></td>
   </tr>
   <tr>
    <td><button type="button" onclick="cal('+')" >+</button></td>
    <td><button type="button" onclick="cal('-')" >-</button>
    <button type="button" onclick="cal('*')" >*</button>
    <button type="button" onclick="cal('/')" >/</button></td>
   </tr>
   <tr>
    <td>计算结果</td>
    <td><input type="text" id="resultId"/></td>
   </tr>
</table>

onclick使用cal()方法,其实一开始我是使用add,sub,mul,div四种方法的,后来发现这四个方法除了算术运算符不一样,其他的地方都一样,所以选择使用一个方法,点击button,传给方法里的算术运算符不一样,代码如下:


<script type="text/javascript">
 function cal(type){
  var num1 = document.getElementById('inputId1');
  var num2 = document.getElementById('inputId2');
  var result;
   switch(type){
    case '+':
    result = parseInt(num1.value) + parseInt(num2.value);
    break;
    case '-':
    result = parseInt(num1.value) - parseInt(num2.value);
    break;
    case '*':
    result = parseInt(num1.value) * parseInt(num2.value);
    break;
    case '/':
    result = parseInt(num1.value) / parseInt(num2.value);
    break;
  }
 var resultObj = document.getElementById('resultId');
 resultObj.value = result;
 }
</script>

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

--结束END--

本文标题: js制作简易计算器

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

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

猜你喜欢
  • js制作简易计算器
    本文实例为大家分享了js制作简易计算器的具体代码,供大家参考,具体内容如下 要制作一个如图所示的简易计算器,首先要建立一个表单,制作出如图所示的样子。 <table bo...
    99+
    2024-04-02
  • Python制作简易计算器功能
    本文实例为大家分享了Python制作简易计算器的具体代码,供大家参考,具体内容如下 简易计算器 简易计算器功能: 实现输入,计算,输出功能;可以计算基本的加减乘除功能;处理除法中除数...
    99+
    2024-04-02
  • Androidstudio制作简易计算器功能
    本文实例为大家分享了Android studio制作简易计算器的具体代码,供大家参考,具体内容如下 布局如下: 布局文件代码: <xml version="1.0" enco...
    99+
    2024-04-02
  • 使用JS实现简易计算器
    使用JS完成简易计算器,供大家参考,具体内容如下 要求:输入的值只能是数字,使用正则表达式 onchange():值改变时执行事件 onblur():鼠标移出时执行事件 <...
    99+
    2024-04-02
  • 原生js实现简易计算器
    本文实例为大家分享了js实现简易计算器的具体代码,供大家参考,具体内容如下 最近,博主闲来无聊,就没事用js写了个简易计算器(博主是搞后端的,不是前端>_<)。其实,感觉...
    99+
    2024-04-02
  • JS怎么实现简易计算器
    这篇文章主要介绍了JS怎么实现简易计算器的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JS怎么实现简易计算器文章都会有所收获,下面我们一起来看看吧。 一、题目描述 用户在弹...
    99+
    2024-04-02
  • 基于Unity制作一个简易的计算器
    目录一、前言二、效果图及源工程三、实现1.界面搭建2.代码实现四、后记一、前言 Hello,又见面了,今天分享如何使用Unity制作计算器,难度中等,可以用来学习,或者当成其他项目的...
    99+
    2024-04-02
  • Android studio怎么制作简易计算器功能
    这篇文章主要介绍“Android studio怎么制作简易计算器功能”,在日常操作中,相信很多人在Android studio怎么制作简易计算器功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家...
    99+
    2023-06-30
  • js实现一个简易的计算器
    利用原生js实现一个简易的计算器(附详细注释),供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <...
    99+
    2024-04-02
  • 利用JS实现加减简易计算器
    目录前言实现思路前言 这个题目前一周左右在小红书刷到,想着就去就做一下,第一版因为思路不清晰,没有完整的实现功能。后来忙着改论文,就一直拖到现在。想着回去在看看这篇,发现已经找不到...
    99+
    2024-04-02
  • 如何使用Unity制作一个简易的计算器
    这篇文章给大家分享的是有关如何使用Unity制作一个简易的计算器的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、前言Hello,又见面了,今天分享如何使用Unity制作计算器,难度中等,可以用来学习,或者当成其...
    99+
    2023-06-29
  • Android Studio简易计算器
    目录 第一步,创建新项目 第二步,设计UI 第三步,实现计算逻辑 第四步,测试应用程序 随着移动互联网的普及,手机应用程序已经成为人们生活中不可或缺的一部分。计算器是一类被广泛使用的应用程序之一,因此学习如何开发一款简易的计算器应用程序是...
    99+
    2023-09-17
    android studio android
  • 【Android Studio】简易计算器
    简易计算器要求: 1,操作简单,易于掌握,界面简单。 2.方便进行加,减,乘,除等操作。数字保留小数点后两位。 3.包含小数点运算和输入回退功能。 4.能够进行多次叠加运算。 5.系统能够进行多次叠加...
    99+
    2023-09-21
    android studio python android
  • Python之简易计算器
      思路:学会运用正则表达式把需要先进行计算的匹配出来,然后再一步步的去算,把先算出来的值替换原来的值,再进一步的把++,--等号变成我们正常的数学上的符号,然后再进行一步步的替换,最终把带括号的都计算出来,再调用一次加减函数进行计算 ...
    99+
    2023-01-30
    计算器 简易 Python
  • AndroidStudio实现简易进制转换计算器
    本文实例为大家分享了Android Studio实现简易进制转换计算器的具体代码,供大家参考,具体内容如下 1、问题描述 设计并实现一个数制转换器,能够对输入的任- -进制类型的数值...
    99+
    2024-04-02
  • python制作简单计算器功能
    本文实例为大家分享了python实现简单计算器功能的具体代码,供大家参考,具体内容如下 效果如图: 主要思路: 用列表保存按下的键,按下等于,转换为字符串,利用内置函数eval计算...
    99+
    2024-04-02
  • 用Java制作简单的计算器
    本篇文章主要是提供思路,当然文章末尾也又提供了源代码。 代码也是写了几天,重要的理解,不是直接复制粘贴就交作业了。 转载请注明出处,尊重作者劳动成果。 目录 界面的设计: 事件的响应: 计算: 详细代码如下:  总结: 要制作一个简...
    99+
    2023-10-09
    java spring jvm
  • JavaScript制作简单网页计算器
    本文实例为大家分享了JavaScript制作简单网页计算器的具体代码,供大家参考,具体内容如下 一、题目 利用JavaScript中的函数,完成数字加、减、乘、除的运算,实现一个简单...
    99+
    2022-11-13
    js 计算器
  • JavaScript制作简单计算器功能
    本文实例为大家分享了JavaScript制作简单计算器的具体代码,供大家参考,具体内容如下 1. 任务要求 1)掌握数据的类型转换 2)学会获取文本框控件的数据以及给相应控件赋值 3...
    99+
    2024-04-02
  • js实现简易计数器功能
    本文实例为大家分享了js实现简易计数器功能的具体代码,供大家参考,具体内容如下 实现简易计数器 可进行三个操作,开始计数,暂停计数,复位操作 (使用计时函数事件) <html&...
    99+
    2022-11-13
    js 计数器
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作