DOM事件案例倒计时自动轮播图随机点名后删除随机点名-结束随机点名鼠标移入移出EPUsJRqBEPUsJRqBE

倒计时

<body>
  <input type="button" value="倒计时5秒钟" />
  <script>
    // 获取元素
    let btn = document.querySelector('input')
    // 绑定单击事件
    btn.addEventListener('click', function () {
      // 设置倒计时开始时间
      let timeCount = 5
      // 设置定时器
      let Id = setInterval(function () {
        timeCount--
        // 单标签用value
        btn.value = `倒计时${timeCount}s`
        // disable:禁用
        btn.disabled = true
        // 结束定时器
        if (timeCount == -1) {
          clearInterval(Id)
          btn.disabled = false
          btn.value = `倒计时5s`

        }
      }, 1000)
    })
  </script>
</body>

自动轮播图

  <style>
    * {
      padding: 0;
      margin: 0;
    }

    div {
      width: 700px;
      height: 320px;
      margin: 100px auto;
      position: relative;
    }

    p {
      position: absolute;
      left: 0;
      bottom: 0;
      line-height: 50px;
      background-color: #666;
      color: #fff;
      width: 100%;
      padding-left: 10px;
      font-size: 20px;
      box-sizing: border-box;
    }
  </style>

<body>
  <div>
    <img src="./images/b01.jpg" alt="" />
    <p>第1张图片</p>
  </div>

  <script>
    // 获取元素
    let img = document.querySelector('img')//设置src
    let p = document.querySelector('p')//设置inner
    // 设置起始值
    let index = 1
    // 绑定事件，设置定时器
    setInterval(function () {
      // 自增
      index++
      if (index > 9) {
        index = 1
      }
      // 设置路径
      let path = `./images/b0${index}.jpg`
      // 赋值
      img.src = path
      p.innerText = `第${index}张图片`
    }, 1000)

  </script>

随机点名后删除

<style>
    p {
      width: 200px;
      height: 100px;
      border: 1px solid red;
    }
  </style>

<body>
  <p>这里显示名字</p>
  <button>随机点名</button>
  <script>
    let names = ['11', '22', '33', '44', '55']
    // 获取元素
    let p = document.querySelector('p')
    let btn = document.querySelector('button')
    // 绑定事件
    btn.addEventListener('click', function () {
      // 获取随机数
      let random = parseInt(Math.random() * names.length)
      // 赋值
      let name = names[random]
      p.innerHTML = name
      // 删除选中名
      names.splice(random, 1)
      if (names.length < 1) {
        btn.disabled = true
      }
      console.log(names);
    })
  </script>

随机点名-结束随机点名

<style>
    p {
      width: 200px;
      height: 100px;
      border: 1px solid red;
    }
  </style>


<body>
  <p>这里显示名字</p>
  <button class="start">开始随机点名</button>
  <button class="end">结束随机点名</button>
  <script>
    let names = ['11', '22', '33', '44', '55']
    // 获取元素
    let p = document.querySelector('p')
    let start = document.querySelector('.start')
    let end = document.querySelector('.end')
    // 绑定事件
    let timeId//受作用域影响，声明在函数外
    start.addEventListener('click', function () {
      // 设置定时器
      timeId = setInterval(function () {
        // 生成随机索引
        let random = parseInt(Math.random() * names.length)
        // 生成随机名字
        let name = names[random]
        p.innerHTML = name
      }, 500)
    })
    // 注意作用域
    end.addEventListener('click', function () {
      clearInterval(timeId)
    })
  </script>
</body>

鼠标移入移出

<style>
    * {
      padding: 0;
      margin: 0;
    }

    div {
      width: 700px;
      height: 320px;
      margin: 100px auto;
      position: relative;
    }

    p {
      position: absolute;
      left: 0;
      bottom: 0;
      line-height: 50px;
      background-color: #666;
      color: #fff;
      width: 100%;
      padding-left: 10px;
      font-size: 20px;
      box-sizing: border-box;
    }
  </style>

<body>
  <div>
    <img src="./images/b01.jpg" alt="" />
    <p>第1张图片</p>
  </div>

  <script>
    // 获取元素
    let img = document.querySelector('img')
    let p = document.querySelector('p')
    // 设置起始值
    let index = 1
    // 绑定事件，设置定时器
    let timeId
    function startTime() {
      timeId = setInterval(function () {
        // 自增
        index++
        if (index > 9) {
          index = 1
        }
        // 设置路径
        let path = `./images/b0${index}.jpg`
        // 赋值
        img.src = path
        p.innerText = `第${index}张图片`
      }, 1000)
    }
    // 添加鼠标移入
    let div = document.querySelector('div')
    div.addEventListener('mouseenter', function () {
      clearInterval(timeId)
    })
    // 添加鼠标移出
    div.addEventListener('mouseleave', function () {
      startTime()
    })
  </script>
</body>