Javascript事件监听-回调函数-基础题

2021/5/1 22:55:53

编程Tag： javascript 函数 let 按钮 function 监听 document imgs btn

本文主要是介绍Javascript事件监听-回调函数-基础题，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

文章目录

    • 1,关闭二维码
    • 2,验证码倒计时
    • 3,随机点名
    • 4,tab栏切换
    • 5,百度换肤效果
    • 6,切换图片循环
    • 7,开关灯

<-------------------------------------------参考答案-------------------------------------------->

1,关闭二维码

在这里插入图片描述

<script>
      //获取元素
      let erw = document.getElementById('erw')
      let clo = document.getElementById('clo')
      //事件监听:1,事件源2,事件类型3,回调函数
      clo.addEventListener('click', function() {
        erw.style.display = 'none'
      })
    </script>

2,验证码倒计时

在这里插入图片描述

  <ul>
    <li>
      手机号:
      <input type="text">
    </li>
    <li>
      验证码:
      <input type="text" class="verify">
      <button id="btn">获取验证码</button>
    </li>
  </ul>


  <script>
    //获取元素
    let btn = document.getElementById('btn')
      //设置设置监听
      btn.addEventListener('click', function() {

          //禁止按钮
          this.disabled = true
          //设置定时器
          let i = 3
          //没有延迟
          this.innerText = `${i}秒后获取验证码`
          //调用定时器,用用匿名函数做参数
          let timer = setInterval(function() {
              //因为倒计时所以减减
              i--
              btn.innerHTML = `${i}秒后获取验证码`

              //停止定时器
              if (i === 0) {
                  //停止定时器
                  clearInterval(timer)

                  //改变按钮文字
                  btn.innerHTML = `获取验证码`
                  //启用按钮
                  btn.disabled = false          
              }
          }, 1000)
      })
  </script>

3,随机点名

在这里插入图片描述

<body>
    <h2>随机问答</h2>
    <div class="box">
        <span>问题是：</span>
        <div class="qs">这里显示题目</div>
    </div>
    <div class="btn">
        <button class="dos">开始</button>
        <button class="end">结束</button>
    </div>


    <script>
        //数组
        let arr = ['张一', '张二', '张三', '张四', '张五']

        //开始按钮业务
        let dos = document.querySelector('.btn .dos')

        //获取qs 盒子准备往里边写内容
        let qs = document.querySelector('.qs')

        //结束按钮业务
        let end = document.querySelector('.btn .end')

        //外边定义一个随机变量
        let random = 0

        //外边定义一个定时器变量
        let timer = null

        dos.addEventListener('click', function () {
            //利用定时器来制作
            timer = setInterval(function () {

                //随机函数取值
                random = Math.floor(Math.random() * (arr.length))

                //在qs中显示取到的值
                qs.innerHTML = arr[random]

            }, 50)
            //数组里的数组的元素是1的时候,就禁用两个按钮]
            if (arr.length === 1) {
                dos.disabled = true
                end.disabled = true

        }
        })

        

        //结束按钮,停止定时器, 删除抽出来的那个数据
        end.addEventListener('click', function() {
            clearInterval(timer)

            //删除数组中的某个元素
            arr.splice(random, 1)
            
        })
    </script>

4,tab栏切换

在这里插入图片描述

<script>
      let items = document.querySelectorAll('.tab .tab-item')

      let mains = document.querySelectorAll('.products .main')
      for (let i = 0; i < items.length; i++) {
        items[i].addEventListener('click', function() {

          //这句话一定要写到上边,先移除以前的,我才能加上
          //找到active这个类,然后移除掉
          document.querySelector('.tab .active').className = 'tab-item'

          //点击完毕后,当前元素,添加active这个类
          this.className = 'tab-item active'


          //下面的元素要随着变化
          //首先下面四个全部隐藏
          for (let j = 0; j < mains.length; j++) {
            mains[j].style.display = 'none'
          }
          //再把当前的显示出来
          mains[i].style.display = 'block'
        })
      }
  </script>

5,百度换肤效果

在这里插入图片描述

<body>
    <ul class="baidu">
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
        <li><img src="images/4.jpg"></li>
    </ul>
    <script>
        // 1. 获取元素 
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        // console.log(imgs);
        // 2. 循环注册事件 
        for (let i = 0; i < imgs.length; i++) {
            imgs[i].addEventListener('click', function () {
                // / this.src 就是我们点击图片的路径   images/2.jpg
                // console.log(this.src);
                // 把这个路径 this.src 给body 就可以了
                document.body.style.backgroundImage = `url(${this.src})`;
            })
        }
    </script>

6,切换图片循环

在这里插入图片描述

<body>
  <input type="button" value="切换" id="btn" /><br />
  <img src="imgs/girl1/00.jpg" width="300" id="img" />

  <script>
    let arr = [
      'imgs/girl1/00.jpg',
      'imgs/girl1/01.jpg',
      'imgs/girl1/02.jpg',
      'imgs/girl1/03.jpg',
      'imgs/girl1/04.jpg',
    ]

    //1. 找对象
    let btn = document.getElementById('btn')
    let img = document.getElementById('img')

    let index = 1

    //2. 给btn注册点击事件
    btn.addEventListener('click', function () {
      // if (max < num){ max = num}
      // if (min > num) { min = num}
      if (index > 4) {
        index = 0
      }
      img.src = arr[index] // 1
      index++ // 2
    })
  </script>
</body>

7,开关灯

在这里插入图片描述在这里插入图片描述

<body>
  <button>关灯</button>

  <script>
    //获取按钮元素
    let btn = document.querySelector('button')
    //获取body元素
    let body = document.body
    //bool的值只有真假两种状态
    let isFlag = true
    console.dir(body)
    //监听事件--点击按钮会切换什么状态
    btn.addEventListener('click', function () {
      //点击按钮后的状态
      if (isFlag) {
        //改变颜色
        body.style.backgroundColor = 'black'
        //改变按钮文字
        btn.innerText = '开灯'
        isFlag = false
        //再次点击的状态
      } else {
        body.style.backgroundColor = 'white'
        btn.innerText = '关灯'
        isFlag = true
      }

    })

  </script>
</body>


这篇关于Javascript事件监听-回调函数-基础题的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程