使用JS和CSS制作的小案例(day二)

news2024/11/23 21:52:26

一、写在开头

本项目是从github上摘取,自己练习使用后分享,方便登录github的小伙伴可以看本篇文章

50项目50天​编辑https://github.com/bradtraversy/50projects50daysicon-default.png?t=N7T8https://github.com/bradtraversy/50projects50days有兴趣的小伙伴可以自己去github上查看。

二、项目开始

这里展示的进度条效果,鼠标点击按钮,进度条开始变化。

对应的,这里我先把代码贴出,在一点点剖析

html页面

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>进度条</title>
</head>

<body>
    <div class="container">
        <div class="progress-container">
            <div class="progress" id="progress"></div>
            <div class="circle active">1</div>
            <div class="circle">2</div>
            <div class="circle">3</div>
            <div class="circle">4</div>
        </div>

        <button class="btn" id="prev" disabled>Prev</button>
        <button class="btn" id="next">Next</button>
    </div>

    <script src="index.js"></script>
</body>

</html>

css

:root {
    --line-border-fill: #3498db;
    --line-border-empty: #383838;

}

* {
    box-sizing: border-box;
}

body {
    background-color: #f1f1f1;
    font-family: 'Muli', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

.container {
    text-align: center;
}

.progress-container {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 30px;
    max-width: 100%;
    width: 350px;
}

.progress-container::before {
    content: '';
    background-color: var(--line-border-empty);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 4px;
    width: 100%;
    z-index: -1;
}

.progress {
    background-color: var(--line-border-fill);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 4px;
    width: 0%;
    z-index: -1;
    transition: 0.4s ease;
}

.circle {
    background-color: #f1f1f1;
    color: #e2e2e2;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--line-border-empty);
    transition: 0.4s ease;
}

.circle.active {
    border-color: var(--line-border-fill);
}

.btn {
    background-color: var(--line-border-fill);
    color: #fff;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    padding: 8px 30px;
    margin: 5px;
    font-size: 14px;
}

.btn:active {
    transform: scale(0.98);
}

.btn:focus {
    outline: 0;
}

.btn:disabled {
    background-color: var(--line-border-empty);
    cursor: not-allowed;
}

js

const progress = document.getElementById("progress");
const prev = document.getElementById("prev");
const next = document.getElementById("next");
const circles = document.querySelectorAll(".circle");

let currentActive = 1;

next.addEventListener("click", () => {
  currentActive++;
  if (currentActive > circles.length) {
    currentActive = circles.length;
  }
  update();
});

prev.addEventListener("click", () => {
  currentActive--;
  if (currentActive < 1) {
    currentActive = 1;
  }
  update();
});

function update() {
    circles.forEach((circle, idx) => {
        if (idx < currentActive) {
            circle.classList.add("active");
        } else {
            circle.classList.remove("active");
        }
    })
    
    // 更新进度条
    const actives = document.querySelectorAll(".active")
    progress.style.width = ((actives.length - 1) / (circles.length - 1)) * 100 + "%";

    // 做边界判断
    if(currentActive === 1){
        prev.disabled = true;
    }else if(currentActive === circles.length){
        next.disabled = true;
    }else{
        prev.disabled = false;
        next.disabled = false;
    }


}

三、具体解析

html页面

css

js

四、最后

希望这个案例可以帮助一些刚接触html、css、JavaScript的小伙伴。学习知识很重要,但是必要的练习是必不可少的。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

美式键盘 QWERTY 布局的起源

注&#xff1a;机翻&#xff0c;未校对。 The QWERTY Keyboard Is Tech’s Biggest Unsolved Mystery QWERTY 键盘是科技界最大的未解之谜 It’s on your computer keyboard and your smartphone screen: QWERTY, the first six letters of the top row of the standard keybo…

Redis的热key解决

1、Redis热Key会带来哪些问题 1、流量集中&#xff0c;达到物理网卡上限。 当某一热点 Key 的请求在某一主机上超过该主机网卡上限时&#xff0c;由于流量的过度集中&#xff0c;会导致服务器中其它服务无法进行。 2、请求过多&#xff0c;缓存分片服务被打垮。 如果热点过于…

Linux入门笔记(指令)

操作系统是什么&#xff1f; 操作系统是一款做软硬件管理的软件。计算机系统自下而上可以大致分为4部分&#xff1a;硬件、操作系统、应用程序和用户。操作系统管理各种计算机硬件&#xff0c;为应用程序提供基础&#xff0c;并且充当计算机硬件与用户之间的中介。重点&#x…

泛微e-cology WorkflowServiceXml SQL注入漏洞(POC)

漏洞描述&#xff1a; 泛微 e-cology 是泛微公司开发的协同管理应用平台。泛微 e-cology v10.64.1的/services/接口默认对内网暴露&#xff0c;用于服务调用&#xff0c;未经身份认证的攻击者可向 /services/WorkflowServiceXml 接口发送恶意的SOAP请求进行SQL注入&#xff0c;…

高并发项目(一):内存池的概念/定长内存池的实现

目录 一、池化技术及其优势 1.1什么是池化技术 1.2内存池的作用 1.3malloc的原理 二、定长内存池的实现 一、池化技术及其优势 1.1什么是池化技术 所谓 “ 池化技术 ” &#xff0c;就是程序先向系统申请过量的资源&#xff0c;然后自己管理&#xff0c;以备不时之需。之所…

微调 Florence-2 - 微软的尖端视觉语言模型

Florence-2 是微软于 2024 年 6 月发布的一个基础视觉语言模型。该模型极具吸引力&#xff0c;因为它尺寸很小 (0.2B 及 0.7B) 且在各种计算机视觉和视觉语言任务上表现出色。 Florence 开箱即用支持多种类型的任务&#xff0c;包括: 看图说话、目标检测、OCR 等等。虽然覆盖面…

吴恩达大模型系列课程《Prompt Compression and Query Optimization》中文学习打开方式

Prompt Compression and Query Optimization GPT-4o详细中文注释的Colab观看视频1 浏览器下载插件2 打开官方视频 GPT-4o详细中文注释的Colab 中文注释链接&#xff1a;https://github.com/Czi24/Awesome-MLLM-LLM-Colab/tree/master/Courses/Prompt-Compression-and-Query-Op…

Activity工作流框架——生成数据表

自动生成activiti数据库表 首先第一步&#xff0c;引入activiti依赖 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency>&…

生成树(STP)协议

一、生成树的技术背景 1、交换机单线路上链,存在单点故障,上行线路及设备都不具备冗余性,一旦链路或上行设备发生故障,网络将面临断网。 总结:以下网络不够健壮,不具备冗余性。 2、因此引入如下网络拓扑结构: 上述冗余拓扑能够解决单点故障问题,但同时冗拓扑也带来了…

Google 数据中心繁忙运转的一天

Google 数据中心是互联网世界的基石&#xff0c;支撑着搜索引擎、云计算服务、视频流媒体等无数在线应用的正常运行。 早晨&#xff1a;启动与检查 6:00 AM - 早班员工到岗 数据中心的运维团队分为多个班次&#xff0c;早班员工准时到岗。他们首先查看夜班同事的交接记录&…

C语言 | Leetcode C语言题解之第238题除自身以外的数组的乘积

题目&#xff1a; 题解&#xff1a; // 数组中除自身以外元素的乘积 int* productExceptSelf(int* nums, int numsSize, int* returnSize) {static int ra[100000]; // 结果数组for (int i 0; i < numsSize; i) {ra[i] 1; // 初始化结果数组为1}int pre 1, suf 1; /…

迭代器+反向迭代器

接上节内容&#xff0c;反向迭代器&#xff08;aoto的价值显示的更明显&#xff09; int main() {string s1("hello world");//string::reverse_iterator rit s1.rbegin();auto rit s1.rbegin();while (rit ! s1.rend()){(*rit) 3;cout << *rit << &…

TypeScript 函数类型 (二)

函数类型 函数有两种方式定义 function 关键字来定义函数 function a(){}表达式定义&#xff08;箭头函数的形式&#xff09; const a()>{}函数需要定义类型的有三个地方 入参 和 返回值 以及 函数本身 的类型, 函数本身的类型常用于表达式定义的函数 function sum(a:stri…

【初阶数据结构】3.单链表

文章目录 3.单链表3.1 概念与结构3.1.1 结点3.1.2 链表的性质3.1.3 链表的打印 3.2 实现单链表3.3 链表的分类3.4 单链表算法题3.4.1 移除链表元素3.4.2 反转链表3.4.3 链表的中间结点3.4.4 合并两个有序链表3.4.5 链表分割3.4.6 链表的回文结构3.4.7 相交链表3.4.8 环形链表I3…

Mysql解忧杂货铺

欢迎来到一夜看尽长安花 博客&#xff0c;您的点赞和收藏是我持续发文的动力 对于文章中出现的任何错误请大家批评指出&#xff0c;一定及时修改。有任何想要讨论的问题可联系我&#xff1a;3329759426qq.com 。发布文章的风格因专栏而异&#xff0c;均自成体系&#xff0c;不足…

面向对象七大原则

学习目标 了解面向对象七大原则基本概念。 在之后实践应用中&#xff0c;要给予七大原则去设计程序。 为什么有七大原则 七大原则总体要实现的目标是&#xff1a; 高内聚、低耦合。 使程序模块的可重复性、移植性增强。 高内聚低耦合 从类角度来看&#xff0c;高内聚低…

LTSPICE仿真电路:(二十)TVS管简单仿真

1.目的 目的很简单&#xff0c;就是为了更加了解TVS管&#xff0c;以及更加能记住他的特性&#xff0c;加深印象&#xff0c;原本是只打算仿真TVS管&#xff0c;后面做着做着&#xff0c;搞二极管伏安特性曲线的时候&#xff0c;发现稳压二极管和TVS管比较接近&#xff0c;索性…

解决 Vscode不支持c++11的语法

问题&#xff1a; 解决方案&#xff1a; 1、按 CtrlShiftP 调出命令面板&#xff0c;输入 C/C: Edit Configurations (UI) 并选择它。这将打开 C/C 配置界面 2、打开 c_cpp_properties.json 文件 3、编辑 c_cpp_properties.json 4、保存 c_cpp_properties.json 文件。 关闭并…

【HarmonyOS】关于鸿蒙消息推送的心得体会 (一)

【HarmonyOS】关于鸿蒙消息推送的心得体会&#xff08;一&#xff09; 前言 这几天调研了鸿蒙消息推送的实现方式&#xff0c;形成了开发设计方案&#xff0c;颇有体会&#xff0c;与各位分享。 虽然没做之前觉得很简单的小功能&#xff0c;貌似只需要和华为服务器通信&…