用js实现简单计算器方法

朴灿烈づ我的快乐病毒、 2023-07-23 03:42 53阅读 0赞

用js实现简单计算器方法

<style>
      .div1 {
        width: 208px;
        height: 308px;
        margin: auto;
        border: 2px solid #000000;
        font-size: 0;
      }
      .div2 {
        width: 208px;
        height: 100px;
        font-size: 20px;
      }
      .div1 span {
        display: inline-block;
        width: 50px;
        height: 50px;
        font-size: 20px;
        line-height: 50px;
        text-align: center;
        border: 1px solid #cccccc;
      }
    </style>
    
    <div class="div1">
      <div class="div2"></div>
      <span>7</span>
      <span>8</span>
      <span>9</span>
      <span>+</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span>-</span>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>*</span>
      <span>0</span>
      <span>c</span>
      <span>=</span>
      <span>/</span>
    </div>
    <script>
      // 写一个计算器  0，1，2，3，4，5，6，7，8，9，+，-，*，/,C,=
      // 执行初始化函数
      init();
      // 创建初始化函数
      function init() {
        //   根据选择器获取标签中找到的.div1
        var div1 = document.querySelector(".div1");
            // 根据选择器获取页面中的所有span
        var spans = document.querySelectorAll("span");
        // 利用for循环给每个span添加点击事件
        for (i = 0; i < spans.length; i++) {
          spans[i].addEventListener("click", clickHandler);
        }
      }
    //   创建点击事件要执行的函数
      function clickHandler(e) {
        //   根据选择器获取要找的元素.div2
        var div2 = document.querySelector(".div2");
        if (e.target.textContent) {
            // 如果被点击元素是c时
          if (e.target.textContent === "c") {
            //   则设置div2中的所有内容清空
            div2.textContent = null;
            // 如果被点击元素是=时
          } else if (e.target.textContent === "=") {
            //   则把内容转换为字符串
            var obj = String(div2.textContent);
            // 打印字符串
            console.log(obj)
            if (obj) {
                // 查找字符串中有没有+
              if (obj.indexOf("+")!==-1) {
                //   console.log(obj.split("+")[1])
                // 如果有则把+号两边转换为数值计算两边想加的结果
                div2.textContent =
                  (Number(obj.split("+")[0]) + Number(obj.split("+")[1]));
              }
            //   查找字符串中有没有-
              if (obj.indexOf("-")!==-1) {
                console.log(obj.split("-")[1])
                // console.log(obj.split("-")[1]);
                // 如果有则把-两边转换为数值计算两边相减的直
                div2.textContent =
                (Number(obj.split("-")[0]) - Number(obj.split("-")[1]));
              }
            //   查找字符中有没有*
              if (obj.indexOf("*")!==-1) {
                console.log(obj.split("*")[1]);
                // 如果有则计把*两边转换为数值计算两边相乘的结果
                 div2.textContent =
                 (Number(obj.split("*")[0]) * Number(obj.split("*")[1]));
              }
            //   查找字符串中有没有/
              if (obj.indexOf("/")!==-1) {
                console.log(obj.split("/")[1]);
                // 如果有则把/两边转换为数值计算两边相除的结果
                div2.textContent =
                (Number(obj.split("/")[0]) / Number(obj.split("/")[1]));
              }
            }
          } else {
            //   把每次点击的内容添加在div2中
            div2.textContent += e.target.textContent;
          }
        }
      }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，53人围观）

还没有评论，来说两句吧...

相关阅读

相关如何用Python实现简单的计算器？

在Python中，你可以通过创建一个函数来实现一个简单计算器。以下是一个基本的示例： ```python # 定义加法函数 def add(a, b): return

╰半橙微兮°/ 2025年03月13日 20:30/ 0 赞/ 68 阅读

相关用Python实现简单计算器功能

在Python中，我们可以使用if-else语句或者lambda函数来实现一个简单的计算器。这里我将提供一个基于命令行的简单计算器示例： ```python def add(

向右看齐/ 2025年01月21日 16:00/ 0 赞/ 110 阅读

相关用代码实现一个简单计算器

用C代码来实现一个小型计算器，快来瞅瞅叭！！！

秒速五厘米/ 2024年04月17日 06:18/ 0 赞/ 165 阅读

相关用js实现简单计算器方法

用js实现简单计算器方法 <style> .div1 { width: 208px; height: 308px;

朴灿烈づ我的快乐病毒、/ 2023年07月23日 03:42/ 0 赞/ 54 阅读

相关计算器html js php代码,Javascript 实现简单计算器实例代码

效果图： ![b2790a4878cb33e82f3760d397ac9d5a.png][] 刚开始做时没考虑到清零和退格两个功能，嘻嘻，后来加的整体与传统计算器比有点小瑕

太过爱你忘了你带给我的痛/ 2022年11月17日 03:50/ 0 赞/ 290 阅读

相关 js制作简单计算器

在学校学习过程中，老师总是让我们做各种各样小案例(demo)。但是我们在做的过程，总会遇到一些问题，会使我们绞尽脑汁。那让我们一起来看看这个案例吧！先看看效果 ![在

电玩女神/ 2022年11月12日 01:45/ 0 赞/ 332 阅读

相关 js 简单计算器

将字符串转成浮点型函数：parseFloat（"12.3"）; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans

迷南。/ 2022年06月14日 03:56/ 0 赞/ 370 阅读

相关 HTML/JS 简单计算器

<p>简单计算器:</p> <table border="1" style="position:center;"> <tr> <td>第一个数：</td

你的名字/ 2022年06月06日 09:47/ 0 赞/ 324 阅读

相关 html+css+js 实现简单计算器

效果图: ![70][] 代码: <html> <head> <title>计算器</title> <meta charset=gb2

分手后的思念是犯贱/ 2022年05月14日 10:34/ 0 赞/ 419 阅读

相关 js简单计算器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

矫情吗；*/ 2022年05月13日 08:34/ 0 赞/ 356 阅读