基于HTML5实现动态烟花秀效果(含音效和文字)实战
目录
前言
一、烟花秀效果功能分解
1、功能分解
2、界面分解
二、HTML功能实现
1、html界面设计
2、背景音乐和燃放触发
3、燃放控制
4、对联展示
5、脚本引用即文本展示
三、脚本调用及实现
1、烟花燃放
2、燃放响应
3、烟花canvas创建
4、燃放声音控制
5、实际效果
总结
前言
今天是2024年2月15日,农历正月初六。正月初六,又称为“马日”,是中国传统节日春节期间的一个重要习俗日。这一天,人们有送穷、启市、外出游玩、吃驴打滚等习俗。大年初六,你们那都有什么传统习俗呢?我们来看看全国都有什么习俗吧。
- 送穷。正月初六是送穷神的日子,人们会进行大扫除,清理家中的垃圾和废物,以示送走贫穷和厄运。在送穷的过程中,人们还会贴上红色的对联和福字,寓意着迎接好运和富贵。
- 启市。初六也是生意人“启市”的好日子,做生意的生意人有着初六开市的习俗,初六这一天会放鞭炮开张,有些讲究的商户还会在门上贴上,开市大吉,万事亨通的对联,寓意着今年的生意能够红红火火,大吉大利,财源滚滚来。
- 外出游玩。正月初六有外出游玩的习俗,而且特别喜欢去人多热闹的地方。大家外出会走一个圆圈的形状,意味着新的一年生活圆满和幸福。
- 吃驴打滚。正月初六吃驴打滚也是为了取一个好彩头,在民间有着吃驴打滚,财源滚滚来的美好寓意。
- 摆吉祥果。家家户户都会摆上寓意吉祥的水果,以祈求自己新的一年,顺顺利利,大吉大利。
上面都是一些传统节日中的重要习俗,各位小伙伴可以在评论区给我们分享一些你们当地有趣的初六或者过年习俗吧。大年初六,相信很多IT的小伙伴已经踏上了返程的道路,真诚祝愿大家在龙年顺顺利利,所愿皆所成。作为一名IT从业者,也想用技术来与大家一起度过这个愉快,寓意顺利的初六。
本文将重点讲解使用HTML5实现一款动态的烟花秀,不仅有美丽绚烂的烟花,同时在烟花燃放时,还有预约的音乐,加上热情动态的文字燃放效果,最后将给出实战代码源码,感兴趣的朋友可以参考实现。
一、烟花秀效果功能分解
烟花秀的效果包含五彩缤纷的烟花展示,主要采用canvas技术,在燃放的过程中,需要模拟烟花爆炸的声音,同时还有背景音乐,系统界面可以展示温馨的提示,在展示页面两侧需要展示春联。下面从功能和界面两个方面对烟花秀进行分解。
1、功能分解
2、界面分解
烟花秀的界面结构图如下所示,整体采用对联加烟花效果背景音乐为主。
二、HTML功能实现
本节将对烟花秀效果的实现进行详细的说明。主要包含主要展示页面的可视化展示创建,相关脚本功能的编写。本文采用的示例代码是在开源的框架上修改,同时修改了一些展示的错误以及修复了文字动态烟花播放效果,音效控制等功能。文末会分享其开源地址,下图是这个下载下来的示例项目的js源码,可以看到,其是采用jquery等传统es5开发模式进行开发的。
1、html界面设计
首先,需要创建一个html页面,定义最基础的网页开发框架。html的基础知识比较简单,这里不再进行赘述。关键源代码如下:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>2024龙年快乐</title><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><meta name="mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="theme-color" content="#000000"><link rel="shortcut icon" type="image/png"href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png"><link rel="icon" type="image/png"href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png"><link rel="apple-touch-icon-precomposed"href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png"><meta name="msapplication-TileColor" content="#000000"><meta name="msapplication-TileImage"content="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png"><link href="static/css/css.css" rel="stylesheet"><link rel="stylesheet" href="static/css/reset.min.css"><link rel="stylesheet" href="static/css/style.css"><script src="static/js/jquery.min.js" type="text/javascript"></script></head><body></body></html>
2、背景音乐和燃放触发
烟花秀中除了烟花燃放本身的爆炸声音,同时为了烘托和渲染节日的氛围,也增加背景音乐的播功能,更加沉浸式的欣赏烟花秀效果,燃放触发是在界面上点击后即实现烟花的燃放。定义背景音乐和燃放触发的关键代码如下:
<script src="static/js/jump.js"></script><img id="music_ico" onclick="" alt="" style=" display: inline; float: right; "><audio id="audioDom" src="https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/7170534431801838367.mp3"preload="auto" loop="loop"></audio><div id="yhBtn"style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff ; font-size:15px "><p>💥点爆</p><img style="width:64px;margin-bottom:24px "src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/aee169ba675b45da9c46178a7dff7141~tplv-tt-shrink:640:0.image?traceid=2023031217004633E93ACFE2CECD4E7B70&x-expires=2147483647&x-signature=s7SeUD%2FlMsfTpWPP7Tl47sPaT%2BQ%3D"></div>
需要注意的是,为了节约存储空间,这里的背景音乐使用在线的mp3音乐,如果需要离线化展示,可以将mp3进行离线保存即可。
3、燃放控制
燃放控制可以支持对烟花秀的播放状态进行控制,比如开启和暂停。同时控制烟花的播放声效等。还支持设置烟花的样式、大小、时间、密度等(这里有一些小问题,需要使用的朋友需要自己去实现)。关键代码如下:
<div style="height: 100; width: 100; position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-play" viewbox="0 0 24 24"><path d="M8 5v14l11-7z"></path></symbol><symbol id="icon-pause" viewbox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path></symbol><symbol id="icon-close" viewbox="0 0 24 24"><pathd="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></symbol><symbol id="icon-settings" viewbox="0 0 24 24"><pathd="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"></path></symbol><symbol id="icon-sound-on" viewbox="0 0 24 24"><pathd="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"></path></symbol><symbol id="icon-sound-off" viewbox="0 0 24 24"><pathd="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"></path></symbol></svg></div><div class="container"><div class="loading-init"><div class="loading-init__header"></div><div class="loading-init__status"></div></div><div class="stage-container remove"><div class="page_two hide"><div class="type_words" id="contents"></div></div><div class="canvas-container"><canvas id="trails-canvas"></canvas><canvas id="main-canvas"></canvas></div><div class="controls hide"><div class="btn pause-btn"><svg fill="white" width="24" height="24"><use href="#icon-pause" xlink:href="#icon-pause"></use></svg></div><div class="btn sound-btn"><svg fill="white" width="24" height="24"><use href="#icon-sound-off" xlink:href="#icon-sound-off"></use></svg></div><div class="btn settings-btn"><svg fill="white" width="24" height="24"><use href="#icon-settings" xlink:href="#icon-settings"></use></svg></div></div><div class="menu hide"><div class="menu__inner-wrap"><div class="btn btn--bright close-menu-btn"><svg fill="white" width="24" height="24"><use href="#icon-close" xlink:href="#icon-close"></use></svg></div><div class="menu__header">设置</div><form><div class="form-option form-option--select"><label class="shell-type-label">烟花类型</label><select class="shell-type"></select></div><div class="form-option form-option--select"><label class="shell-size-label">烟花大小</label><select class="shell-size"></select></div><div class="form-option form-option--select"><label class="quality-ui-label">画质</label><select class="quality-ui"></select></div><div class="form-option form-option--select"><label class="sky-lighting-label">天空照明</label><select class="sky-lighting"></select></div><div class="form-option form-option--select"><label class="scaleFactor-label">规模</label><select class="scaleFactor"></select></div><div class="form-option form-option--checkbox"><label class="auto-launch-label">自动发射</label><input class="auto-launch" type="checkbox"></div><div class="form-option form-option--checkbox form-option--finale-mode"><label class="finale-mode-label">结局模式</label><input class="finale-mode" type="checkbox"></div><div class="form-option form-option--checkbox"><label class="hide-controls-label">隐藏控制器</label><input class="hide-controls" type="checkbox"></div><div class="form-option form-option--checkbox form-option--fullscreen"><label class="fullscreen-label">全屏</label><input class="fullscreen" type="checkbox"></div><div class="form-option form-option--checkbox"><label class="long-exposure-label">打开快门</label><input class="long-exposure" type="checkbox"></div></form></div></div></div><div class="help-modal"><div class="help-modal__overlay"></div><div class="help-modal__dialog"><div class="help-modal__header"></div><div class="help-modal__body"></div><button type="button" class="help-modal__close-btn">关闭</button></div></div></div>
4、对联展示
为了在展示页面中烘托节日的气氛,这里在展示页面左右两边增加对联的展示。这里采用div布局,字体采用楷体。对联内容如下:
鲲鹏展翅华夏腾飞
龙凤呈祥阳春锦绣
代码实现如下:
<div style="width:60px;position:fixed;left:0px;top:30%;background-color:red;text-align:center;font-family:楷体;font-size:36px;"><font color="black" >鲲<br/>鹏<br/>展<br/>翅<br/>华<br/>夏<br/>腾<br/>飞</font></div><div style="width:60px;position:fixed;right:0px;top:30%;background-color:red;text-align:center;font-family:楷体;font-size:36px;"><font color="black">龙<br/>凤<br/>呈<br/>祥<br/>阳<br/>春<br/>锦<br/>绣</font></div>
5、脚本引用即文本展示
在html页面引用相应的javascript脚本资源,在这里增加相应的逻辑调用。同时,在这里会将页面展示动态文字,将文字作为烟花的实例进行燃放,为了在移动端实现这种效果,同时支持分辨率适配。详细代码设置如下:
<script>window.myWord = "❤新年快乐(*^▽^*) <br > 新的一年, 新的开始, 要继续努力哦。<br/>祝朋友们学习进步,开心快乐";window.words = ["", "2024", "新年快乐", "万事如意", "心想事成", "龙年大吉","龙年行大运","祥瑞照门庭"];</script><script src="static/js/jquery.min.js" type="text/javascript"></script><script src='static/js/fscreen@1.0.1.js'></script> <script src='static/js/stage@0.1.4.js'></script><script src='static/js/mymath.js'></script><script src="static/js/script.js"></script><script src="static/js/main.js"></script><script src="static/js/game.js"></script><script src="static/js/game2.js?v=1.0.0"></script><style>@media only screen and (max-width: 768px) {.canvas-container {/* 迪士尼 *//* background-image: url("https://p3-search.byteimg.com/obj/pgc-image/09b7e7820ba94e76b10a39802b901cab"); */background-image: url(./static/img/20231229155918.jpg);/* 放烟花 */background-size: cover;background-position: center;}}@media only screen and (min-width: 768px) {.canvas-container {/* 天空月亮 */background-image: url(./static/img/e83f1c98e4ff999d33fa02d95d083f5d.png);background-size: cover;background-position: center;}}</style>
三、脚本调用及实现
html框架仅仅是页面的展示外壳,要让烟花秀真正的动态燃放,必然少不了javascript的支持。这里将重点介绍脚本的调用。让我们来看看烟花秀的实现过程。
1、烟花燃放
在页面中我们定义了一个烟花的图片,在页面中点击任意位置即可完成烟花的点燃。同时完成相关事件的触发。事件源码在main.js中:
function musicPlay(isPlay) {var media = document.querySelector('#audioDom');if (isPlay && media.paused) {media.play();}if (!isPlay && !media.paused) {media.pause();}
}
function musicInBrowserHandler() {setTimeout(function () {musicPlay(true)}, 0)
}
document.body.addEventListener('touchstart', musicInBrowserHandler);
$('#yhBtn').click(e => {$('#yhBtn').hide()setTimeout(function () {startF();}, 3000)setTimeout(() => {start()fireworks();}, 5000) // 这里的5000 是5s指烟花延时时间setTimeout(() => {function audioAutoPlay() {var audio = document.getElementById('audioDom');audio.play();}audioAutoPlay();}, 5000) // 这里的5000 是5s指音乐延时时间console.log(updateConfig({ autoLaunch: true }));
})
function fireworks() {$('.page_one').addClass('hide');$('.page_two').removeClass('hide');/*$('.page_two').fireworks({sound: false,opacity: 1,width: '100%',height: '100%'});*/
}
function start() {let str =window.myWord; let str_ = ''let i = 0let content = document.getElementById('contents')let timer = setInterval(() => {if (str_.length < str.length) {str_ += str[i++]content.innerHTML = '<p>' + str_ + '<span class="xx" style="opacity: 1; color: red;">❤</span></p>' //打印时加光标} else {clearInterval(timer)content.innerHTML = '<p>' + str_ + '</p>'}}, 100)
}
2、燃放响应
在这里触发了startF()函数,在game2.js中查看startF()具体实现:
3、烟花canvas创建
在开始燃放函数中,烟花是基于canvas进行展示的。下面来具体看看烟花的实现:
4、燃放声音控制
为了让烟花秀更加逼真,需要在燃放时进行爆炸的模拟。因此首先要进行声源的定义,然后再进行播放。
5、实际效果
基于html5的动态烟花秀
总结
以上就是本文的主要内容,本文将重点讲解使用HTML5实现一款动态的烟花秀,不仅有美丽绚烂的烟花,同时在烟花燃放时,还有预约的音乐,加上热情动态的文字燃放效果。行文仓促,定有不当之处,还请各位朋友批评。
原始实例地址:html5烟花秀
相关文章:
基于HTML5实现动态烟花秀效果(含音效和文字)实战
目录 前言 一、烟花秀效果功能分解 1、功能分解 2、界面分解 二、HTML功能实现 1、html界面设计 2、背景音乐和燃放触发 3、燃放控制 4、对联展示 5、脚本引用即文本展示 三、脚本调用及实现 1、烟花燃放 2、燃放响应 3、烟花canvas创建 4、燃放声音控制 5、实际…...
「数据结构」栈和队列
栈 栈的基本概念 定义 栈是只允许在一端进行插入或删除操作的线性表栈顶:线性表允许进行插入删除的那一端栈底:固定的,不允许进行插入和删除的另一端空栈:不含任何元素特点:后进先出(LIFO) 基…...
【机器学习笔记】5 机器学习实践
数据集划分 子集划分 训练集(Training Set):帮助我们训练模型,简单的说就是通过训练集的数据让我们确定拟合曲线的参数。 验证集(Validation Set):也叫做开发集( Dev Set …...
C++ //练习 7.5 在你的Person类中提供一些操作使其能够返回姓名和住址。这些函数是否应该是const的呢?解释原因。
C Primer(第5版) 练习 7.5 练习 7.5 在你的Person类中提供一些操作使其能够返回姓名和住址。这些函数是否应该是const的呢?解释原因。 环境:Linux Ubuntu(云服务器) 工具:vim 解释 姓名大概…...
python系统学习Day2
section3 python Foudamentals part one:data types and variables 数据类型:整数、浮点数、字符串、布尔值、空值 #整型,没有大小限制 >>>9 / 3 #3.0 >>>10 // 3 #3 地板除 >>>10 % 3 #1 取余#浮点型ÿ…...
学习笔记——ENM模拟
学习笔记——ENM模拟 文章目录 前言一、文献一1. 材料与方法1.1. 大致概念1.2. 生态模型的构建1.2.1. 数据来源:1.2.2. 数据处理:1.2.3. 模型参数优化: 1.3. 适生情况预测1.3.1. 预测模型构建1.3.2. 适生区划分 1.4. 模型的评估与验证 2. 结果…...
数值类型的运算方式总结
提纲1:常见的位运算使用场景 提纲2:整数类型运算时的类型溢出问题,产生原因以及解决办法 提纲3:浮点类型运算时的精度丢失问题,产生原因以及解决办法 数值类型(6种)分为: 整型&…...
【Redis快速入门】Redis三种集群搭建配置(主从集群、哨兵集群、分片集群)
个人名片: 🐼作者简介:一名大三在校生,喜欢AI编程🎋 🐻❄️个人主页🥇:落798. 🐼个人WeChat:hmmwx53 🕊️系列专栏:🖼️…...
[嵌入式系统-14]:常见实时嵌入式操作系统比较:RT-Thread、uC/OS-II和FreeRTOS、Linux
目录 一、实时嵌入式操作系统 1.1 概述 1.2 什么“实时” 1.3 什么是硬实时和软实时 1.4 什么是嵌入式 1.5 什么操作系统 二、常见重量级操作系统 三、常见轻量级嵌入式操作系统 3.1 概述 3.2 FreeRTOS 3.3 uC/OS-II 3.4 RT-Thread 3.5 RT-Thread、uC/OS-II、Free…...
基于AI Agent探讨:安全领域下的AI应用范式
先说观点:关于AI应用,通常都会聊准召。但在安全等模糊标准的场景下,事实上不存在准召的定义。因此,AI的目标应该是尽可能的“像人”。而想要评价有多“像人”,就先需要将人的工作数字化。而AI Agent是能够将数字化、自…...
Stable Diffusion 模型下载:ToonYou(平涂卡通)
本文收录于《AI绘画从入门到精通》专栏,专栏总目录:点这里。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八案例九案例十...
机器学习:分类决策树(Python)
一、各种熵的计算 entropy_utils.py import numpy as np # 数值计算 import math # 标量数据的计算class EntropyUtils:"""决策树中各种熵的计算,包括信息熵、信息增益、信息增益率、基尼指数。统一要求:按照信息增益最大、信息增益率…...
红队打靶练习:HACK ME PLEASE: 1
信息收集 1、arp ┌──(root㉿ru)-[~/kali] └─# arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:69:c7:bf, IPv4: 192.168.61.128 Starting arp-scan 1.10.0 with 256 hosts (https://github.com/royhills/arp-scan) 192.168.61.2 00:50:56:f0:df:20 …...
《VulnHub》GoldenEye:1
title: 《VulnHub》GoldenEye:1 date: 2024-02-16 14:53:49 updated: 2024-02-16 15:08:49 categories: WriteUp:Cyber-Range excerpt: 主机发现、目标信息扫描、源码 js 文件泄露敏感信息、hydra 爆破邮件服务(pop3)、邮件泄露敏…...
html的表格标签
html的表格标签 table标签:表示整个表格tr:表示表格的一行td:表示一个单元格th:表示表头单元格.会居中加粗thead:表格的头部区域 (注意和th区分,范围是比th要大的).tbody:表格得到主体区域. table包含tr , tr包含td或者th. 表格标签有一些属性,可以用于设置大小边…...
蓝桥杯(Web大学组)2022省赛真题:展开你的扇子
思路: transform-origin: center bottom;使盒子旋转时,以底部的中心为坐标原点(题目已给出) 对每个盒子使用transform: rotate();实现旋转 笔记: 设置悬浮旋转时, #box div:hover #item6{ } 为什…...
复习基础知识1
局部变量 写程序时,程序员经常会用到局部变量 汇编中寄存器、栈,可写区段、堆,函数的局部变量该存在哪里呢? 注意:局部变量有易失性 一旦函数返回,则所有局部变量会失效。 考虑到这种特性,人们…...
java8-用流收集数据-6
本章内容口用co1lectors类创建和使用收集器 口将数据流归约为一个值 口汇总:归约的特殊情况 数据分组和分区口 口 开发自己的自定义收集器 我们在前一章中学到,流可以用类似于数据库的操作帮助你处理集合。你可以把Java8的流看作花哨又懒惰的数据集迭代器。它们…...
[前端开发] JavaScript基础知识 [上]
下篇:JavaScript基础知识 [下] JavaScript基础知识 [上] 引言语句、标识符和变量JavaScript引入注释与输出数据类型运算符条件语句与循环语句 引言 JavaScript是一种广泛应用于网页开发的脚本语言,具有重要的前端开发和部分后端开发的应用。通过JavaSc…...
初识Qt | 从安装到编写Hello World程序
文章目录 1.前端开发简单分类2.Qt的简单介绍3.Qt的安装和环境配置4.创建简单的Qt项目 1.前端开发简单分类 前端开发,这里是一个广义的概念,不单指网页开发,它的常见分类 网页开发:前端开发的主要领域,使用HTML、CSS …...
机器学习:过拟合和欠拟合的介绍与解决方法
过拟合和欠拟合的表现和解决方法。 其实除了欠拟合和过拟合,还有一种是适度拟合,适度拟合就是我们模型训练想要达到的状态,不过适度拟合这个词平时真的好少见。 过拟合 过拟合的表现 模型在训练集上的表现非常好,但是在测试集…...
变分自编码器(VAE)PyTorch Lightning 实现
✅作者简介:人工智能专业本科在读,喜欢计算机与编程,写博客记录自己的学习历程。 🍎个人主页:小嗷犬的个人主页 🍊个人网站:小嗷犬的技术小站 🥭个人信条:为天地立心&…...
设备驱动开发_1
可加载模块如何工作的 主要内容 描述可加载模块优势使用模块命令效率使用和定义模块密钥和模块工作1 描述可加载模块优势 开发周期优势: 静态模块在/boot下的vmlinuz中,需要配置、编译、重启。 开发周期长。 LKM 不需要重启。 开发周期优于静态模块。 2 使用模块命令效率…...
C语言位域(Bit Fields)知识点精要解析
在C语言中,位域(Bit Field)是一种独特的数据结构特性,它允许程序员在结构体(struct)中定义成员变量,并精确指定其占用的位数。通过使用位域,我们可以更高效地利用存储空间࿰…...
离散数学——图论(笔记及思维导图)
离散数学——图论(笔记及思维导图) 目录 大纲 内容 参考 大纲 内容 参考 笔记来自【电子科大】离散数学 王丽杰...
opencv图像像素的读写操作
void QuickDemo::pixel_visit_demo(Mat & image) {int w image.cols;//宽度int h image.rows;//高度int dims image.channels();//通道数 图像为灰度dims等于一 图像为彩色时dims等于三 for (int row 0; row < h; row) {for (int col 0; col < w; col) {if…...
Java学习第十四节之冒泡排序
冒泡排序 package array;import java.util.Arrays;//冒泡排序 //1.比较数组中,两个相邻的元素,如果第一个数比第二个数大,我们就交换他们的位置 //2.每一次比较,都会产生出一个最大,或者最小的数字 //3.下一轮则可以少…...
第1章 计算机网络体系结构-1.1计算机网络概述
1.1.1计算机网络概念 计算机网络是将一个分散的,具有独立功能的计算机系统通过通信设备与路线连接起来,由功能完善的软件实现资源共享和信息传递的系统。(计算机网络就是一些互连的,自治的计算机系统的集合) 1.1.2计算机网络的组成 从不同角…...
蓝桥杯:C++排序
排序 排序和排列是算法题目常见的基本算法。几乎每次蓝桥杯软件类大赛都有题目会用到排序或排列。常见的排序算法如下。 第(3)种排序算法不是基于比较的,而是对数值按位划分,按照以空间换取时间的思路来排序。看起来它们的复杂度更好,但实际…...
数据结构-堆
1.容器 容器用于容纳元素集合,并对元素集合进行管理和维护. 传统意义上的管理和维护就是:增,删,改,查. 我们分析每种类型容器时,主要分析其增,删,改ÿ…...
奔跑吧小恐龙(Java)
前言 Google浏览器内含了一个小彩蛋当没有网络连接时,浏览器会弹出一个小恐龙,当我们点击它时游戏就会开始进行,大家也可以玩一下试试,网址:恐龙快跑 - 霸王龙游戏. (ur1.fun) 今天我们也可以用Java来简单的实现一下这…...
Ubuntu 1804 And Above Coredump Settings
查看 coredump 是否开启 # 查询, 0 未开启, unlimited 开启 xiaoUbuntu:/var/core$ ulimit -c 0# 开启 xiaoUbuntu:/var/core$ ulimit -c unlimited查看 coredump 保存路径 默认情况下,Ubuntu 使用 apport 服务处理 coredump 文件ÿ…...
docker 2:安装
docker 2:安装 ubuntu 安装 docker sudo apt install docker.io 把当前用户放进 docker 用户组,避免每次运行 docker 命都要使用 sudo 或者 root 权限。 sudo usermod -aG docker $USERid $USER 看到用户已加入 docker 组 …...
LeetCode Python - 19.删除链表的倒数第N个结点
目录 题目答案运行结果 题目 给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点。 示例 1: 输入:head [1,2,3,4,5], n 2 输出:[1,2,3,5] 示例 2: 输入:head [1], n 1 输出&a…...
Spring Boot 笔记 005 环境搭建
1.1 创建数据库和表(略) 2.1 创建Maven工程 2.2 补齐resource文件夹和application.yml文件 2.3 porn.xml中引入web,mybatis,mysql等依赖 2.3.1 引入springboot parent 2.3.2 删除junit 依赖--不能删,删了会报错 2.3.3 引入spring web依赖…...
【解决(几乎)任何机器学习问题】:超参数优化篇(超详细)
这篇文章相当长,您可以添加至收藏夹,以便在后续有空时候悠闲地阅读。 有了优秀的模型,就有了优化超参数以获得最佳得分模型的难题。那么,什么是超参数优化呢?假设您的机器学习项⽬有⼀个简单的流程。有⼀个数据集&…...
面试计算机网络框架八股文十问十答第七期
面试计算机网络框架八股文十问十答第七期 作者:程序员小白条,个人博客 相信看了本文后,对你的面试是有一定帮助的!关注专栏后就能收到持续更新! ⭐点赞⭐收藏⭐不迷路!⭐ 1)UDP协议为什么不可…...
Codeforces Round 926 (Div. 2)
A. Sasha and the Beautiful Array(模拟) 思路 最大值减去最小值 #include<iostream> #include<algorithm> using namespace std; const int N 110; int a[N];int main(){int t, n;cin>>t;while(t--){cin>>n;for(int i 0; i…...
构建智慧交通平台:架构设计与实现
随着城市交通的不断发展和智能化技术的迅速进步,智慧交通平台作为提升城市交通管理效率和水平的重要手段备受关注。本文将探讨如何设计和实现智慧交通平台的系统架构,以应对日益增长的城市交通需求,并提高交通管理的智能化水平。 ### 1. 智慧…...
移动端设置position: fixed;固定定位,底部出现一条缝隙,不知原因,欢迎探讨!!!
1、问题 在父盒子中有一个子盒子,父盒子加了固定定位,需要子盒子上下都有要边距,用margin或者padding挤开时,会出现缝隙是子盒子背景颜色的。 测试过了,有些手机型号有,有些没有,微信小程序同移…...
有关网络安全的课程学习网页
1.思科网络学院 免费学习skillsforall的课程 课程链接:Introduction to Cybersecurity by Cisco: Free Online Course (skillsforall.com) 2.斯坦福大学计算机和网络安全基础 该证书对于初学者来说最有价值,它由最著名的大学之一斯坦福大学提供。您可…...
计算机网络-面试题
一、基础 1、网络编程 网络编程的本质是多台计算机之间的数据交换存在问题 如何准确的定位网络上一台或多台主机如何进行可靠传输2、网络协议 在计算机网络有序的交换数据,就必须遵守一些事先约定好的规则,比如交换数据的格式、是否需要发送一个应答信息。这些规则被称为网络…...
C++虚函数
C虚函数 在C中,虚函数(Virtual Function)是一个使用关键字virtual声明的成员函数,它在基类中被声明,以便在任何派生类中被重写(Override)。使用虚函数的目的是实现多态性——一种允许使用基类指…...
MySQL数据库基础(二):MySQL数据库介绍
文章目录 MySQL数据库介绍 一、MySQL介绍 二、MySQL的特点 三、MySQL版本 四、MySQL数据库下载与安装 1、下载 2、安装 五、添加环境变量(Windows) 六、检测环境变量是否配置成功 MySQL数据库介绍 一、MySQL介绍 MySQL是一个关系型数据库管理…...
常用文件命令
文章目录 文件命令文件内容查看catnlmoreless(more的plus版)headtailod 文件属性操作用户权限常见的权限chownchmodchgrpumask 隐藏属性常见的隐藏属性lsattrchattr 查找文件查看文件类型查找文件位置whichwhereislocatefind 文件操作(复制、…...
在屏蔽任何FRP环境下从零开始搭建安全的FRP内网穿透服务
背景 本人目前在境外某大学读博,校园网屏蔽了所有内网穿透的工具的数据包和IP访问,为了实现在家也能远程访问服务器,就不得不先开个学校VPN,再登陆。我们实验室还需要访问另一个大学的服务器,每次我都要去找另一个大学…...
OpenGL-ES 学习(1)---- AlphaBlend
AlphaBlend OpenGL-ES 混合本质上是将 2 个片元的颜色进行调和(一般是求和操作),产生一个新的颜色 OpenGL ES 混合发生在片元通过各项测试之后,准备进入帧缓冲区的片元和原有的片元按照特定比例加权计算出最终片元的颜色值,不再是新…...
Python 函数的学习笔记
Python 函数的学习笔记 0. Python 函数的概要说明1. 自定义函数示例2. 匿名函数示例3. 内置函数示例3-1. filter() 示例3-2. map() 示例3-3. reduce() 示例 4. 可变长参数*args和**kwargs示例4-1. *args(Positional Variadic Arguments)4-2. **kwargs&am…...
详解 Redis 实现数据去重
✨✨ 欢迎大家来到喔的嘛呀的博客✨✨ 🎈🎈希望这篇博客对大家能有帮助🎈🎈 目录 言 一. Redis去重原理 1. Redis Set 数据结构 2. 基于 Set 实现数据去重 3. 代码示例 4. 总结 …...
FreeRTOS 延迟中断处理
采用二值信号量同步 二值信号量可以在某个特殊的中断发生时,让任务解除阻塞,相当于让任务与中断 同步。这样就可以让中断事件处理量大的工作在同步任务中完成,中断服务例程(ISR) 中只是快速处理少部份工作。如此,中断处理可以说是…...