当前位置： 首页 > news >正文

❤️创意网页：能量棒页面 - 可爱版（加载进度条）

news 2025/11/3 7:24:36

✨博主：命运之光 

🌸专栏：Python星辰秘典

🐳专栏：web开发（简单好用又好看）

❤️专栏：Java经典程序设计

☀️博主的其他文章：点击进入博主的主页

前言：欢迎踏入我的Web项目专栏，一段神奇而令人陶醉的数字世界！

🌌在这里，我将带您穿越时空，揭开属于Web的奥秘。通过HTML、CSS和JavaScript的魔力，我创造了一系列令人惊叹的Web项目，它们仿佛是从梦境中涌现而出。

🌌在这个专栏中，您将遇到华丽的界面，如流星划过夜空般迷人；您将感受到动态的交互，如魔法般让您沉浸其中；您将探索响应式设计的玄妙，让您的屏幕变幻出不同的绚丽景象。

🌌无论您是一个探险家还是一位嗜血的代码巫师，这个专栏将成为您的魔法书。我将分享每个项目的秘密，解开编码的谜题，让您也能够拥有制作奇迹的力量。

🌌准备好了吗？拿起您的键盘，跟随我的指引，一起进入这个神秘而充满惊喜的数字王国。在这里，您将找到灵感的源泉，为自己创造出一段奇幻的Web之旅！

目录

介绍

动态图展示

静态图展示

图片1

图片2

准备工作

HTML 结构

JavaScript 代码

绘制能量棒

更新加载进度

模拟加载过程

运行效果

完整代码

代码的使用方法（超简单什么都不用下载）

🍓1.打开记事本 

🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可

🍓3.打开html文件（大功告成(●'◡'●)）

总结

介绍

在本技术博客中，我们将学习如何使用HTML5 Canvas和JavaScript创建一个可爱版的能量棒加载页面。我们将绘制一个带有彩虹光晕效果的能量棒，并通过模拟加载过程来展示加载进度。通过本项目，您将了解如何使用Canvas绘制动态效果，并运用可爱的彩虹字符和光晕效果，增添页面的趣味性。

动态图展示

静态图展示

图片1

图片2

准备工作

在开始之前，请确保您已经具备以下条件：

  • 基本的HTML、CSS和JavaScript知识。
  • 一个支持HTML5的现代web浏览器（推荐使用最新版本的Chrome、Firefox、Safari等）。

HTML 结构

首先，让我们创建一个HTML文件，并添加必要的结构。

<!DOCTYPE html>
<html>
<head><title>能量棒加载页面 - 可爱版</title><style>/* ... 上面的CSS代码 ... */</style>
</head>
<body><div class="progress-container"><canvas id="energyBarCanvas" width="400" height="30"></canvas><div class="loading-text">🌈 loading 0%</div></div><script>// JavaScript代码将在下面添加</script>
</body>
</html>

在这个HTML结构中，我们定义了一个Canvas元素和一个显示加载进度的容器。

JavaScript 代码

现在，让我们添加JavaScript代码来实现这个可爱版的能量棒加载页面。

<!-- ... 上面的HTML代码 ... --><script>// 获取Canvas元素和上下文const canvas = document.getElementById('energyBarCanvas');const ctx = canvas.getContext('2d');// 能量棒的宽度和高度const barWidth = canvas.width;const barHeight = canvas.height;// 加载进度（0-100）let progress = 0;// 设置能量棒的颜色和背景颜色const barColor = '#FF69B4'; // 热情粉红色const bgColor = '#FEE2E2'; // 淡粉色背景// 绘制能量棒的函数function drawEnergyBar() {// ... 绘制能量棒的代码 ...}// 更新加载进度并重绘能量棒function updateProgress(newProgress) {// ... 更新加载进度的代码 ...}// 模拟加载过程，每30毫秒增加一点加载进度function simulateLoading() {// ... 模拟加载过程的代码 ...}// 开始加载simulateLoading();
</script>
</body>
</html>

在这部分代码中，我们定义了绘制能量棒、更新加载进度和模拟加载过程的函数。接下来，我们将实现这些功能。

绘制能量棒

让我们编写绘制能量棒的函数，并在Canvas上绘制能量棒。

// 绘制能量棒的函数
function drawEnergyBar() {// 清空Canvasctx.clearRect(0, 0, barWidth, barHeight);// 绘制背景矩形ctx.fillStyle = bgColor;ctx.fillRect(0, 0, barWidth, barHeight);// 添加渐变效果const gradient = ctx.createLinearGradient(0, 0, barWidth, 0);gradient.addColorStop(0, '#FF69B4');gradient.addColorStop(1, '#FF00FF');// 绘制能量棒ctx.fillStyle = gradient;ctx.fillRect(0, 0, barWidth * (progress / 100), barHeight);// 绘制🍓字符光晕效果ctx.fillStyle = 'rgba(255, 105, 180, 0.5)'; // 粉红色光晕效果ctx.font = '30px Arial';ctx.fillText('🐢', barWidth * (progress / 100) - 15, barHeight / 2 + 10);// 获取进度文字的元素const loadingText = document.querySelector('.loading-text');// 更新进度文字内容loadingText.textContent = `🌈 loading ${progress}%`; // 可爱的彩虹字符
}

在这段代码中，我们使用Canvas绘制了一个能量棒，其中背景为淡粉色，能量棒的颜色为热情粉红色。通过添加渐变效果，我们使能量棒呈现出彩虹色的效果。为了增加趣味性，我们在能量棒的末尾绘制了一个🍓字符，并给它添加了粉红色的光晕效果。

更新加载进度

接下来，我们编写更新加载进度并重绘能量棒的函数。

// 更新加载进度并重绘能量棒
function updateProgress(newProgress) {if (newProgress >= 0 && newProgress <= 100) {progress = newProgress;drawEnergyBar();}
}

这个函数接受一个新的加载进度值（0-100），然后更新进度，并重新绘制能量棒。

模拟加载过程

最后，我们模拟加载过程，每30毫秒增加一点加载进度。

// 模拟加载过程，每30毫秒增加一点加载进度
function simulateLoading() {const interval = setInterval(() => {updateProgress(progress + 1);if (progress === 100) {clearInterval(interval);}}, 30);
}// 开始加载
simulateLoading();

在这段代码中，我们使用setInterval函数，每隔30毫秒增加1点加载进度，并通过调用updateProgress函数更新进度并重新绘制能量棒。当进度达到100%时，我们使用clearInterval函数停止加载过程。

运行效果

将上述HTML代码保存为一个HTML文件，并在支持HTML5的现代web浏览器中打开它。您将会看到一个可爱版的能量棒加载页面，粉红色的能量棒随着加载进度增长，同时伴随着可爱的彩虹字符和光晕效果，增添页面的趣味性。

完整代码

<!DOCTYPE html>
<html>
<head><title>能量棒加载页面 - 可爱版</title><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #FEE2E2; /* 淡粉色背景 */color: #FF69B4; /* 热情粉红文字颜色 */font-family: 'Arial', sans-serif;}.progress-container {display: flex;flex-direction: column;align-items: center;}canvas {border: 2px solid #FF69B4; /* 热情粉红边框 */box-shadow: 0px 0px 20px rgba(255, 105, 180, 0.3); /* 粉红色阴影 */border-radius: 20px; /* 圆角边框 */}.loading-text {font-size: 20px;margin-top: 10px;font-weight: bold; /* 加粗字体 */}</style>
</head>
<body><div class="progress-container"><canvas id="energyBarCanvas" width="400" height="30"></canvas><div class="loading-text">🌈 loading 0%</div> <!-- 可爱的彩虹字符 --></div><script>// 获取Canvas元素和上下文const canvas = document.getElementById('energyBarCanvas');const ctx = canvas.getContext('2d');// 能量棒的宽度和高度const barWidth = canvas.width;const barHeight = canvas.height;// 加载进度（0-100）let progress = 0;// 设置能量棒的颜色和背景颜色const barColor = '#FF69B4'; // 热情粉红色const bgColor = '#FEE2E2'; // 淡粉色背景// 绘制能量棒的函数function drawEnergyBar() {// 清空Canvasctx.clearRect(0, 0, barWidth, barHeight);// 绘制背景矩形ctx.fillStyle = bgColor;ctx.fillRect(0, 0, barWidth, barHeight);// 添加渐变效果const gradient = ctx.createLinearGradient(0, 0, barWidth, 0);gradient.addColorStop(0, '#FF69B4');gradient.addColorStop(1, '#FF00FF');// 绘制能量棒ctx.fillStyle = gradient;ctx.fillRect(0, 0, barWidth * (progress / 100), barHeight);// 绘制🍓字符光晕效果ctx.fillStyle = 'rgba(255, 105, 180, 0.5)'; // 粉红色光晕效果ctx.font = '30px Arial';ctx.fillText('🐢', barWidth * (progress / 100) - 15, barHeight / 2 + 10);// 获取进度文字的元素const loadingText = document.querySelector('.loading-text');// 更新进度文字内容loadingText.textContent = `🌈 loading ${progress}%`; // 可爱的彩虹字符}// 更新加载进度并重绘能量棒function updateProgress(newProgress) {if (newProgress >= 0 && newProgress <= 100) {progress = newProgress;drawEnergyBar();}}// 模拟加载过程，每30毫秒增加一点加载进度function simulateLoading() {const interval = setInterval(() => {updateProgress(progress + 1);if (progress === 100) {clearInterval(interval);}}, 30);}// 开始加载simulateLoading();</script>
</body>
</html>

代码的使用方法（超简单什么都不用下载）

🍓1.打开记事本 

🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可

🍓3.打开html文件（大功告成(●'◡'●)）

总结

在本篇博客中，我们学习了如何使用HTML5 Canvas和JavaScript创建一个可爱版的能量棒加载页面。通过绘制能量棒和添加彩虹字符和光晕效果，我们成功地打造了一个有趣的加载页面。

希望这个简单而有趣的项目能够激发您创造更多有趣效果的灵感。感谢您的阅读，祝您编程愉快！

本章的内容就到这里了，觉得对你有帮助的话就支持一下博主把~

🌌点击下方个人名片，交流会更方便哦~
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

 

 

 

 

 

 

相关文章：

❤️创意网页：能量棒页面 - 可爱版（加载进度条）

✨博主&#xff1a;命运之光 &#x1f338;专栏&#xff1a;Python星辰秘典 &#x1f433;专栏&#xff1a;web开发&#xff08;简单好用又好看&#xff09; ❤️专栏&#xff1a;Java经典程序设计 ☀️博主的其他文章&#xff1a;点击进入博主的主页 前言&#xff1a;欢迎踏入…...

编程日记 2023/7/31 11:11:17

C语言中的操作符（万字详解）

C语言中的操作符&#xff08;万字详解&#xff09; 一、算术操作符&#xff08;&#xff09;1.除号 /2.取余 %二、移位操作符1.原码2.反码3.补码4.左移操作符5.右移操作符三、位操作符1.按位与操作符&#xff1a;&2.按位或操作符&#xff1a;|3.按位异或操作符&#xff1a;…...

编程日记 2023/7/31 11:10:16

Panda 编译时原子化 CSS-in-JS 框架的跨平台方案

Panda 编译时原子化 CSS-in-JS 框架的跨平台方案 Panda 编译时原子化 CSS-in-JS 框架的跨平台方案 对编译时原子化CSS框架的思考编译时 CSS-in-JS 方案对比 LinariaPandacss总结 weapp-pandacss 介绍快速开始 pandacss 安装和配置 0. 安装和初始化 pandacss1. 配置 postcss2. …...

编程日记 2023/7/31 11:09:15

【图论】BFS中的最短路模型

算法提高课笔记 目录 迷宫问题题意思路代码 武士风度的牛题意思路代码 抓住那头牛题意思路代码 BFS可以解决边权为1的最短路问题&#xff0c;下面是三道相关例题 迷宫问题 原题链接 给定一个 nn 的二维数组&#xff0c;如下所示&#xff1a; int maze[5][5] {0, 1, 0, 0, …...

编程日记 2023/7/31 11:08:15

Linux Mint 21.2 ISO 镜像开放下载

导读Linux Mint 21.2 ISO 镜像于 2023 年 6 月 21 日公测&#xff0c;开发者在这段时间内收集并修复了用户反馈的诸多问题。 代号为“Victoria”的 Linux Mint 21.2 ISO 镜像于今天正式开放下载&#xff0c;新版本基于 Ubuntu 22.04 LTS&#xff0c;提供 Cinnamon 5.8、Xfce 4.…...

编程日记 2023/7/31 11:07:14

版本适配好帮手 Android SDK Upgrade Assistant / Android Studio Giraffe新功能

首先是新版本一顿下载↓&#xff1a; Download Android Studio & App Tools - Android Developers 在Tools中找到Android SDK Upgrade Assistant 可以在此直接查看SDK升级相关信息&#xff0c;不用跑到WEB端去查看了。 例如看一下之前经常要对老项目维护的android 12蓝牙…...

编程日记 2023/7/31 11:06:12

kafka权威指南学习以及kafka生产配置

0、kafka常用命令 Kafka是一个分布式流处理平台&#xff0c;它具有高度可扩展性和容错性。以下是Kafka最新版本中常用的一些命令&#xff1a; 创建一个主题&#xff08;topic&#xff09;&#xff1a; bin/kafka-topics.sh --create --topic my-topic --partitions 3 --replic…...

编程日记 2023/7/31 11:05:09

自由行的一些小tips

很多很多年前&#xff0c;写过一些关于自由行的小攻略&#xff0c;关于互联网时代的自助旅游&#xff0c;说起来八年了&#xff0c;很多信息可能过期了。 前几天准备回坡&#xff0c;因为自己比较抠门&#xff0c;发现目前大陆回新加坡的机票比较贵&#xff08;接近4000人民币&…...

编程日记 2023/7/31 11:04:08

uiautomatorViewer无法获取Android8.0手机屏幕截图的解决方案

问题描述&#xff1a; 做APP UI自动化的时候&#xff0c;会碰到用uiautomatorViewer在Android 8.0及以上版本的手机上&#xff0c;无法获取到手机屏幕截图&#xff0c;无法获取元素定位信息的问题&#xff0c;会有以下的报 在低版本的Android手机上&#xff0c;则没有这个问题…...

编程日记 2023/7/31 11:03:07

使用LangChain构建问答聊天机器人案例实战（三）

使用LangChain构建问答聊天机器人案例实战 LangChain开发全流程剖析 接下来，我们再回到“get_prompt()”方法。在这个方法中，有系统提示词（system prompts）和用户提示词（user prompts），这是从相应的文件中读取的，从“system.prompt”文件中读取系统提示词（system_tem…...

编程日记 2023/7/31 11:02:05

在windows上安装minio

1、下载windows版的minio&#xff1a; https://dl.min.io/server/minio/release/windows-amd64/minio.exe 2、在指定位置创建一个名为minio文件夹&#xff0c;然后再把下载好的文件丢进去&#xff1a; 3、右键打开命令行窗口&#xff0c;然后执行如下命令&#xff1a;(在minio.…...

编程日记 2023/7/31 11:01:04

22. 数据库的隔离级别和锁机制

文章目录 数据库的隔离级别和锁机制一、数据库隔离级别1. 隔离级别说明2. 如何选择隔离级别3. 查询当前客户端隔离级别的命令.4. 修改隔离的命令 二、数据库中的锁1. 共享锁、排他锁2. 死锁3. 行级锁、表级锁 三、解决更新丢失问题1. 解决方案2. 乐观锁、悲观锁3. 乐观锁、悲观…...

编程日记 2023/7/31 11:00:02

【题解】[ABC312E] Tangency of Cuboids（adhoc）

【题解】[ABC312E] Tangency of Cuboids 少见的 at 评分 \(2000\) 的 ABC E 题&#xff0c;非常巧妙的一道题。 特别鸣谢&#xff1a;dbxxx 给我讲解了他的完整思路。 题目链接 ABC312E - Tangency of Cuboids 题意概述 给定三维空间中的 \(n\) 个长方体&#xff0c;每个长方体…...

编程日记 2023/7/31 10:59:01

k8s服务发现之使用 HostAliases 向 Pod /etc/hosts 文件添加条目

某些情况下&#xff0c;DNS 或者其他的域名解析方法可能不太适用&#xff0c;您需要配置 /etc/hosts 文件&#xff0c;在Linux下是比较容易做到的&#xff0c;在 Kubernetes 中&#xff0c;可以通过 Pod 定义中的 hostAliases 字段向 Pod 的 /etc/hosts 添加条目。 适用其他方…...

编程日记 2023/7/31 10:58:00

python中有哪些比较运算符

目录 python中有哪些比较运算符 使用比较运算符需要注意什么 总结 python中有哪些比较运算符 在Python中&#xff0c;有以下比较运算符可以用于比较两个值之间的关系&#xff1a; 1. 等于 ()&#xff1a;检查两个值是否相等。 x y 2. 不等于 (!)&#xff1a;检查两个…...

编程日记 2023/7/31 10:56:58

Python网络编程详解：Socket套接字的使用与开发

Python网络编程详解&#xff1a;Socket套接字的使用与开发 1. 引言 网络编程是现代应用开发中不可或缺的一部分。通过网络编程&#xff0c;我们可以实现不同设备之间的通信和数据交换&#xff0c;为用户提供更加丰富的服务和体验。Python作为一种简洁而强大的编程语言&#x…...

编程日记 2023/7/31 10:55:57

Appium+python自动化（二十六）- Toast提示（超详解）简介

开始今天的主题 - 获取toast提示 在日常使用App过程中&#xff0c;经常会看到App界面有一些弹窗提示&#xff08;如下图所示&#xff09;这些提示元素出现后等待3秒左右就会自动消失&#xff0c;这个和我日常生活中看到的烟花和昙花是多么的相似&#xff0c;那么我们该如何获取…...

编程日记 2023/7/31 10:54:55

SpringBoot自动装配介绍

SpringBoot是对Spring的一种扩展&#xff0c;其中比较重要的扩展功能就是自动装配&#xff1a;通过注解对常用的配置做默认配置&#xff0c;简化xml配置内容。本文会对Spring的自动配置的原理和部分源码进行解析&#xff0c;本文主要参考了Spring的官方文档。 自动装配的组件 …...

编程日记 2023/7/31 10:53:54

1400*D. Candy Box (easy version)（贪心）

3 10 9 Example input 3 8 1 4 8 4 5 6 3 8 16 2 1 3 3 4 3 4 4 1 3 2 2 2 4 1 1 9 2 2 4 4 4 7 7 7 7 output 题意&#xff1a; n个糖果&#xff0c;分为多个种类&#xff0c;要求尽可能的多选&#xff0c;并且使得不同种类的数量不能相同。 解析&#xff1a; 记录每种糖…...

编程日记 2023/7/31 10:52:53

设计模式-备忘录模式在Java中使用示例-象棋悔棋

场景 备忘录模式 备忘录模式提供了一种状态恢复的实现机制&#xff0c;使得用户可以方便地回到一个特定的历史步骤&#xff0c;当新的状态无效 或者存在问题时&#xff0c;可以使用暂时存储起来的备忘录将状态复原&#xff0c;当前很多软件都提供了撤销(Undo)操作&#xff0…...

编程日记 2023/7/31 10:51:51

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

编程新知 2025/9/14 19:44:52

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2025/10/29 17:53:07

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）　にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために　＆　ように（３）そう（４）にする3、…...

编程新知 2025/10/29 10:05:16

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2025/10/21 3:50:52

优选算法第十二讲：队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2025/11/2 3:41:45

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

编程新知 2025/11/3 2:07:14

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/10/27 20:33:34

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

编程新知 2025/9/3 5:42:53

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...

编程新知 2025/10/26 15:04:15

Chrome 浏览器前端与客户端双向通信实战

Chrome 前端&#xff08;即页面 JS / Web UI&#xff09;与客户端&#xff08;C 后端&#xff09;的交互机制&#xff0c;是 Chromium 架构中非常核心的一环。下面我将按常见场景&#xff0c;从通道、流程、技术栈几个角度做一套完整的分析&#xff0c;特别适合你这种在分析和改…...

编程新知 2025/10/30 14:37:29