JavaScript--------返回值函数

最新推荐文章于 2024-11-01 11:13:44 发布

原创最新推荐文章于 2024-11-01 11:13:44 发布 · 530 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

该篇文章详细描述了一个HTML页面，利用JavaScript实现输入数字后自动计算并显示其平方、立方和阶乘的结果，涉及事件监听和条件判断技术。

允许在文本框中输入一个数字，并在下面的段落中显示不同的数字

function squared(num) {
  return num * num;
}

function cubed(num) {
  return num * num * num;
}

function factorial(num) {
  var x = num;
  while (x > 1) {
    num *= x - 1;
    x--;
  }
  return num;
}

①squared() 和 cubed() ：平方或立方的数作为一个参数返回。

②factorial() 函数：返回给定数字的阶乘。

2.包括一种打印输入到文本输入中的数字的信息的方法

input.onchange = function () {
  var num = input.value;
  if (isNaN(num)) {
    para.textContent = "You need to enter a number!";
  } else {
    para.textContent =
      num +
      " squared is " +
      squared(num) +
      ". " +
      num +
      " cubed is " +
      cubed(num) +
      ". " +
      num +
      " factorial is " +
      factorial(num) +
      ".";
  }
};

①创建一个onchange事件处理程序，当文本框上面的 change 事件被触发的之后，事件处理程序就会运行，一个新的值被输入到文本框并且被提交（就比如，输入一个值，然后按 Tab）。当这个匿名函数运行时，输入框中的值将被存储在num变量中。

②条件测试——如果输入的值不是数字，则在段落中打印错误消息。if 语句判断isNaN(num)表达式是否返回 true。我们用isNaN()函数测试num的值是否不是一个数字 - 如果不是数字，就返回true，否则返回false。如果测试返回 false，则数值是一个数字，所以我们在段落元素中打印出一个句子，说明数字的平方、立方体和阶乘是什么。这句话叫 squared()，cubed()，和 factorial() 函数来获得所需的值。

完整代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input class="numberInput" type="text">
  <p></p>
  <script>
    const input = document.querySelector('.numberInput');
    const para = document.querySelector('p');

    function squared(num) {
      return num * num;
    }

    function cubed(num) {
      return num * num * num;
    }

    function factorial(num) {
      let x = num;
      while (x > 1) {
        num *= x-1;
        x--;
      }

      return num;
    }

    input.addEventListener('change', () => {
      const num = parseFloat(input.value);
      if (isNaN(num)) {
        para.textContent = 'You need to enter a number!';
      } else {
        para.textContent = `${num} squared is ${squared(num)}. `;
        para.textContent += `${num} cubed is ${cubed(num)}. `;
        para.textContent += `${num} factorial is ${factorial(num)}. `;
      }
    });

  </script>
</body>
</html>

结果展示：