Web APIS——第一天（下）

一、随机轮播图案例

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

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <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, 0.1);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

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

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

    .slider-indicator {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
    }

    .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="./images/slider01.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">&lt;</button>
        <button class="next">&gt;</button>
      </div>
    </div>
  </div>
  <script>
    // 1. 初始数据
    const sliderData = [
      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]

    // 1.需要一个随机数，数组的长度
    const random = parseInt(Math.random()*sliderData.length)
    // console.log(sliderData[random]);
    // 2. 把对应的数据渲染到标签里面
    // 2.1 获取图片
    const img = document.querySelector('.slider-wrapper img')
    // 2.2 修改图片路径  = 对象.url
    img.src = sliderData[random].url
    // 3.把p里面的文字内容更换
    // 3.1 获取p
    const p = document.querySelector('.slider-footer p')
    // 3.2 修改p
    p.innerHTML = sliderData[random].title
    // 4. 修改背景颜色
    const footer = document.querySelector('.slider-footer')
    footer.style.backgroundColor = sliderData[random].color
    // 5.小圆点
    const li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`)
    // console.log(li);
    // 让当前这个小li，添加active这个类
    li.classList.add('active')
  </script>
</body>

</html>

二、定时器-间歇函数

2.1 定时器函数介绍

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

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

2.2 定时器函数基本使用

2.2.1 开启定时器

setInterval(函数，间隔时间)

作用：

  • 每隔一段时间调用这个函数
  • 间隔时间单位是毫秒
    <script>
        // 方法一：
        // setInterval(函数名，间隔时间)   注意是写的函数名，不要加小括号，加了小括号就是调用函数了
        setInterval(function(){
            console.log('1秒执行一次')
        },1000)
    
        // 方法二：
        function fn(){
            console.log('一秒执行一次')
        }

        setInterval(fn,1000)
    </script>

注意：

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

2.2.2 关闭定时器

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

clearInterval(变量名)

    <script>
        let timer = setInterval(function(){
            console.log('hi--');
        },2000)
        // 关闭定时器
        clearInterval(timer)
    </script>

注意：

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

2.2.3 练习

阅读注册协议

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

分析：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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);
        // 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>

</html>

三、综合案例

轮播图定时器版

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

分析：

  1. 准备一个数组对象，里面包含详细信息（素材包含）
  2. 获取元素
  3. 设置定时器函数
    1. 设置一个变量++
    2. 找到变量对应的对象
    3. 更改图片、文字信息
    4. 激活小圆点：移除上一个高亮的类名，当前变量对应的小圆点添加类
  4. 处理图片自动复原从头播放（放到变量++后面，紧挨）
    1. 如果图片播放到最后一张，就是大于等于数组的长度
    2. 则把变量重置为0
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <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, 0.1);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

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

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

    .slider-indicator {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
    }

    .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="./images/slider01.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>对人类来说会不会太超前了？</p>
      <ul class="slider-indicator">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="prev">&lt;</button>
        <button class="next">&gt;</button>
      </div>
    </div>
  </div>
  <script>
    // 1. 初始数据
    const sliderData = [
      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.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++
        console.log(i);
        // 无缝衔接位置
        if(i >= sliderData.length){
            i = 0
        }
        // console.log(sliderData[i]);
        // const obj = sliderData[i]
        // 更换图片路径
        img.src = sliderData[i].url
        // 把字写到p里面
        p.innerHTML = sliderData[i].title
        // 小圆点
        // 先删除以前的active
        document.querySelector('.slider-indicator .active').classList.remove('active')
        // 只让当前list添加active
        document.querySelector(`.slider-indicator li:nth-child(${i+1})`).classList.add('active')
    },1000)
  </script>

</body>

</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/105146.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Linux 安装maven两种方式(使用yum或手动安装)

Linux 安装maven两种方式(使用yum或手动安装)

1.用yum自动安装 yum install maven -y 配置阿里云镜像 ​vim /etc/maven/settings.xml​​ &#xff0c;mirrors节点下添加&#xff1a; <mirror><id>alimaven</id><name>aliyun maven</name><url>http://maven.aliyun.com/nexus/conte…
阅读更多...
前端html+css+js实现的2048小游戏，很完善。

前端html+css+js实现的2048小游戏，很完善。

源码下载地址 支持&#xff1a;远程部署/安装/调试、讲解、二次开发/修改/定制 逻辑用的是JavaScript&#xff0c;界面用canvas实现&#xff0c;暂时还没有添加动画。 视频浏览地址
阅读更多...
IBM展示非冯·诺依曼架构AI芯片NorthPole

IBM展示非冯·诺依曼架构AI芯片NorthPole

我们正处于人工智能的“寒武纪大爆发”时期。在过去的十年中&#xff0c;人工智能已经从理论和小型测试发展到企业规模的使用案例。但是&#xff0c;用于运行人工智能系统的硬件虽然越来越强大&#xff0c;但在设计时却没有考虑到当今的人工智能。随着人工智能系统规模的扩大&a…
阅读更多...
基于FPGA的电风扇控制器verilog，视频/代码

基于FPGA的电风扇控制器verilog，视频/代码

名称&#xff1a;基于FPGA的电风扇控制器verilog 软件&#xff1a;QuartusII 语言&#xff1a;Verilog 代码功能&#xff1a; 基于FPGA的电风扇控制器 运用 EDA SOPO实验开发系统设计一个基于FPGA的电风扇定时开关控制器,能实现手动和自动模式之间的切换。要求: (1)KI为电…
阅读更多...
Python桌面应用之XX学院水卡报表查询系统（Tkinter+cx_Oracle）

Python桌面应用之XX学院水卡报表查询系统（Tkinter+cx_Oracle）

一、功能样式 Python桌面应用之XX学院水卡报表查询系统功能&#xff1a; 连接Oracle数据库&#xff0c;查询XX学院水卡操作总明细报表&#xff0c;汇总数据报表&#xff0c;个人明细报表&#xff0c;进行预览并且支持导出报表 1.总明细报表样式 2.汇总明细样式 3.个人明细…
阅读更多...
卡巴斯基8（2009）杀毒软件

卡巴斯基8（2009）杀毒软件

下载地址&#xff1a;https://user.qzone.qq.com/512526231/main https://user.qzone.qq.com/3503787372/main
阅读更多...
Kafka KRaft模式探索

Kafka KRaft模式探索

1.概述 Kafka是一种高吞吐量的分布式发布订阅消息系统&#xff0c;它可以处理消费者在网站中的所有动作流数据。其核心组件包含Producer、Broker、Consumer&#xff0c;以及依赖的Zookeeper集群。其中Zookeeper集群是Kafka用来负责集群元数据的管理、控制器的选举等。 2.内容…
阅读更多...
Flutter extended_image库设置内存缓存区大小与缓存图片数

Flutter extended_image库设置内存缓存区大小与缓存图片数

ExtendedImage ExtendedImage 是一个Flutter库&#xff0c;用于提供高级图片加载和显示功能。这个库使用了 image 包来进行图片的加载和缓存。如果你想修改缓存大小&#xff0c;你可以通过修改ImageCache的配置来实现。 1. 获取ImageCache实例: 你可以通过PaintingBinding…
阅读更多...
css 雷达扫描图

css 雷达扫描图

html 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>css 雷达扫描</title><style>* {margin: 0;padding: 0;}body {background: #000000;height: 100vh;display: flex;align-items…
阅读更多...
Java基础总结

Java基础总结

0、Java语言 1.java和c 2.编译和解释 3.jre和jdk&#xff0c;jvm 简单来说&#xff0c;编译型语言是指编译器针对特定的操作系统将源代码一次性翻译成可被该平台执行的机器码&#xff1b;解释型语言是指解释器对源程序逐行解释成特定平台的机器码并立即执行。 Java 语言既具…
阅读更多...
【单片机学习笔记】Windows+Vscode+STM32F4+freeRTOS+FatFs gcc环境搭建

【单片机学习笔记】Windows+Vscode+STM32F4+freeRTOS+FatFs gcc环境搭建

为摒弃在接受keil邮件&#xff0c;研究了下gun编译&#xff0c;以STM32F407为例&#xff0c;简单记录 1. 软件包准备 Git 选择对应版本直接安装即可https://git-scm.com/download/winmakegcc ​ 1&#xff09;将上述软件包放置于C盘根目录 2&#xff09;添加环境变量 3&am…
阅读更多...
[SpringCloud] Eureka 与 Ribbon 简介

[SpringCloud] Eureka 与 Ribbon 简介

目录 一、服务拆分 1、案例一&#xff1a;多端口微服务 2、案例二&#xff1a;服务远程调用 二、Eureka 1、Eureka 原理分析 2、Eureka 服务搭建&#xff08;注册 eureka 服务&#xff09; 3、Eureka 服务注册&#xff08;注册其他服务&#xff09; 4、Eureka 服务发现…
阅读更多...
鸿鹄工程项目管理系统em Spring Cloud+Spring Boot+前后端分离构建工程项目管理系统

鸿鹄工程项目管理系统em Spring Cloud+Spring Boot+前后端分离构建工程项目管理系统

鸿鹄工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离构建工程项目管理系统 1. 项目背景 一、随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大。为了提高工程管理效率、减轻劳动强度、提高信息处理速度和准确性&#xff0c;公司对内部工程管…
阅读更多...
【组合计数】CF1866 H

【组合计数】CF1866 H

Problem - H - Codeforces 题意 思路 不知道这种trick叫什么&#xff0c;昨天VP刚遇到过 设 f[x] 为恰好有一个最大值为 x 的方案数&#xff0c;我们要求这个&#xff0c;那就设 g[x] 为 至少有一个最大值为 x 的方案数&#xff0c;那么答案就是 f[x] g[x] - g[x - 1] 这里…
阅读更多...
FL Studio21版无限破解版下载 软件内置破解补丁

FL Studio21版无限破解版下载 软件内置破解补丁

FL Studio是一款非常好用方便的音频媒体制作工具&#xff0c;它的功能是非常的强大全面的&#xff0c;想必那些喜欢音乐创作的朋友们应该都知道这款软件是多么的好用吧&#xff0c;它还能够给用户们带来更多的创作灵感&#xff0c;进一步加强提升我们的音乐制作能力。该软件还有…
阅读更多...
浅谈uniapp中开发安卓原生插件

浅谈uniapp中开发安卓原生插件

其实官方文档介绍的比较清楚而且详细,但是有时候他太墨迹,你一下子找不到自己想要的,所以我总结了一下开发的提纲,也是为了自己方便下次使用。 1.第一步,下载官方提供的Android的示例工程,然后倒入UniPlugin-Hello-AS工程请在App离线SDK中查找,之后Android studio,编译运行项目…
阅读更多...
Android Studio Gradle中没有Task任务，没有Assemble任务，不能方便导出aar包

Android Studio Gradle中没有Task任务，没有Assemble任务，不能方便导出aar包

Gradle中&#xff0c;没有Assemble任务 1. 在编译aar包或者编译module的时候&#xff0c;没有release包&#xff0c;我们一般都是通过assemble进行编译。 如果在Gradle中找不到task。 可以通过设置File->setting -->Experimental→取消勾选“Do not build Gradle task …
阅读更多...
wordpress数据库迁移Invalid default value for ‘comment_date‘

wordpress数据库迁移Invalid default value for ‘comment_date‘

问题说明 最近在往新的电脑上迁移一个wordpress网站&#xff0c;在往新电脑上的mysql数据库中导入数据时&#xff0c;报错&#xff1a;1067 - Invalid default value for comment_date。 异常分析 这个错误的字面意思就是字段‘comment_date’的默认值是无效的&#xff0c;于…
阅读更多...
Flink将数据写入MySQL(JDBC)

Flink将数据写入MySQL(JDBC)

一、写在前面 在实际的生产环境中&#xff0c;我们经常会把Flink处理的数据写入MySQL、Doris等数据库中&#xff0c;下面以MySQL为例&#xff0c;使用JDBC的方式将Flink的数据实时数据写入MySQL。 二、代码示例 2.1 版本说明 <flink.version>1.14.6</flink.version…
阅读更多...
UE5 Blueprint发送http请求

UE5 Blueprint发送http请求

一、下载插件HttpBlueprint、Json Blueprint Utilities两个插件是互相依赖的&#xff0c;启用&#xff0c;重启项目 目前两个是Beta的状态&#xff0c;如果你使用的平台支持就可以使用&#xff0c;我们的项目因为需要取Header的值&#xff0c;所有没法使用这两个插件&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站