纯js写计算器

最新推荐文章于 2024-04-25 09:54:19 发布
最新推荐文章于 2024-04-25 09:54:19 发布
阅读量305 收藏 1
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35881389/article/details/53350027
版权
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script type="text/javascript">
      var body_=document.getElementsByTagName('body');
      //先创建最外层div
      var maindiv=document.createElement('div');
      maindiv.style.background='#ccc';
      maindiv.style.width='400px';
      maindiv.style.height='600px';
      maindiv.style.fontSize='0';
      maindiv.style.borderRadius='10px';
      //创建显示器
      var view=document.createElement('div');
      view.style.width='auto';
      view.style.height='100px';
      view.style.background='#efefef';
      view.innerHTML='0';
      view.style.borderTopLeftRadius='20px';
      view.style.borderTopRightRadius='20px';
      view.style.lineHeight='100px';
      view.style.fontSize='4rem';
      view.style.textAlign='right';
      view.style.paddingRight='10px';
      view.style.border='1px solid rgb(150,150,150)';
      maindiv.appendChild(view);
      //创建按键
      for(var i=0;i<19;i++){
        var itemdiv=document.createElement('div');
        itemdiv.style.background='rgb(224,224,224)';
        itemdiv.style.width='98px';
        itemdiv.style.height='98px';
        itemdiv.style.fontSize='3rem';
        itemdiv.οnclick=alick_item;
        itemdiv.style.verticalAlign='top';
        itemdiv.style.textAlign='center';
        itemdiv.style.lineHeight='98px';
        itemdiv.style.border='1px solid #999';
        itemdiv.style.display='inline-block';
        //数字处理
        if (i>=4&&i<=6) {
          itemdiv.innerHTML=i+3;
        }else if (i>=8&&i<=10) {
          itemdiv.innerHTML=i-4;
        }else if (i>=12&&i<=14) {
          itemdiv.innerHTML=i-11;
        }else if (i==16) {
          itemdiv.style.width='198px';
          itemdiv.innerHTML='0';
        }else{
        var a;
        switch (i) {
          case 0:
            a='AC';
            break;
            case 1:
              a='+/-'
              break;
              case 2:
                a='%'
                break;
                case 3:
                  a='/';
                  itemdiv.style.background='rgb(246,144,65)';
                  break;
                  case 7:
                    a='*'
                    itemdiv.style.background='rgb(246,144,65)';
                    break;
                    case 11:
                      a='-'
                      itemdiv.style.background='rgb(246,144,65)';
                      break;
                        case 15:
                          a='+'
                          itemdiv.style.background='rgb(246,144,65)';
                          break;
                          case 17:
                            a='.'
                            break;
                            case 18:
                              a='='
                              itemdiv.style.background='rgb(246,144,65)';
                              itemdiv.οnclick=css;
                              break;
                              default:


                            }
                            itemdiv.innerHTML=a;}
                            maindiv.appendChild(itemdiv);




                          }
      body_[0].appendChild(maindiv);


      var num1='',num2='',char='';
      function alick_item(){
        var a=this.innerHTML
        if (num1.length<11&&num2.length<11) {


          if (a=='AC') {
            num1=num2=char='';
            view.innerHTML='0';
          }else if (num1.indexOf('.')!=-1) {
            if (a=='.') {


            }else {
              num1+=a;
              view.innerHTML=num1;
            }
          }else{
            if (char==''||char=='null') {
              if (a>0||a<10||a==".") {
                num1+=a;
                view.innerHTML=num1;
              }else if (a=='+'||a=='-'||a=='*'||a=='/'||a=='%') {
                char=a;
              }
            }else if (a>0||a<10||a=='.') {
                num2+=a;
                view.innerHTML=num2;
              }
            }
          }else{


          }
        }


        function css(){
          switch (char) {
            case '+':
              view.innerHTML=Number(num1)+Number(num2);
              break;
              case '-':
                view.innerHTML=num1-num2;
                break;
                case '*':
                  view.innerHTML=num1*num2;
                  break;
                  case '/':
                    view.innerHTML=num1/num2;
                    break;
                    case '%':
                      view.innerHTML=num1%num2;
                      break;
            default:


          }
        }


    </script>
  </body>
</html>
少年与梦1
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯JavaScript实现计算器
11-15
用JavaScript实现一个运算式的计算 a. 支持加，减，乘，除（+, -, *, /) b. 支持输入合法的数字，包括小数，不考虑非法输入和数字越界（0-9, .） sample : "3+8.3*1" 结果是11.3 ”3.2 + 0 -8.7“ 结果是-5.5 附加题：在运算式计算中支持括号: ”(“, ”)”.
纯JS写的计算器
xuxiaoxie2012的专栏
02-29 98
 最近工作比较轻松，无聊的时候自己尝试写了一个简单的计算器，还望各位指正 以下为运行效果   &lt;html&gt; &lt;head&gt; &lt;title&gt;CalSelf.html&lt;/title&gt; &lt;style type="text/css"&gt; input { width: 50px; } &lt;/style..
js实现计算器方法
最新发布
geng97280的博客
04-25 99
【代码】js实现计算器方法。
利用原生js编写简单计算器-Sander的博客-CSDN博客
syue779的博客
10-30 2143
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> /*计算器盒子*/ .di
原生ＪＳ计算器
幽灵
10-30 345
使用原生JS写的简易计算器，由于时间紧，所以比较匆忙，如果大家发现有bug，请私信我，以便不断改进，谢谢各位！
JS实现简单计算器
weixin_41939212的博客
07-28 3881
JS实现简单计算器 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Document&amp;lt;
纯js代码实现简单计算器
10-23
总结起来，这个简单的JavaScript计算器利用了HTML和JavaScript的交互能力，实现了基本的四则运算。它通过获取用户输入、解析运算符、执行计算和显示结果，展示了JavaScript在动态更新网页内容方面的强大功能。对于...
纯javascript代码编写计算器程序.pdf
09-29
纯javascript代码编写计算器程序.pdf
JSCalc:纯 Javascript 计算器
06-21
**JSCalc:纯 Javascript 计算器** `JSCalc` 是一个完全基于 JavaScript 开发的计算器应用，它展示了如何利用 HTML 结构、CSS 样式以及 jQuery 库来构建一个功能齐全的用户界面。JavaScript 作为一种强大的客户端...
JS实现科学计算器
wdx888的专栏
06-10 1815
var endNumber=true var mem=0 var carry=10 var hexnum="0123456789abcdef" var angle="d" var stack="" var level="0" var layer=0 //数字键 function inputkey(key) {  var index=key.charCodeAt(0);  i
javascript-科学计算器
梧桐下的四叶草
08-07 636
6-2 科学计算器 * {font-size: 12px;}//规定所有字体样式 body {background-color:buttonface; border-style: none;}//窗口主体样式 .button {width:50px;height: 30px;}//按钮大小 #txt_displ
html+css+js实现科学计算器
findhappy117的博客
09-20 9449
代码地址如下：http://www.demodashi.com/demo/13751.html 项目描述 纯html+css+js实现一个科学计算器，支持平方开方指数对数等基本函数，支持键盘输入，有简单和高级两种模式 文件结构 纯html+css+js实现，文件结构非常简单，就三个文件。 演示效果 实验设计 将按钮的value设置为按钮显示的字符，当点击按钮的时候，输入框增加的字符为按...
js写的计算器
高级数据分析师，分享Python知识
11-07 167
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;计算器&lt;/title&gt; &lt;/head&gt; &lt;style type="text/css"&gt; input{width:100px;height: 20px;margin-left: 20px;margin-top: 10
javascript编写计算器
muli
03-01 570
javascript编写计算器 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;07-计算器&lt;/title&gt; &lt;script type="text/jav
js 计算器
gwalking的博客
09-06 368
Document input{  width:60px;  height:60px;  font-size:25px;  }  button{   width:60px;  height:60px;  font-size:25px;  }  #out{    width:290px;  height:60px;  font-size:
JavaScript版科学计算器（收藏品）
Rock870210的专栏
08-10 1255
收藏品： 科学计算器
js做的计算器
wuxiaobingandbob的专栏
03-30 586
js加减乘除计算器代码 body,ul{ margin:0px; padding:0px;} body{ background:#AF6332} li{ list-style:none;} .fl{ float:left;} .fr{ float:right;} .clearfix:after{ content:""; display:block;clear:both} .cle
简单的JavaScript计算器
Yonggie的博客
04-29 351
带有enter键出结果， 可以直接复制粘贴。 <html> <head> </head> <title> calculator</title> <script src="jquery-3.3.1.min.js"> </script> <style> #container{ ...
html和js写计算器
04-27
以下是一个简单的 HTML 和 JavaScript 计算器的示例代码： ```html <!DOCTYPE html> <html> <head> <title>计算器</title> <meta charset="UTF-8"> <style> #calculator { width: 200px; height: 300px; border: 1px solid #ccc; padding: 10px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; } </style> </head> <body> <div id="calculator"> <input type="text" id="result" value="0" disabled> <button onclick="clearResult()">清空</button> <button onclick="calculate('+')">+</button> <button onclick="calculate('-')">-</button> <button onclick="calculate('*')">*</button> <button onclick="calculate('/')">/</button> <button onclick="calculate('%')">%</button> <button onclick="calculate('=')">=</button> <button onclick="appendToResult('1')">1</button> <button onclick="appendToResult('2')">2</button> <button onclick="appendToResult('3')">3</button> <button onclick="appendToResult('4')">4</button> <button onclick="appendToResult('5')">5</button> <button onclick="appendToResult('6')">6</button> <button onclick="appendToResult('7')">7</button> <button onclick="appendToResult('8')">8</button> <button onclick="appendToResult('9')">9</button> <button onclick="appendToResult('0')">0</button> </div> <script> let currentResult = '0'; function appendToResult(value) { if (currentResult === '0') { currentResult = value; } else { currentResult += value; } document.getElementById('result').value = currentResult; } function clearResult() { currentResult = '0'; document.getElementById('result').value = currentResult; } function calculate(operator) { switch(operator) { case '+': currentResult = eval(currentResult + '+0'); break; case '-': currentResult = eval(currentResult + '-0'); break; case '*': currentResult = eval(currentResult + '*1'); break; case '/': currentResult = eval(currentResult + '/1'); break; case '%': currentResult = eval(currentResult + '/100'); break; case '=': currentResult = eval(currentResult); break; } document.getElementById('result').value = currentResult; } </script> </body> </html> ``` 在这个例子中，我们使用 HTML 和 CSS 创建了一个简单的计算器界面。其中，我们使用了一个包含所有计算器按钮的 `div` 元素，并将其设置为具有列方向的 flex 布局。我们还给计算器添加了一个输入框，以显示用户的输入和计算结果。 在 JavaScript 中，我们定义了三个函数，分别用于追加数字到当前结果、清空结果以及执行计算操作。这些函数与 HTML 中的按钮一一对应，并通过 `onclick` 属性绑定到按钮上。在执行计算操作时，我们使用了 `eval()` 函数来计算表达式的值，并将其存储为当前结果。最后，我们将当前结果更新到输入框中，以便用户查看计算结果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值