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

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

news 2026/2/10 2:09:06

✨博主：命运之光 

🌸专栏：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

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

编程新知 2026/2/8 4:37:27

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

编程新知 2026/2/8 20:41:56

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2026/2/6 23:18:59

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

编程新知 2026/1/25 11:13:37

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2026/2/5 17:51:52

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程新知 2026/1/31 17:15:25

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

编程新知 2026/2/2 0:35:08

如何在网页里填写 PDF 表格？

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

编程新知 2026/2/6 22:20:51

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/9/27 12:03:43

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解&#xff0c;涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容&#xff0c;并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念&#xff08;ACID&#xff09; 事务是…...

编程新知 2025/9/19 22:12:36