JavaScript · 判断水仙花数

题目

根据用户输入的数据，判断水仙花数（三位数），水仙花数是指一个 n 位数 (n≥3)，它的每个位上的数字的 n 次幂之和等于它本身。

html
<label>请输需要判断的水仙花数(三位数):</label>
<input type="text" />
<br />
<button>开始判断</button>
<script>
  function numDaffodils(num) {
    // 判断是否为水仙花数
  }
</script>

需求说明

当点击 开始判断 按钮，就执行 numDaffodils 函数判断输入的数字是否为水仙花数.
如果是，就弹出提示框提示是水仙花数，如果不是，就提示不是水仙花数
例如输入 153，153=1* 1*1+5*5*5+3*3*3 , 是水仙花数，就提示 153 是水仙花数。
请加入输入判断，必须输入数字，不能输入其他类型。

解法

html
<label>请输需要判断的水仙花数(三位数):</label>
<input type="text" />
<br />
<button>开始判断</button>
<script>
  const btn = document.querySelector('button')
  function numDaffodils() {
    let num = document.querySelector('input').value
    //输入的是字符串
    // console.log(typeof num); =>string
    // 检查是否是有效数字
    if (num.startsWith('0') || num.length !== 3 || isNaN(num)) alert('请输入三位有效数字')
    // 拆分为数组
    let numArr = num.split('')
    //判断是不是水仙花数字！
    const numCheck = numArr.reduce((acc, value) => acc + Math.pow(value, 3), 0)
    numCheck == num ? alert('是水仙花数 ✅') : alert('不是水仙花数❗️')
  }
  btn.addEventListener('click', numDaffodils)
</script>

这里有一个坑：从 <input type="text"> 获取输入内容¹，因为 type=text ，所以输出的是 string 而不是 number，不能直接用typeof ==='number'判断输入的是不是数字

参考

HTML text input allow only numeric input ↩