首页 > 其他分享 >API-定时器-间歇函数

API-定时器-间歇函数

时间:2024-06-23 16:59:45浏览次数:28  
标签:定时器 函数 img color setInterval slider API 间歇

学习目标:

  • 掌握定时器-间歇函数

学习内容:

  1. 定时器-间歇函数
  2. 案例

定时器-间歇函数:

网页中经常需要一种功能:每隔一段时间需要`自动`执行一段代码,不需要我们手动去触发。
例如:网页中的倒计时。
要实现这种需求,需要定时器函数。
定时器函数有两种,我们先讲间歇函数。
  • 开启定时器:
 setInterval(函数,间隔时间)

作用:每隔一段时间调用这个函数。

间隔时间单位是毫秒。

  • 关闭定时器
let 变量名 = setInterval(函数, 间隔时间)
clearInterval(变量名)

一般不会刚创建就停止,而是满足一定条件再停止。

<title>定时器-间歇函数</title>
</head>

<body>
  <script>
    // setInterval(函数,间隔时间)
    // setInterval(function () {
    //   console.log('一秒执行一次')
    // }, 1000)

    function fn() {
      console.log('一秒执行一次')
    }
    //setInterval(函数名,间隔时间)  函数名不要加小括号
    let n = setInterval(fn, 1000)
    console.log(n)
    //关闭定时器
    clearInterval(n)

    //  let m = setInterval(function(){
    //   console.log(11)
    //  },2000)
    //  console.log(m)

    let i = 1
    setInterval(function () {
      i++
      document.write(i)
    }, 200)
  </script>

</body>

注意:

  1. 函数名字不需要加括号
  2. 定时器返回的是一个id数字
  3. 定时函数可以根据时间自动重复执行某些代码
  • 练习
 <title>用户注册倒计时</title>
</head>

<body>
  <textarea name="" id="" cols="30" rows="10">
          用户注册协议
          欢迎注册成为京东用户!在您注册过程中,您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议,请您务必仔细阅读、充分理解协议中的条款内容后再点击同意(尤其是以粗体或下划线标识的条款,因为这些条款可能会明确您应履行的义务或对您的权利有所限制)。
          【请您注意】如果您不同意以下协议全部或任何条款约定,请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息,阅读并点击同意上述协议且完成全部注册流程后,即表示您已充分阅读、理解并接受协议的全部内容,并表明您同意我们可以依据协议内容来处理您的个人信息,并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方(详情查看
      </textarea>
  <br>
  <button class="btn" disabled>我已经阅读用户协议(5)</button>
  <script>
    //1.获取元素
    const btn = document.querySelector('.btn')
    // console.log(btn.innerHTML)  //button按钮比较特殊用innerHTML

    //2.倒计时
    let i = 5
    //2.1开启定时器
    let n = setInterval(function () {
      i--
      btn.innerHTML = `我已经阅读用户协议(${i})`
      if (i === 0) {
        clearInterval(n) //关闭定时器
        // 定时器停了,我就可以开按钮
        btn.disabled = false
        btn.innerHTML = '同意'
      }
    }, 1000)
  </script>

</body>

案例:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>综合案例.轮播图定时器版</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .slider {
      width: 560px;
      height: 400px;
      overflow: hidden;
    }

    .slider-wrapper {
      width: 100%;
      height: 320px;
    }

    .slider-wrapper img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .slider-footer {
      height: 80px;
      background-color: rgb(100, 67, 68);
      padding: 12px 12px 0 12px;
      position: relative;
    }

    .slider-footer.toggle {
      position: absolute;
      right: 0;
      top: 12px;
      display: flex;
    }

    .slider-footer.toggle button {
      margin-right: 12px;
      width: 28px;
      height: 28px;
      appearance: none;
      border: none;
      background: rgba(255, 255, 255, .1);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

    .slider-footer.toggle button:hover {
      background: rgba(255, 255, 255, .2);
    }

    .slider-footer p {
      margin: 0;
      color: #fff;
      font-size: 18px;
      margin-bottom: 10px;
    }

    .slider-indicator li {
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background: #fff;
      opacity: 0.4;
      cursor: pointer;
    }

    .slider-indicator li.active {
      width: 12px;
      height: 12px;
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="slider">
    <div class="slider-wrapper">
      <img src="img/1.oldman.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>对人类来说会不会太超前了?</p>
      <ul class="slider-indicator">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="prev">
          << /button>
            <button class="next">></button>
      </div>
    </div>
  </div>
  <script>
    // const arr = [1, 3]
    // arr[0]
    // 1. 初始数据
    const sliderData = [
      { url: 'img/1.oldman.jpg', title: '对人类来说会不会太超前了?', color: 'rgb(100, 67, 68)' },
      { url: 'img/2.oldman.jpg', title: '真正的jo厨出现了!', color: 'rgb(36, 31, 33)' },
      { url: 'img/3.oldman.jpg', title: '李玉刚:让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: 'img/4.oldman.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: 'img/5.oldman.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: 'img/6.oldman.jpg', title: '一站式解决你的电脑配置问题!!!', color: 'rgb(53, 29, 25)' },
      { url: 'img/7.oldman.jpg', title: '谁不想和小猫咪贴贴呢!', color: 'rgb(99, 72, 114)' },
      { url: 'img/8.oldman.jpg', title: '谁不想和小猫咪贴贴呢!', color: 'rgb(99, 72, 114)' },
    ]

    //1.获取元素
    const img = document.querySelector('.slider-wrapper img')
    const p = document.querySelector('.slider-footer p')


    let i = 0 //信号量  控制图片的张数
    //2.开启定时器
    // console.log(sliderData[i]) //拿到对应的对象了
    setInterval(function () {
      i++
      //无缝衔接位置
      if (i >= sliderData.length) {
        i = 0
      }
      console.log(i)
      // console.log(sliderData[i])
      //更换图片路径
      img.src = sliderData[i].url
      //把字写到p里面
      p.innerHTML = sliderData[i].title
      //小圆点
      //先删除以前的active
      document.querySelector('.slider-indicator .active').classList.remove('active')
      //只让当前li 添加active
      document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
    }, 1000)


  </script>

</body>

</html>

标签:定时器,函数,img,color,setInterval,slider,API,间歇
From: https://blog.csdn.net/m0_64105917/article/details/139813636

相关文章

  • Java Stream 8 API
    动态多字段排序动态多字段排序假设我们有一个Person类,希望能够按照age和name进行动态排序。我们使用上述代码生成一个组合比较器来完成多字段排序。1.定义Person类java复制代码importjava.util.HashMap;importjava.util.Map;publicclassPerson{privateM......
  • 深入探索 Nuxt3 Composables:掌握目录架构与内置API的高效应用
    title:深入探索Nuxt3Composables:掌握目录架构与内置API的高效应用date:2024/6/23updated:2024/6/23author:cmdragonexcerpt:摘要:“本文深入探讨了Nuxt3Composables,重点介绍了其目录架构和内置API的高效应用。通过学习本文,读者将能够更好地理解和利用Nuxt3Co......
  • 深入探索 Nuxt3 Composables:掌握目录架构与内置API的高效应用
    title:深入探索Nuxt3Composables:掌握目录架构与内置API的高效应用date:2024/6/23updated:2024/6/23author:cmdragonexcerpt:摘要:“本文深入探讨了Nuxt3Composables,重点介绍了其目录架构和内置API的高效应用。通过学习本文,读者将能够更好地理解和利用Nuxt3Composab......
  • 国际邮政EMS计算邮费API接口
    1.简介这个接口可以直接用来计算国际邮政物流费用,我是在在做微信小程序时需要这个功能才自己找到了这个接口。2.需要的参数:前三个参数是你发货地的省市区的邮政编码地址,在微信小程序中可以用回调函数来获取,在java或其他语言中也应该有库来获取。'aACode'这个参数是,你发货......
  • 一文读懂LLM API应用开发基础(万字长文)
    前言Hello,大家好,我是GISerLiu......
  • BookKeeper 介绍(3)--API
    本文主要介绍 BookKeeper的API,文中所使用到的软件版本:Java1.8.0_341、BookKeeper4.16.5。 1、引入依赖<dependency><groupId>org.apache.bookkeeper</groupId><artifactId>bookkeeper-server</artifactId><version>4.16.5</version>......
  • 使用 JMeter 中的 `prev` API 进行结果分析
    JMeter中,prev对象是一个非常重要的变量,通常用于在JSR223Sampler或者BeanShellSampler中获取上一个Sampler的结果。记录下prev对象的常用API。什么是prev对象?prev对象是一个SampleResult类型的实例,它包含了上一个Sampler的所有信息和结果。通过使用prev对......
  • 分享记录在使用ubuntu部署项目(api接口项目)的步骤+自己踩过的坑(亲身经历,坑挺多的)
    安装虚拟机VMwareWorkstationPlayer/Pro优点:高性能:VMware的虚拟机通常具有更好的性能和稳定性。丰富的功能:特别是Pro版本,支持快照、多级别快照、克隆虚拟机等高级功能。商业支持:有商业支持选项,适合企业用户。缺点:费用:WorkstationPlayer是免费的,但功能有限。Workst......
  • 关于pulp.solve()的报错,pulp.apis.core.PulpSolverError: Pulp: Error while executin
     File"E:\python\建模\.venv\Lib\site-packages\pulp\apis\coin_api.py",line112,inactualSolve  returnself.solve_CBC(lp,**kwargs)      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File"E:\python\建模\.venv\Lib\site-packages\pulp\a......
  • P10538 [APIO2024] 星际列车 题解
    题意:有\(n\)个行星,编号为\(0\simn-1\)。有\(m\)辆星际列车,第\(i\)辆列车在时刻\(a_i\)从行星\(x_i\)出发,在时刻\(b_i\)到达行星\(y_i\),代价为\(c_i\)。换乘条件为上一辆车的终点和下一辆车的起点相同,且上一辆车到达时刻\(\le\)下一辆车出发时刻。你需要吃......