• Web APIS——第一天（下）

    一、随机轮播图案例

    1. DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8" />
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    8.   <title>轮播图点击切换title>
    9.   <style>
    10.     * {
    11.       box-sizing: border-box;
    12.     }
    13.  
    14.     .slider {
    15.       width: 560px;
    16.       height: 400px;
    17.       overflow: hidden;
    18.     }
    19.  
    20.     .slider-wrapper {
    21.       width: 100%;
    22.       height: 320px;
    23.     }
    24.  
    25.     .slider-wrapper img {
    26.       width: 100%;
    27.       height: 100%;
    28.       display: block;
    29.     }
    30.  
    31.     .slider-footer {
    32.       height: 80px;
    33.       background-color: rgb(100, 67, 68);
    34.       padding: 12px 12px 0 12px;
    35.       position: relative;
    36.     }
    37.  
    38.     .slider-footer .toggle {
    39.       position: absolute;
    40.       right: 0;
    41.       top: 12px;
    42.       display: flex;
    43.     }
    44.  
    45.     .slider-footer .toggle button {
    46.       margin-right: 12px;
    47.       width: 28px;
    48.       height: 28px;
    49.       appearance: none;
    50.       border: none;
    51.       background: rgba(255, 255, 255, 0.1);
    52.       color: #fff;
    53.       border-radius: 4px;
    54.       cursor: pointer;
    55.     }
    56.  
    57.     .slider-footer .toggle button:hover {
    58.       background: rgba(255, 255, 255, 0.2);
    59.     }
    60.  
    61.     .slider-footer p {
    62.       margin: 0;
    63.       color: #fff;
    64.       font-size: 18px;
    65.       margin-bottom: 10px;
    66.     }
    67.  
    68.     .slider-indicator {
    69.       margin: 0;
    70.       padding: 0;
    71.       list-style: none;
    72.       display: flex;
    73.       align-items: center;
    74.     }
    75.  
    76.     .slider-indicator li {
    77.       width: 8px;
    78.       height: 8px;
    79.       margin: 4px;
    80.       border-radius: 50%;
    81.       background: #fff;
    82.       opacity: 0.4;
    83.       cursor: pointer;
    84.     }
    85.  
    86.     .slider-indicator li.active {
    87.       width: 12px;
    88.       height: 12px;
    89.       opacity: 1;
    90.     }
    91.   style>
    92. head>
    93.  
    94. <body>
    95.   <div class="slider">
    96.     <div class="slider-wrapper">
    97.       <img src="./images/slider01.jpg" alt="" />
    98.     div>
    99.     <div class="slider-footer">
    100.       <p>对人类来说会不会太超前了？p>
    101.       <ul class="slider-indicator">
    102.         <li>li>
    103.         <li>li>
    104.         <li>li>
    105.         <li>li>
    106.         <li>li>
    107.         <li>li>
    108.         <li>li>
    109.         <li>li>
    110.       ul>
    111.       <div class="toggle">
    112.         <button class="prev"><button>
    113.         <button class="next">>button>
    114.       div>
    115.     div>
    116.   div>
    117.   <script>
    118.     // 1. 初始数据
    119.     const sliderData = [
    120.       { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
    121.       { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
    122.       { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
    123.       { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
    124.       { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
    125.       { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
    126.       { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
    127.       { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    128.     ]
    129.  
    130.     // 1.需要一个随机数，数组的长度
    131.     const random = parseInt(Math.random()*sliderData.length)
    132.     // console.log(sliderData[random]);
    133.     // 2. 把对应的数据渲染到标签里面
    134.     // 2.1 获取图片
    135.     const img = document.querySelector('.slider-wrapper img')
    136.     // 2.2 修改图片路径  = 对象.url
    137.     img.src = sliderData[random].url
    138.     // 3.把p里面的文字内容更换
    139.     // 3.1 获取p
    140.     const p = document.querySelector('.slider-footer p')
    141.     // 3.2 修改p
    142.     p.innerHTML = sliderData[random].title
    143.     // 4. 修改背景颜色
    144.     const footer = document.querySelector('.slider-footer')
    145.     footer.style.backgroundColor = sliderData[random].color
    146.     // 5.小圆点
    147.     const li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`)
    148.     // console.log(li);
    149.     // 让当前这个小li，添加active这个类
    150.     li.classList.add('active')
    151.   script>
    152. body>
    153.  
    154. html>

    二、定时器-间歇函数

    2.1 定时器函数介绍

    网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发

    例如下这种倒计时类型的效果：

    2.2 定时器函数基本使用

    2.2.1 开启定时器

    setInterval(函数，间隔时间)

    作用：

    • 每隔一段时间调用这个函数
    • 间隔时间单位是毫秒
    1.

    注意：

    1. 函数名字不需要加括号
    2. 定时器返回的是一个id数字 
    3. 每个定时器都是独一无二的，有自己的编号

    2.2.2 关闭定时器

    let 变量名 = setInterval(函数,间隔时间)

    clearInterval(变量名)

    1.

    注意：

    1. 函数名字不要加括号
    2. 定时器返回的是一个id数字
    3. 一般不会刚创建就停止，而是满足一定条件在停止

    2.2.3 练习

    阅读注册协议

    需求：按钮60秒之后才可以使用

    分析：

    1. 开始先把按钮禁用（disabled属性）
    2. 一定要获取元素
    3. 函数内处理逻辑
      1. 秒数开始减减
      2. 按钮里面的文字跟着一起变化
      3. 如果秒数等于0停止定时器 里面文字变为同意 最后 按钮可以点击
    1. DOCTYPE html>
    3.  
    5.     
    6.     
    7.     Document
    9.  
    11.     
    12.     
    13.     
    14.     
    16.

    三、综合案例

    轮播图定时器版

    需求：每隔一秒钟切换一个图片

    分析：

    1. 准备一个数组对象，里面包含详细信息（素材包含）
    2. 获取元素
    3. 设置定时器函数
      1. 设置一个变量++
      2. 找到变量对应的对象
      3. 更改图片、文字信息
      4. 激活小圆点：移除上一个高亮的类名，当前变量对应的小圆点添加类
    4. 处理图片自动复原从头播放（放到变量++后面，紧挨）
      1. 如果图片播放到最后一张，就是大于等于数组的长度
      2. 则把变量重置为0
    1. DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8" />
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    8.   <title>轮播图点击切换title>
    9.   <style>
    10.     * {
    11.       box-sizing: border-box;
    12.     }
    13.  
    14.     .slider {
    15.       width: 560px;
    16.       height: 400px;
    17.       overflow: hidden;
    18.     }
    19.  
    20.     .slider-wrapper {
    21.       width: 100%;
    22.       height: 320px;
    23.     }
    24.  
    25.     .slider-wrapper img {
    26.       width: 100%;
    27.       height: 100%;
    28.       display: block;
    29.     }
    30.  
    31.     .slider-footer {
    32.       height: 80px;
    33.       background-color: rgb(100, 67, 68);
    34.       padding: 12px 12px 0 12px;
    35.       position: relative;
    36.     }
    37.  
    38.     .slider-footer .toggle {
    39.       position: absolute;
    40.       right: 0;
    41.       top: 12px;
    42.       display: flex;
    43.     }
    44.  
    45.     .slider-footer .toggle button {
    46.       margin-right: 12px;
    47.       width: 28px;
    48.       height: 28px;
    49.       appearance: none;
    50.       border: none;
    51.       background: rgba(255, 255, 255, 0.1);
    52.       color: #fff;
    53.       border-radius: 4px;
    54.       cursor: pointer;
    55.     }
    56.  
    57.     .slider-footer .toggle button:hover {
    58.       background: rgba(255, 255, 255, 0.2);
    59.     }
    60.  
    61.     .slider-footer p {
    62.       margin: 0;
    63.       color: #fff;
    64.       font-size: 18px;
    65.       margin-bottom: 10px;
    66.     }
    67.  
    68.     .slider-indicator {
    69.       margin: 0;
    70.       padding: 0;
    71.       list-style: none;
    72.       display: flex;
    73.       align-items: center;
    74.     }
    75.  
    76.     .slider-indicator li {
    77.       width: 8px;
    78.       height: 8px;
    79.       margin: 4px;
    80.       border-radius: 50%;
    81.       background: #fff;
    82.       opacity: 0.4;
    83.       cursor: pointer;
    84.     }
    85.  
    86.     .slider-indicator li.active {
    87.       width: 12px;
    88.       height: 12px;
    89.       opacity: 1;
    90.     }
    91.   style>
    92. head>
    93.  
    94. <body>
    95.   <div class="slider">
    96.     <div class="slider-wrapper">
    97.       <img src="./images/slider01.jpg" alt="" />
    98.     div>
    99.     <div class="slider-footer">
    100.       <p>对人类来说会不会太超前了？p>
    101.       <ul class="slider-indicator">
    102.         <li class="active">li>
    103.         <li>li>
    104.         <li>li>
    105.         <li>li>
    106.         <li>li>
    107.         <li>li>
    108.         <li>li>
    109.         <li>li>
    110.       ul>
    111.       <div class="toggle">
    112.         <button class="prev"><button>
    113.         <button class="next">>button>
    114.       div>
    115.     div>
    116.   div>
    117.   <script>
    118.     // 1. 初始数据
    119.     const sliderData = [
    120.       { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
    121.       { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
    122.       { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
    123.       { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
    124.       { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
    125.       { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
    126.       { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
    127.       { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    128.     ]
    129.  
    130.     // 1. 获取元素
    131.     const img = document.querySelector('.slider-wrapper img')
    132.     const p = document.querySelector('.slider-footer p')
    133.     let i = 0
    134.     // 2. 开始定时器
    135.     // console.log(sliderData[i])  拿到对应的对象了
    136.     setInterval(function(){
    137.         i++
    138.         console.log(i);
    139.         // 无缝衔接位置
    140.         if(i >= sliderData.length){
    141.             i = 0
    142.         }
    143.         // console.log(sliderData[i]);
    144.         // const obj = sliderData[i]
    145.         // 更换图片路径
    146.         img.src = sliderData[i].url
    147.         // 把字写到p里面
    148.         p.innerHTML = sliderData[i].title
    149.         // 小圆点
    150.         // 先删除以前的active
    151.         document.querySelector('.slider-indicator .active').classList.remove('active')
    152.         // 只让当前list添加active
    153.         document.querySelector(`.slider-indicator li:nth-child(${i+1})`).classList.add('active')
    154.     },1000)
    155.   script>
    156.  
    157. body>
    158.  
    159. html>

  • 相关阅读:
    Java项目使用自定义的公共单元(Maven管理)
    Flow公链 |FCL1.0正式上线
    openwrt上/etc/localtime报错问题解决
    字节序转换的问题详细讲解：将unsigned int val字节序逆转
    文档管理软件中真正重要的 10 件事
    LastPass 开发者系统被黑客窃取源代码
    多线程
    防火墙技术基础篇：认识安全策略、安全区域、域间转发及报文转发流程
    【GlobalMapper精品教程】013：矢量点图层的创建及数字化案例操作
    macOS 关闭系统更新以及相关提示
  • 原文地址：https://blog.csdn.net/weixin_48719464/article/details/133975676