前端计算器代码 - 穆世明博客

一、案例效果

二、涉及要点

三、完整代码+详细注释

四、代码释义

一、案例效果

二、涉及要点

1. 文本域标签 <textarea></textarea> 的 readonly 属性用于设置文本域文字为只读；

2. DOM 获取元素，getElementById() 获取带有指定 id 的节点；

3. DOM 事件中的 target 是指获取事件的目标，即触发事件的真实元素。如下代码中：

 btn.onclick = function (e) { //判断只有点击到按钮上才会将信息录入“显示屏” if (e.target.nodeName === "BUTTON") { 
   
e.target.nodeName，e是指触发事件，名称自己定义；target.nodeName 是获取触发事件元素的标签名，我们这里获取按钮 button，意为只有触发事件的元素为按钮时才执行下面逻辑。除此之外还有：

e.target.id
获取事件触发元素的 id

e.target.className 获取事件触发元素的类名

event.target.innerHTML 获取事件触发元素的内容

4. eval 函数

eval() 函数用于计算 JavaScript 字符串，并把它作为脚本代码来执行。如果参数是一个表达式，eval() 函数将执行表达式。如果参数是 Javascript 语句，eval() 将执行 Javascript 语句。

所以当我们点击按钮，将表达式写入“显示屏“，该函数便会自动执行计算。

5. try catch

//格式 try { tryCode - 尝试执行代码块 } catch(err) { catchCode - 捕获错误的代码块 } finally { finallyCode - 无论 try / catch 结果如何都会执行的代码块 }

6. switch-case语句

switch ( 表达式 ){ case 值1: 语句块1 break;（结束执行，跳出当前语句） case 值n: 语句块n break; default: 语句块n+1( 前面全为false才执行此语句块 ) }

三、完整代码+详细注释

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>简易计算器</title>
  <style>
    .calc {
      width: 300px;
      height: 400px;
      border: 2px solid #149985;
      border-radius: 10px;
      margin: auto;
      background-color: lightgray;
    }

    #btn {
      width: 90%;
      height: 320px;
      margin: 10px auto 0 auto;
      background-color: rgb(238, 234, 234);
    }

    #btn button {
      width: 80px;
      height: 35px;
      margin: 15px 0 0 3px;
      background-color: white;
      border: 1px solid #999;
      border-radius: 5px;
      font-size: 18px;
      font-weight: bolder;
    }

    #btn button:hover {
      background-color: #999;
      color: white;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="calc">
    <!-- 显示数字文本域 -->
    <!-- readonly设置文本域为只读 -->
    <textarea readonly name="" id="text"
      style="width: 90%;height: 30px;display: block;margin: 20px auto 0 auto;font-size: 24px;"></textarea>
    <!-- 键盘按钮 -->
    <div id="btn">
      <button>1</button>
      <button>2</button>
      <button>3</button>
      <button>4</button>
      <button>5</button>
      <button>6</button>
      <button>7</button>
      <button>8</button>
      <button>9</button>
      <button>0</button>
      <button>C</button>
      <button>+</button>
      <button>-</button>
      <button>*</button>
      <button>/</button>
      <button style="width: 98%;">=</button>
    </div>
  </div>
</body>
<script>
  //获取按键区域的元素（键盘）
  var btn = document.getElementById('btn');
  //绑定事件处理函数
  btn.onclick = function (e) {
    //判断只有点击到按钮上才会将信息录入“显示屏”
    if (e.target.nodeName === "BUTTON") {
      //获取文本域元素（显示屏）
      var text = document.getElementById('text');
      //switch 判断当前点击的按钮内容
      switch (e.target.innerHTML) {
        //点击C清空屏幕
        case 'C':
          text.value = '';
          break;
        //如果点击=，获得显示屏中的表达式并计算结果
        case "=":
          var str = text.value;
          //尝试计算显示屏中的内容
          try {
            //将显示屏的内容交给eval做计算，将结果再替换回显示屏中
            text.value = eval(str)
          } catch (err) {
            text.value = err;
          }
          break;
        //点击其他的按钮，将按钮内容追加到显示屏上
        default:
          text.value += e.target.innerHTML;
      }
    }
  }
</script>

</html>

四、代码释义

这段代码实现了一个简单的网页计算器。它使用了HTML、CSS和JavaScript来构建用户界面和实现功能。下面是对代码的详细解释：

HTML结构

<div class="calc">：这个div元素是整个计算器的容器，它包含了一个文本域（textarea）用于显示计算结果或输入的表达式，以及一个div（#btn）包含所有的操作按钮。
<textarea readonly ...>：这是一个只读文本域，用于显示用户输入的表达式和计算结果。它设置了宽度、高度、字体大小等样式，并通过readonly属性防止用户直接编辑。
<div id="btn">...</div>：这个div包含了所有操作按钮，如数字按钮（0-9）、清除按钮（C）、和四个基本运算按钮（+、-、*、/）以及一个等号按钮（=）。

CSS样式

.calc：为计算器容器设置了宽度、高度、边框、圆角、边距和背景色。
#btn：为按钮区域设置了宽度、高度、边距、背景色等样式。
#btn button：为单个按钮设置了样式，包括宽度、高度、边距、背景色、边框、圆角、字体大小和字体加粗。
#btn button:hover：为按钮的悬停状态设置了样式，包括背景色、文本颜色和鼠标光标样式。

JavaScript功能

首先，通过document.getElementById('btn')获取了包含所有按钮的div元素。
然后，为这个div绑定了一个点击事件处理函数。但是，这个处理函数实际上会在点击div内部的任何元素时触发，包括按钮。
在事件处理函数中，首先检查触发事件的元素是否是按钮（e.target.nodeName === "BUTTON"）。这是为了确保只有点击按钮时，才会执行后续的代码。
接着，根据点击的按钮内容（e.target.innerHTML），使用switch语句来决定执行什么操作：
- 如果点击的是'C'按钮，则清空文本域（尽管这里应该使用text.value = '';，但由于textarea元素使用value属性可能不会按预期工作，实际上应该使用text.innerText = '';或text.textContent = '';）。
- 如果点击的是'='按钮，则尝试计算文本域中的表达式，并将结果更新到文本域中。这里使用了eval()函数来执行字符串形式的JavaScript代码，这虽然方便但存在安全风险，因为它会执行任意代码。
- 如果点击的是其他任何按钮，则将该按钮的内容追加到文本域中。

注意事项

代码中使用了textarea的value属性来设置和获取其内容，但通常textarea使用innerText或textContent属性来操作其内容。
使用eval()函数执行用户输入的表达式存在安全风险，因为它会执行任何JavaScript代码。在实际应用中，应该避免使用eval()，或者至少要对用户输入进行严格的验证和清理。
为了更好地控制计算器的行为，可以为每个按钮单独绑定事件处理函数，而不是为包含它们的div绑定一个通用的事件处理函数。这样可以避免对事件源进行不必要的检查。

上一篇：实践为什么是认识的基础

下一篇： iptables规则生成

版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。

本文网址：https://www.mushiming.com/mjsbk/549.html

e.target.id	获取事件触发元素的 id
e.target.className	获取事件触发元素的类名
event.target.innerHTML	获取事件触发元素的内容

二、涉及要点

三、完整代码+详细注释

四、代码释义

HTML结构

CSS样式

JavaScript功能

注意事项

相关文章：