DOM-获取DOM元素、修改属性

1.随机点名并渲染在页面的某个位置

  <span>这是渲染位置</span>
  <script>
    // let names = ['小白', '小黑', '小黄', '小刘', '小李']
    // // 前置知识：为按钮绑定单击事件：单击按钮之后再进行处理
    // let btn = document.querySelector('button')
    // let span = document.querySelector('span')
    // btn.addEventListener('click', function () {
    //   // 单击按钮之后的业务处理
    //   // console.log(123)
    //   let index = parseInt(Math.random() * names.length)
    //   //根据索引获取姓名
    //   let name = names[index]
    //   //将姓名渲染到指定的元素中
    //   span.innerText = name
    // })

2.随机切换元素的背景

  <script>

    let button = document.querySelector('button')
    //模拟数据
    let arr = ['1.jpg', '4.jpg', 'b01.jpg', 'b08.jpg']
    //为按钮绑定单击事件
    button.addEventListener('click', function () {
      // 生成合理的索引
      let index = parseInt(Math.random() * arr.length)

      console.log(`./images/${arr[index]}`);
      // 为元素body设置背景样式
      document.body.style.backgroundImage = `url(./images/${arr[index]})`
      document.body.style.backgroundRepeat = 'no-repeat'
    })


  </script>

3.倒计时案例

  <script>
    //每隔1S打印输出：黑马程序员
    // 添加定时器的语法：setInterval(你想执行的操作，间隔时间以毫秒为单位)
    // setInterval(function () {
    //   console.log('黑马程序员');
    // }, 1000)
    // let btn = document.querySelector('button')
    // let timeCount = 6
    // let timeId
    // btn.addEventListener('click', function () {
    //   //开启定时器
    //   //timeID就是创建这个定时器所返回的句柄，这个句柄与当前定时器关联
    //   timeId = setInterval(function () {
    //     timeCount--
    //     btn.innerText = `倒计时${timeCount}s`
    //     btn.disabled = true

    //     //判断时间是否到0，如果到0就停止定时器-清除定时器
    //     if (timeCount == 0) {
    //       //清除定时器
    //       clearInterval(timeId)
    //       btn.disabled = false
    //       btn.innerText = '获取验证码'
    //     }
    //   }, 1000)
    // })

4.自动切换图片-添加鼠标进入和离开的效果

    <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

    //定时器
    timeId = setInterval(function () {
      // 索引自增
      index++
      if (index == 10) {
        index = 1
      }
      let path = `./images/b0${index}.jpg`
      img.src = path
      p.innerText = `第${index}张图片`
    }, 1000)