JS 学习计算器编写

最新推荐文章于 2021-10-22 19:15:04 发布
最新推荐文章于 2021-10-22 19:15:04 发布
阅读量425 收藏
点赞数 1
文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sxluohaibo/article/details/51505458
版权
<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title>calculator</title>

      <script >
      //清除文本框的值
      var currentNum;  //符号点击前保存的数值
      var operation;
      var specialClickOption = 0;
      var isToNew = 1;
      function NumberClear() {
        var numbertext = document.getElementById('numberMessage');
        currentNum = 0;  //符号点击前保存的数值
        operation = 0;
        specialClickOption = 0;
        numbertext.value="";
        isToNew = 1;
      }

      function NumberClick(num){ // 0-9 普通的数字点击
        if(num==-1)
          num=".";
        var btn = document.getElementById('NumberBtn');
        var numbertext = document.getElementById('numberMessage');
        if (isToNew == 1) {
          numbertext.value = numbertext.value + num;
        }else {
          isToNew = 1;
          numbertext.value = num;
        }
      }

      function SpecialClick(sp){ //＋ － ＊ ／运算符点击
        var numbertext = document.getElementById('numberMessage');
        var cuValue = numbertext.value;
        currentNum = parseFloat(cuValue);
        console.log(currentNum);
        numbertext.value = "";
        operation =  sp;
      }


      function LastResult(){ //＝等号点击
          var numbertext = document.getElementById('numberMessage');
          isToNew = 0;
          switch (operation) {
            case '+':
              numbertext.value =  String(parseInt(numbertext.value) + currentNum);
              break;
            case '-':
              numbertext.value =  String(currentNum - parseInt(numbertext.value));
              break;
            case '*':
              numbertext.value =  (numbertext.value * currentNum).toFixed(2);
              break;
            case '/':
              numbertext.value =  (currentNum / numbertext.value).toFixed(2);
              break;
            default:

          }
      }

      function FetchQuYU(){ //取余
          var numbertext = document.getElementById('numberMessage');
          numbertext.value = numbertext.value / 100;
      }

      function SpecialPlusAndJ(){

          console.log("xxxxx");
          var numbertext = document.getElementById('numberMessage');
          if (specialClickOption == 0) {
              numbertext.value = '-' + numbertext.value;
              specialClickOption = 1;
          }else {
            console.log(numbertext.value);
            numbertext.value = numbertext.value.substring(1,numbertext.value.length-1);
            specialClickOption = 0;
          }

      }

      </script>
    </head>
    <body bgcolor="affff" >
      <table border="1" align="center" >
        <tr align="center">
          <td>
          <input type="text" id="numberMessage" style="height:40px; width:120px">
        </td>
        </tr>

        <tr>
          <td>
          <input type="button" id="Special" value="AC" οnclick="NumberClear()">
          <input type="button" id="Special" value="+/-" οnclick="SpecialPlusAndJ()">
          <input type="button" id="Special" value="%" οnclick="FetchQuYU()">
          <input type="button" id="Special" value="/" οnclick="SpecialClick('/')">
        </td>
        </tr>

        <tr>
          <td>
          <input type="button" id="NumberBtn" value="7" οnclick="NumberClick(7)">
          <input type="button" id="NumberBtn" value="8" οnclick="NumberClick(8)">
          <input type="button" id="NumberBtn" value="9" οnclick="NumberClick(9)">
          <input type="button" id="NumberBtn" value="*" οnclick="SpecialClick('*')">
        </td>
        </tr>
        <tr>
          <td>
          <input type="button" id="NumberBtn" value="4" οnclick="NumberClick(4)">
          <input type="button" id="NumberBtn" value="5" οnclick="NumberClick(5)">
          <input type="button" id="NumberBtn" value="6" οnclick="NumberClick(6)">
          <input type="button" id="-" value="-" οnclick="SpecialClick('-')">
          </td>
        </tr>
        <tr>
          <td>
          <input type="button" id="NumberBtn" value="1" οnclick="NumberClick(1)">
          <input type="button" id="NumberBtn" value="2" οnclick="NumberClick(2)">
          <input type="button" id="NumberBtn" value="3" οnclick="NumberClick(3)">
          <input type="button" id="*" value="+" οnclick="SpecialClick('+')">
          </td>
        </tr>
        <tr>
          <td>
          <input type="button" id="0" value="0" οnclick="NumberClick(0)">
          <input type="button" id="NumberBtn" value="." οnclick="NumberClick(-1)">
          <input type="button" id="=" value="=" οnclick="LastResult()">

          </td>
        </tr>
      </table>

    </body>
</html>
sxluohaibo
关注
js虚拟计算器
Demo_csdn
10-15 564
今天分享一个计算器的代码实现效果 可以实现加，减，乘，除的简单运算 也是用js写的，喜欢的可以拿去玩玩， 有什么写得不好的，下面评论，我也好修改 这是HTML的效果图： 下面是一些代码的展示 这是HTML的代码 <h1>简易计算器</h1> <div id="display" style="height: 80px;width: 400px;backgrou...
js基础项目-计算器的实现
05-04
js基础项目，目的：掌握基础知识，能够熟练应用，提升技能，强化思维。
JS基础，课堂作业，计算器
a2221111的博客
09-19 93
网页内的简单计算器 ...
JavaScript实现循环点击按钮弹出对应的数字
sleepwalker_1992的专栏
07-02 4000
问题：循环点击按钮弹出对应的数字&lt;body&gt; &lt;input type="button" value="按钮1"&gt; &lt;input type="button" value="按钮2"&gt; &lt;input type="button" value="按钮3"&gt; &lt;input t
Javascript获取value值的三种方法及注意点
热门推荐
Akikang的博客
06-25 12万+
  今天在js中用id名直接获取value值时遇到点问题，所以顺便做一下总结。   JavaScript获取value值，主要有以下三种：         1.用document.getElementById(“id名”).value来获取（例1）；         2.通过form表单中的id名或者name名来获取（例2）。        3.通过id名（不用写getElementById，也不...
JavaScript编写简单的计算器
10-23
综上所述，通过学习这个简单计算器的编写过程，我们可以掌握HTML页面布局、CSS样式设计以及JavaScript基础编程的技巧。这些技能对于前端开发人员来说是必不可少的，而且通过具体的实例学习，更容易理解理论知识在...
用js编写的简单的计算器代码程序
10-23
标签部分“js编写计算器 js计算器代码”进一步阐明了文档的重点内容，即利用JavaScript编写计算器的代码。这表明文章是面向已经对JavaScript有一定了解的开发者，他们希望通过编写一个实用的程序来加深对JavaScript...
使用JavaScript 编写简单计算器
10-25
总结起来，创建一个简单的JavaScript计算器涉及到HTML、CSS和JavaScript的基本知识，包括事件处理、DOM操作和简单的数学计算。在这个过程中，我们还可以学习到如何在JavaScript中定义和调用函数，以及如何安全地处理...
js编写简易的计算器
12-28
本文实例为大家分享了js编写简易计算器的具体代码，供大家参考，具体内容如下 使用绑定时间触发 加减乘除 加： 减： 乘： 除： 源代码： <body> 第一个数：<input type=text id=num1 /><p></p> ...
javascript编写简易计算器
10-19
在本教程中，我们将探讨如何使用...通过这个项目，我们可以学习到网页交互的基本原理，以及如何使用JavaScript处理用户输入并执行计算。这是一个很好的实践项目，可以帮助初学者巩固基础，同时提升问题解决能力。
JS中如何实现每点击一次按钮，显示一条信息
banyiji3580的博客
08-12 597
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var clickNumber = 0; function...
[JQuery]Dom循环点击处理插件DomClickRange
sky 胡萝卜星星
03-05 2176
Web交互中，有种很常见的情况就是，当某个dom被第一次点击时，执行某种操作，第二次被点击时，执行另一种操作……第N次被点击时，执行第N种操作，当N+1时，有开始执行第一种操作，如此往复循环…… 就这么一个dom的重复点击事件我也能无聊到做个插件出来，当真脑残，但既然做出来了，那就再次记录下，记录自己的脑残人生！ PS：此插件基于JQuery，以下是相关代码，其中参数methodName可
Javascript Number.MIN_VALUE
weixin_30832983的博客
05-30 279
一、Number.MIN_VALUE属性属于静态Number对象。这代表了尽可能小的正数的JavaScript可以工作的常量。 该常量的实际值是 5 x 10-324 语法访问属性： var val = Number.MIN_VALUE; <!doctype html> <html> <head> <script type="t...
第四节（循环，数组，异常，九九乘法表，计算器）
Phoebe_Wu2016的博客
01-21 149
1:循环<body> <script type="text/javascript"> /* <1> 语句 1 初始化循环中所用的变量 (var i=0) <2> 语句 1 是可选的，也就是说不使用语句 1 也可以 <3> 可以在语句 1 中初始化任...
制作网页版简易计算器（Calculator）
吟游诗人——吟唱生命的不朽
08-12 1万+
网页版计算器的制作比想象中要来的容易，界面上只需固定计算器面板的宽高和按钮的宽高即可。先放张图： 代码下载与演示：https://codepen.io/yinyoupoet/pen/oeewWw讲一下设计思路： 首先，将按键分成四种类型——数字与符号、等于、AC、CE。 Ans是保存上一次结果的，在这里点了没用。 如果点了数字，就显示在上面的input text框（以下称输出框）内，并追加
html如何到点击按钮显示数字,JS点击按钮显示出点击数写法
weixin_26950847的博客
06-28 2534
实现步骤：1、写一个p标签，指定一个id选择器，输入数字！2、写一个input标签，指定type属性的属性值为button，创建一个按钮，加入onclick事件！3、为p标签和input标签指定相关的CSS样式(可以省略)4、用js创建一个自加的函数，在函数中用document对象的getElementById()方法，选中p标签。5、通过innerHTML获取p标签的内容，实现自加！！实现代码如...
html+css+js的ios计算器实现2
lutrra的博客
10-22 1287
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
JS中onclick事件的一个坑
风止潇湘
06-01 1万+
js onclick 坑
用Js编写一个简易计算器。
lian_butaiyou的博客
11-22 2660
用Js编写一个简易计算器。 Document + - * / %
JavaScript编写计算器
最新发布
05-12
好的，以下是一个简单的 JavaScript 计算器： ```html <!DOCTYPE html> <html> <head> <title>JavaScript Calculator</title> <style> body { background-color: #f2f2f2; font-family: Arial, sans-serif; } #calculator { background-color: #fff; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.3); margin: 50px auto; padding: 20px; text-align: center; width: 300px; } #result { font-size: 36px; margin-bottom: 20px; } button { background-color: #4CAF50; border: none; border-radius: 5px; color: #fff; cursor: pointer; font-size: 16px; margin: 5px; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; } button:hover { background-color: #3e8e41; } button:active { background-color: #3e8e41; box-shadow: 0 5px #666; transform: translateY(4px); } </style> </head> <body> <div id="calculator"> <div id="result"></div> <button onclick="clearDisplay()">C</button> <button onclick="appendInput('(')">(</button> <button onclick="appendInput(')')">)</button> <button onclick="appendInput('/')">÷</button> <br> <button onclick="appendInput('7')">7</button> <button onclick="appendInput('8')">8</button> <button onclick="appendInput('9')">9</button> <button onclick="appendInput('*')">x</button> <br> <button onclick="appendInput('4')">4</button> <button onclick="appendInput('5')">5</button> <button onclick="appendInput('6')">6</button> <button onclick="appendInput('-')">-</button> <br> <button onclick="appendInput('1')">1</button> <button onclick="appendInput('2')">2</button> <button onclick="appendInput('3')">3</button> <button onclick="appendInput('+')">+</button> <br> <button onclick="appendInput('0')">0</button> <button onclick="appendInput('.')">.</button> <button onclick="calculate()">=</button> </div> <script> let input = ''; const result = document.getElementById('result'); function appendInput(value) { input += value; result.innerHTML = input; } function clearDisplay() { input = ''; result.innerHTML = ''; } function calculate() { try { const answer = eval(input); result.innerHTML = answer; input = ''; } catch (error) { alert('Invalid input!'); clearDisplay(); } } </script> </body> </html> ``` 这个计算器具有基本的加、减、乘、除、括号和小数点功能。你可以在 HTML 中添加更多的按钮来扩展其功能，比如添加正弦、余弦和正切等数学函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值