扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > html >JavaScript中如何实现简易计算器
  • 639

0
分享到

JavaScript中如何实现简易计算器

2024-04-02 19:04:59 639人浏览 安东尼
摘要

这篇文章给大家分享的是有关javascript中如何实现简易计算器的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。具体内容如下<head>  <meta

这篇文章给大家分享的是有关javascript中如何实现简易计算器的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

具体内容如下

<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style type="text/CSS">
  * {
   padding: 0;
   margin: 0;
  }
  li {
   list-style: none;
  }
  body {
   background: #940032;
  }

  #counter {
   width: 500px;
   height: 420px;
   background: #939;
   margin: 50px auto 0;
   position: relative;
  }

  #counter h3 {
   line-height: 42px;
   padding-left: 15px;
   font-size: 14px;
   font-family: arial;
   color: #ff3333;
  }

  #counter a {
   font-weight: nORMal;
   text-decoration: none;
   color: #ff3333;
  }

  #counter a:hover {
   text-decoration: underline;
  }

  #bg {
   width: 280px;
   height: 200px;
   border: 3px solid #680023;
   background: #990033;
   filter: alpha(opacity=80);
   opacity: 0.8;
   position: absolute;
   left: 50%;
   top: 115px;
   margin-left: -141px;
  }

  #counter_content {
   width: 250px;
   position: absolute;
   top: 130px;
   left: 130px;
   z-index: 1;
  }

  #counter_content h4 {
   margin-bottom: 10px;
  }

  #counter_content h4 input {
   border: none;
   width: 223px;
   height: 30px;
   line-height: 30px;
   padding: 0 10px;
   background: url(img/ico.png) no-repeat;
   text-align: right;
   color: #333;
   font-size: 14px;
   font-weight: bold;
  }

  #counter_content div {
   width: 250px;
  }

  #counter_content input {
   width: 60px;
   height: 30px;
   line-height: 30px;
   float: left;
   background: url(img/ico.png) no-repeat -303px 0;
   text-align: center;
   color: #fff;
   cursor: pointer;
   margin: 0 1px 4px 0;
   border: 0;
  }

  #counter_content div > input:hover {
   background: url(img/ico.png) no-repeat -243px 0;
  }

  #counter p {
   width: 500px;
   position: absolute;
   bottom: 20px;
   left: 0;
   color: #ff3333;
   text-align: center;
   font-size: 12px;
  }
 </style>
</head>
<body>
<div id="counter">
 <h3>简易计算</h3>
 <div id="counter_content">
  <h4><input id="input1" type="text" value="0"/></h4>
  <div id="div1">
   <input type="button" value="7" onclick="kick('7')"/>
   <input type="button" value="8" onclick="kick('8')"/>
   <input type="button" value="9" onclick="kick('9')"/>
   <input type="button" value="+" onclick="kick('+')"/>
   <input type="button" value="4" onclick="kick('4')"/>
   <input type="button" value="5" onclick="kick('5')"/>
   <input type="button" value="6" onclick="kick('6')"/>
   <input type="button" value="-" onclick="kick('-')"/>
   <input type="button" value="1" onclick="kick('1')"/>
   <input type="button" value="2" onclick="kick('2')"/>
   <input type="button" value="3" onclick="kick('3')"/>
   <input type="button" value="*" onclick="kick('*')"/>
   <input type="button" value="0" onclick="kick('0')"/>
   <input type="button" value="C" onclick="kick('C')"/>
   <input type="button" value="=" onclick="kick('=')"/>
   <input type="button" value="/" onclick="kick('/')"/>
  </div>
 </div>
</div>
</body>
<script>
 var showInput = document.getElementById("input1");
 var isClear = false;
 var tempStr = "";
 var clacType = "";
 var isContinue = true;
 function kick(clickValue) {
  switch (clickValue) {
   case "=":
    if (tempStr != "" && clacType != "") {
     showInput.value = clac(tempStr, showInput.value, clacType);
     isContinue = false;
     clacType = "";
    }
    break;
   case "+":
   case "-":
   case "*":
   case "/":
    //如果预存的操作符不为空 表示表示连续操作
    if (clacType != "" && !isContinue) { //先执行计算
     tempStr = clac(tempStr, showInput.value, clacType);
     isClear = true;
     clacType = clickValue;
    } else {
     tempStr = showInput.value; //点击操作符之后 预存字符
     isClear = true;//表示点击了操作符
     clacType = clickValue;//预存操作符
    }
    isContinue = true;
    break;
   case "C":
    showInput.value = "0";
    isClear = false;
    tempStr = "";
    clacType = "";
    break;
   default://普通的数字按钮点击
    showInput.value = showInput.value == "0" ? "" : showInput.value;
    isContinue = false;
    if (isClear) {
     showInput.value = "";
     showInput.value += clickValue;
     isClear = false;
    } else {
     showInput.value += clickValue;
    }
    break;
  }
 }


 function clac(num1, num2, type) {
  switch (type) {
   case "+":
    return Number(num1) + Number(num2);
   case "-":
    return Number(num1) - Number(num2);
   case "*":
    return Number(num1) * Number(num2);
   case "/":
    return Number(num1) / Number(num2);
   default:
    break;
  }
  }
 </script>

感谢各位的阅读！关于“JavaScript中如何实现简易计算器”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

--结束END--

本文标题: JavaScript中如何实现简易计算器

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

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

猜你喜欢
  • JavaScript中如何实现简易计算器
    这篇文章给大家分享的是有关JavaScript中如何实现简易计算器的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。具体内容如下<head>  <meta...
    99+
    2024-04-02
  • JavaScript实现简易加法计算器
    本文实例为大家分享了JavaScript实现加法计算器的具体代码，供大家参考，具体内容如下 具体要求： 1.页面布局: 2.还需要在点击计算按钮之后在页面上显示计算结果 具体实现...
    99+
    2024-04-02
  • 基于JavaScript实现简易计算器
    本文实例为大家分享了JavaScript实现简易计算器的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"&g...
    99+
    2024-04-02
  • JavaScript实现简易计算器案例
    本文实例为大家分享了JavaScript模仿windows计算器，供大家参考，具体内容如下 功能： 1、实现单机按钮录入数字2、实现基础四则运算功能，并添加必要的异常处理，例如，除数...
    99+
    2024-04-02
  • javascript实现简易的计算器功能
    本文实例为大家分享了javascript实现简易的计算器的具体代码，供大家参考，具体内容如下 javascript实现简易计算器，只有两个input输入框，简单实现加减乘除： <...
    99+
    2024-04-02
  • javascript如何编写简易计算器
    这篇文章主要介绍javascript如何编写简易计算器，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！代码如下<!DOCTYPE html> <html&n...
    99+
    2024-04-02
  • C#如何实现简易的计算器
    这篇文章主要介绍了C#如何实现简易的计算器，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。C#实现简易的计算器的具体内容如下1 题目描述（1）Form1窗体设计界面如下：（2）...
    99+
    2023-06-14
  • android studio如何实现简易的计算器
    本篇内容主要讲解“android studio如何实现简易的计算器”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“android studio如何实现简易的计算器”吧!先看效果...
    99+
    2023-06-30
  • javascript怎么实现简易的计算器功能
    本篇内容介绍了“javascript怎么实现简易的计算器功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！javascript实现简易计算器...
    99+
    2023-06-29
  • JavaScript实现网页版简易计算器功能
    本文实例为大家分享了JavaScript实现网页版计算器功能的具体代码，供大家参考，具体内容如下 运行效果 运行：直接将下面的代码放到任意文本文件中，文件后缀名改为.html，然后...
    99+
    2024-04-02
  • C#实现简易的计算器
    本文实例为大家分享了C#实现简易的计算器的具体代码，供大家参考，具体内容如下 1 题目描述 （1）Form1窗体设计界面如下： （2）运算类型的下列列表中包括：加法、减法、乘法、除...
    99+
    2024-04-02
  • jQuery实现简易的计算器
    本文实例为大家分享了jQuery实现简易的计算器的具体代码，供大家参考，具体内容如下 布局如下： css代码 #d1{     width: 400px;     height: ...
    99+
    2024-04-02
  • iOS实现简易的计算器
    本文实例为大家分享了iOS实现简易的计算器的具体代码，供大家参考，具体内容如下 初步接触视图，制作了一个简易的计算器，基本上简单的计算是没有问题的，不是很完美，可能还有一些bug，再...
    99+
    2024-04-02
  • C#如何实现简易计算器小功能
    这篇文章主要介绍C#如何实现简易计算器小功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！具体内容如下简易的登陆界面。具有幻灯片效果。（picturebox time控件）计算器支持多位数，小数，括号的运算。音乐是一...
    99+
    2023-06-29
  • Android Studio实现简易计算器设计
    本文实例为大家分享了Android Studio实现简易计算器的具体代码，供大家参考，具体内容如下 一、题目 1、如图所示（实际设计，类似此界面样式即可，全屏时，按钮将会纵向拉伸），...
    99+
    2024-04-02
  • Android studio如何实现简易的计算器功能
    这篇文章主要讲解了“Android studio如何实现简易的计算器功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Android studio如何实现简易的计算器功能...
    99+
    2023-06-30
  • Android实现简易计算器（可以实现连续计算）
    发一个库存程序，好像是几个礼拜之前写的吧，是一个用安卓实现的简易的计算器，写这个小程序之前，看了很多人写的计算器，觉得使用一个 EditText，并将它设置为不可编写，是比较好...
    99+
    2022-06-06
    Android
  • 使用JS实现简易计算器
    使用JS完成简易计算器，供大家参考，具体内容如下 要求：输入的值只能是数字，使用正则表达式 onchange():值改变时执行事件 onblur():鼠标移出时执行事件 <...
    99+
    2024-04-02
  • Android实现简易计算器功能
    本项目为大家分享了Android实现计算器功能的具体代码，供大家参考，具体内容如下 项目介绍 练手项目。能实现加减乘除及括号运算。 开发思路 界面布局  1.界面布...
    99+
    2024-04-02
  • 原生js实现简易计算器
    本文实例为大家分享了js实现简易计算器的具体代码，供大家参考，具体内容如下 最近，博主闲来无聊，就没事用js写了个简易计算器（博主是搞后端的，不是前端>_<）。其实，感觉...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作