js基础编程-题目17 数组的动态累加

整理下初学时做过的js基础编程题目和大家分享以下，如果大家觉得有用，别忘了点一下赞哦

定时器

使用JS实现一个数字从0到1024动态累加的效果
<input type="button" id="btn" value="点击数字累加" />
<div id="num" style="font-size: 50px">0</div>

用定时器和once属性实现

const btn = document.querySelector('#btn')
const num = document.querySelector('#num')
btn.addEventListener(
  'click',
  function (timer = null) {
    timer = setInterval(() => {
      num.innerText = +num.innerText + 1 //flag1处
      ;+num.innerText === 1024 && clearInterval(timer)
    }, 1000)
  },
  { once: true } //flag2处
)

flag1处： + 号是代替 Number方法，把字符串转化为number类型
flag2处：addEventListener的第三个参数，{once:true}表示这个事件只执行一次

• 使用Number实现

const btn = document.querySelector('#btn')
const num = document.querySelector('#num')
btn.addEventListener(
  'click',
  function (timer = null) {
    timer = setInterval(() => {
      num.innerText = Number(num.innerText) + 1
      Number(num.innerText) === 3 && clearInterval(timer)
    }, 1000)
  },
  { once: true }
)

这里扩展下addEventListener

• addEventListener的可选参数
  可选参数对象
  {once：Boolean} 表示该绑定数据是否只触发一次
  {capture：Boolean} 表示是否以捕获模式触发事件
  布尔值
  true 以捕获模式触发事件
  false 以冒泡模式触发事件(默认值)
  再附上一张 MDN关于addEventListener的一小段说明