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

Musical Christmas Lights——一个圣诞树灯光✨随音乐节奏改变的前端开源项目

文章目录

  • 前言
  • 视频介绍
  • 项目截图
  • 项目地址
  • 项目源码
  • 以上就是本篇文章的全部内容,将你编写好的项目分享给你的朋友们或者那个TA吧!制作不易,求个三连!❤️ 💬 ⭐️


前言

       今天博主在刷短视频时😐,朋友推来一条视频😦,看完视频的我发现最近“理工男的小浪漫”又开始蠢蠢欲动了,噢😦!原来是圣诞节快到了🎅,又到了让你的程序员朋友们用代码来为你画圣诞树的时候了。那我们怎么能退缩呢!今天为大家介绍一个在codepen上开源的前端项目,Musical Christmas Lights🎄,英文直译“音乐圣诞灯”。这是一款页面中圣诞树上的灯光会随着音乐的节奏而改变,而且可以选择已有的四首歌曲,同时支持自定义上传歌曲。

在这里插入图片描述


视频介绍

一个codepen上的开源项目musical christmas lights,灯光可随音乐节奏改变


项目截图

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述


项目地址

开源项目地址:https://codepen.io/dilums/pen/MWjEqaa
那么,如果不想下载想直接使用怎么办?好说!
我已将项目部署到我的云服务器中,可以用以下地址访问:(域名还在走备案流程)
点击这里直接使用文章项目


项目源码

       为了方便小伙伴们对源码进行学习以及根据自己需求修改源码,给大家把源码直接放在下方供大家学习:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Musical Christmas Lights</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"><style>* {box-sizing: border-box;}body {margin: 0;height: 100vh;overflow: hidden;display: flex;align-items: center;justify-content: center;background: #161616;color: #c5a880;font-family: sans-serif;}label {display: inline-block;background-color: #161616;padding: 16px;border-radius: 0.3rem;cursor: pointer;margin-top: 1rem;width: 300px;border-radius: 10px;border: 1px solid #c5a880;text-align: center;}ul {list-style-type: none;padding: 0;margin: 0;}.btn {background-color: #161616;border-radius: 10px;color: #c5a880;border: 1px solid #c5a880;padding: 16px;width: 300px;margin-bottom: 16px;line-height: 1.5;cursor: pointer;}.separator {font-weight: bold;text-align: center;width: 300px;margin: 16px 0px;color: #a07676;}.title {color: #a07676;font-weight: bold;font-size: 1.25rem;margin-bottom: 16px;}.text-loading {font-size: 2rem;}</style><script>window.console = window.console || function(t) {};</script><script>if (document.location.search.match(/type=embed/gi)) {window.parent.postMessage("resize", "*");}</script></head><body translate="no"><script src="https://cdn.jsdelivr.net/npm/three@0.115.0/build/three.min.js"></script><script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/EffectComposer.js"></script><script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/RenderPass.js"></script><script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/ShaderPass.js"></script><script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/shaders/CopyShader.js"></script><script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/shaders/LuminosityHighPassShader.js"></script><script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/UnrealBloomPass.js"></script><div id="overlay"><ul><li class="title">请选择音乐</li><li><button class="btn" id="btnA" type="button">Snowflakes Falling Down by Simon Panrucker</button></li><li><button class="btn" id="btnB" type="button">This Christmas by Dott</button></li><li><button class="btn" id="btnC" type="button">No room at the inn by TRG Banks</button></li><li><button class="btn" id="btnD" type="button">Jingle Bell Swing by Mark Smeby</button></li><li class="separator">或者</li><li><input type="file" id="upload" hidden /><label for="upload">Upload File</label></li></ul></div><script id="rendered-js">const {PI,sin,cos} = Math;const TAU = 2 * PI;const map = (value, sMin, sMax, dMin, dMax) => {return dMin + (value - sMin) / (sMax - sMin) * (dMax - dMin);};const range = (n, m = 0) =>Array(n).fill(m).map((i, j) => i + j);const rand = (max, min = 0) => min + Math.random() * (max - min);const randInt = (max, min = 0) => Math.floor(min + Math.random() * (max - min));const randChoise = arr => arr[randInt(arr.length)];const polar = (ang, r = 1) => [r * cos(ang), r * sin(ang)];let scene, camera, renderer, analyser;let step = 0;const uniforms = {time: {type: "f",value: 0.0},step: {type: "f",value: 0.0}};const params = {exposure: 1,bloomStrength: 0.9,bloomThreshold: 0,bloomRadius: 0.5};let composer;const fftSize = 2048;const totalPoints = 4000;const listener = new THREE.AudioListener();const audio = new THREE.Audio(listener);document.querySelector("input").addEventListener("change", uploadAudio, false);const buttons = document.querySelectorAll(".btn");buttons.forEach((button, index) =>button.addEventListener("click", () => loadAudio(index)));function init() {const overlay = document.getElementById("overlay");overlay.remove();scene = new THREE.Scene();renderer = new THREE.WebGLRenderer({antialias: true});renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);camera = new THREE.PerspectiveCamera(60,window.innerWidth / window.innerHeight,1,1000);camera.position.set(-0.09397456774197047, -2.5597086635726947, 24.420789670889008);camera.rotation.set(0.10443543723052419, -0.003827152981119352, 0.0004011488708739715);const format = renderer.capabilities.isWebGL2 ?THREE.RedFormat :THREE.LuminanceFormat;uniforms.tAudioData = {value: new THREE.DataTexture(analyser.data, fftSize / 2, 1, format)};addPlane(scene, uniforms, 3000);addSnow(scene, uniforms);range(10).map(i => {addTree(scene, uniforms, totalPoints, [20, 0, -20 * i]);addTree(scene, uniforms, totalPoints, [-20, 0, -20 * i]);});const renderScene = new THREE.RenderPass(scene, camera);const bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight),1.5,0.4,0.85);bloomPass.threshold = params.bloomThreshold;bloomPass.strength = params.bloomStrength;bloomPass.radius = params.bloomRadius;composer = new THREE.EffectComposer(renderer);composer.addPass(renderScene);composer.addPass(bloomPass);addListners(camera, renderer, composer);animate();}function animate(time) {analyser.getFrequencyData();uniforms.tAudioData.value.needsUpdate = true;step = (step + 1) % 1000;uniforms.time.value = time;uniforms.step.value = step;composer.render();requestAnimationFrame(animate);}function loadAudio(i) {document.getElementById("overlay").innerHTML ='<div class="text-loading">正在下载音乐,请稍等...</div>';const files = ["https://files.freemusicarchive.org/storage-freemusicarchive-org/music/no_curator/Simon_Panrucker/Happy_Christmas_You_Guys/Simon_Panrucker_-_01_-_Snowflakes_Falling_Down.mp3","https://files.freemusicarchive.org/storage-freemusicarchive-org/music/no_curator/Dott/This_Christmas/Dott_-_01_-_This_Christmas.mp3","https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/TRG_Banks/TRG_Banks_Christmas_Album/TRG_Banks_-_12_-_No_room_at_the_inn.mp3","https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/Mark_Smeby/En_attendant_Nol/Mark_Smeby_-_07_-_Jingle_Bell_Swing.mp3"];const file = files[i];const loader = new THREE.AudioLoader();loader.load(file, function(buffer) {audio.setBuffer(buffer);audio.play();analyser = new THREE.AudioAnalyser(audio, fftSize);init();});}function uploadAudio(event) {document.getElementById("overlay").innerHTML ='<div class="text-loading">请稍等...</div>';const files = event.target.files;const reader = new FileReader();reader.onload = function(file) {var arrayBuffer = file.target.result;listener.context.decodeAudioData(arrayBuffer, function(audioBuffer) {audio.setBuffer(audioBuffer);audio.play();analyser = new THREE.AudioAnalyser(audio, fftSize);init();});};reader.readAsArrayBuffer(files[0]);}function addTree(scene, uniforms, totalPoints, treePosition) {const vertexShader = `attribute float mIndex;varying vec3 vColor;varying float opacity;uniform sampler2D tAudioData;float norm(float value, float min, float max ){return (value - min) / (max - min);}float lerp(float norm, float min, float max){return (max - min) * norm + min;}float map(float value, float sourceMin, float sourceMax, float destMin, float destMax){return lerp(norm(value, sourceMin, sourceMax), destMin, destMax);}void main() {vColor = color;vec3 p = position;vec4 mvPosition = modelViewMatrix * vec4( p, 1.0 );float amplitude = texture2D( tAudioData, vec2( mIndex, 0.1 ) ).r;float amplitudeClamped = clamp(amplitude-0.4,0.0, 0.6 );float sizeMapped = map(amplitudeClamped, 0.0, 0.6, 1.0, 20.0);opacity = map(mvPosition.z , -200.0, 15.0, 0.0, 1.0);gl_PointSize = sizeMapped * ( 100.0 / -mvPosition.z );gl_Position = projectionMatrix * mvPosition;}`;const fragmentShader = `varying vec3 vColor;varying float opacity;uniform sampler2D pointTexture;void main() {gl_FragColor = vec4( vColor, opacity );gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord ); }`;const shaderMaterial = new THREE.ShaderMaterial({uniforms: {...uniforms,pointTexture: {value: new THREE.TextureLoader().load(`https://assets.codepen.io/3685267/spark1.png`)}},vertexShader,fragmentShader,blending: THREE.AdditiveBlending,depthTest: false,transparent: true,vertexColors: true});const geometry = new THREE.BufferGeometry();const positions = [];const colors = [];const sizes = [];const phases = [];const mIndexs = [];const color = new THREE.Color();for (let i = 0; i < totalPoints; i++) {const t = Math.random();const y = map(t, 0, 1, -8, 10);const ang = map(t, 0, 1, 0, 6 * TAU) + TAU / 2 * (i % 2);const [z, x] = polar(ang, map(t, 0, 1, 5, 0));const modifier = map(t, 0, 1, 1, 0);positions.push(x + rand(-0.3 * modifier, 0.3 * modifier));positions.push(y + rand(-0.3 * modifier, 0.3 * modifier));positions.push(z + rand(-0.3 * modifier, 0.3 * modifier));color.setHSL(map(i, 0, totalPoints, 1.0, 0.0), 1.0, 0.5);colors.push(color.r, color.g, color.b);phases.push(rand(1000));sizes.push(1);const mIndex = map(i, 0, totalPoints, 1.0, 0.0);mIndexs.push(mIndex);}geometry.setAttribute("position",new THREE.Float32BufferAttribute(positions, 3).setUsage(THREE.DynamicDrawUsage));geometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));geometry.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1));geometry.setAttribute("phase", new THREE.Float32BufferAttribute(phases, 1));geometry.setAttribute("mIndex", new THREE.Float32BufferAttribute(mIndexs, 1));const tree = new THREE.Points(geometry, shaderMaterial);const [px, py, pz] = treePosition;tree.position.x = px;tree.position.y = py;tree.position.z = pz;scene.add(tree);}function addSnow(scene, uniforms) {const vertexShader = `attribute float size;attribute float phase;attribute float phaseSecondary;varying vec3 vColor;varying float opacity;uniform float time;uniform float step;float norm(float value, float min, float max ){return (value - min) / (max - min);}float lerp(float norm, float min, float max){return (max - min) * norm + min;}float map(float value, float sourceMin, float sourceMax, float destMin, float destMax){return lerp(norm(value, sourceMin, sourceMax), destMin, destMax);}void main() {float t = time* 0.0006;vColor = color;vec3 p = position;p.y = map(mod(phase+step, 1000.0), 0.0, 1000.0, 25.0, -8.0);p.x += sin(t+phase);p.z += sin(t+phaseSecondary);opacity = map(p.z, -150.0, 15.0, 0.0, 1.0);vec4 mvPosition = modelViewMatrix * vec4( p, 1.0 );gl_PointSize = size * ( 100.0 / -mvPosition.z );gl_Position = projectionMatrix * mvPosition;}`;const fragmentShader = `uniform sampler2D pointTexture;varying vec3 vColor;varying float opacity;void main() {gl_FragColor = vec4( vColor, opacity );gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord ); }`;function createSnowSet(sprite) {const totalPoints = 300;const shaderMaterial = new THREE.ShaderMaterial({uniforms: {...uniforms,pointTexture: {value: new THREE.TextureLoader().load(sprite)}},vertexShader,fragmentShader,blending: THREE.AdditiveBlending,depthTest: false,transparent: true,vertexColors: true});const geometry = new THREE.BufferGeometry();const positions = [];const colors = [];const sizes = [];const phases = [];const phaseSecondaries = [];const color = new THREE.Color();for (let i = 0; i < totalPoints; i++) {const [x, y, z] = [rand(25, -25), 0, rand(15, -150)];positions.push(x);positions.push(y);positions.push(z);color.set(randChoise(["#f1d4d4", "#f1f6f9", "#eeeeee", "#f1f1e8"]));colors.push(color.r, color.g, color.b);phases.push(rand(1000));phaseSecondaries.push(rand(1000));sizes.push(rand(4, 2));}geometry.setAttribute("position",new THREE.Float32BufferAttribute(positions, 3));geometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));geometry.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1));geometry.setAttribute("phase", new THREE.Float32BufferAttribute(phases, 1));geometry.setAttribute("phaseSecondary",new THREE.Float32BufferAttribute(phaseSecondaries, 1));const mesh = new THREE.Points(geometry, shaderMaterial);scene.add(mesh);}const sprites = ["https://assets.codepen.io/3685267/snowflake1.png","https://assets.codepen.io/3685267/snowflake2.png","https://assets.codepen.io/3685267/snowflake3.png","https://assets.codepen.io/3685267/snowflake4.png","https://assets.codepen.io/3685267/snowflake5.png"];sprites.forEach(sprite => {createSnowSet(sprite);});}function addPlane(scene, uniforms, totalPoints) {const vertexShader = `attribute float size;attribute vec3 customColor;varying vec3 vColor;void main() {vColor = customColor;vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );gl_PointSize = size * ( 300.0 / -mvPosition.z );gl_Position = projectionMatrix * mvPosition;}`;const fragmentShader = `uniform vec3 color;uniform sampler2D pointTexture;varying vec3 vColor;void main() {gl_FragColor = vec4( vColor, 1.0 );gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );}`;const shaderMaterial = new THREE.ShaderMaterial({uniforms: {...uniforms,pointTexture: {value: new THREE.TextureLoader().load(`https://assets.codepen.io/3685267/spark1.png`)}},vertexShader,fragmentShader,blending: THREE.AdditiveBlending,depthTest: false,transparent: true,vertexColors: true});const geometry = new THREE.BufferGeometry();const positions = [];const colors = [];const sizes = [];const color = new THREE.Color();for (let i = 0; i < totalPoints; i++) {const [x, y, z] = [rand(-25, 25), 0, rand(-150, 15)];positions.push(x);positions.push(y);positions.push(z);color.set(randChoise(["#93abd3", "#f2f4c0", "#9ddfd3"]));colors.push(color.r, color.g, color.b);sizes.push(1);}geometry.setAttribute("position",new THREE.Float32BufferAttribute(positions, 3).setUsage(THREE.DynamicDrawUsage));geometry.setAttribute("customColor",new THREE.Float32BufferAttribute(colors, 3));geometry.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1));const plane = new THREE.Points(geometry, shaderMaterial);plane.position.y = -8;scene.add(plane);}function addListners(camera, renderer, composer) {document.addEventListener("keydown", e => {const {x,y,z} = camera.position;console.log(`camera.position.set(${x},${y},${z})`);const {x: a,y: b,z: c} = camera.rotation;console.log(`camera.rotation.set(${a},${b},${c})`);});window.addEventListener("resize",() => {const width = window.innerWidth;const height = window.innerHeight;camera.aspect = width / height;camera.updateProjectionMatrix();renderer.setSize(width, height);composer.setSize(width, height);},false);}</script></body></html>

以上就是本篇文章的全部内容,将你编写好的项目分享给你的朋友们或者那个TA吧!制作不易,求个三连!❤️ 💬 ⭐️

相关文章:

Musical Christmas Lights——一个圣诞树灯光✨随音乐节奏改变的前端开源项目

文章目录前言视频介绍项目截图项目地址项目源码以上就是本篇文章的全部内容&#xff0c;将你编写好的项目分享给你的朋友们或者那个TA吧&#xff01;制作不易&#xff0c;求个三连&#xff01;❤️ &#x1f4ac; ⭐️前言 今天博主在刷短视频时&#x1f610;&#xff0c;朋友推…...

[附源码]Python计算机毕业设计SSM进出口食品安全信息管理系统(程序+LW)

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…...

电平触发的触发器

普通的SR锁存器没有任何抗干扰能力 我们要加控制信号&#xff0c;来抵抗干扰 比如说我们不把信号直接加在门上&#xff0c;我们可以再加一级门电路&#xff0c;让这个输出和输入不在同一个门上&#xff0c;我们希望加入一个控制信号&#xff0c;来控制电路工作的时刻 对电路结…...

php后端+JQuery+Ajax简单表单提交

通过ajax,如果从后端直接想前端返回数组,那前端收到的是一个‘Array’的字符串。所以,我比较习惯的是用json对象的格式。由后端通过json_encode()函数,把数组封装成对象,传递到前端;前端也以json的格式接收。这里用提交表单来举例说明。 页面显示如下: JQueryAjax.…...

论文投稿指南——中文核心期刊推荐(计算机技术2)

>>>深度学习Tricks&#xff0c;第一时间送达<<< 想发论文怎么办&#xff1f;手把手教你论文如何投稿&#xff01;那么&#xff0c;首先要搞懂投稿目标——论文期刊。下面&#xff0c;简单介绍下什么是中文核心期刊要目总览&#xff1a; 《中文核心期刊要目总…...

集合java

java集合 集合、数组都是对多个数据进行存储操作的结构&#xff0c;简称Java容器 此时的存储&#xff0c;主要是指内存层面的存储&#xff0c;不涉及持久化的存储&#xff08;txt,jpg,avi&#xff09; Java集合可分为Collection 和 Map 两种体系 1. Collection接口&#xff1…...

spring boot 应用mybatis

Mybatis入门: Mybatis入门_做测试的喵酱的博客-CSDN博客 目录 一、spring boot 应用mybatis 核心 二、举例&#xff1a; 2.1 背景 2.2 项目结构&#xff1a; 2.3 依赖包 pom 2.4 项目配置文件application.yml 2.5 实例层entity 2.6 mybatis的mapper层 2.7 spring boot…...

Java项目:ssm图书馆管理系统

作者主页&#xff1a;源码空间站2022 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文末获取源码 功能介绍 基于ssm的图书馆管理系统.主要功能包括&#xff1a;图书查询、图书管理、图书编辑、读者管理、图书的借阅与归还以及借还日志记录等。 用户分为…...

详解设计模式:命令模式

命令模式&#xff08;Command Pattern&#xff09;也被称为行动模式&#xff08;Action Pattern&#xff09;、事物模式&#xff08;Transaction Pattern&#xff09;&#xff0c;是在 GoF 23 种设计模式中定义了的行为型模式。 命令模式 是一种数据驱动的设计模式。请求以命令…...

家庭用户无线上网案例(AC通过三层口对AP进行管理)

组网需求 为一个家庭用户使用的网络架构。该家庭消费用户的上网流量大多是低速流量&#xff0c;例如浏览网页、玩游戏、看视频等。家庭成员使用的无线终端主要为手机、PC、电视机等。终端接入的数量正常情况下在10个以内&#xff0c;偶尔有家庭聚会等特殊情况&#xff0c;终端接…...

Spring Boot 2 (七):Spring Boot 如何解决项目启动时初始化资源

在我们实际工作中,总会遇到这样需求,在项目启动的时候需要做一些初始化的操作,比如初始化线程池,提前加载好加密证书等。今天就给大家介绍一个 Spring Boot 神器,专门帮助大家解决项目启动初始化资源操作。 这个神器就是 CommandLineRunner,CommandLineRunner 接口的 Co…...

用Hopper修改代理软件端口

背景 用代理软件可以访问google&#xff0c;但是端口经常不固定&#xff0c;从缺省1080变成了随机。 前几天其实已经用Hopper 3.0看了一次&#xff0c;但是好像不支持go&#xff0c;所以没反编译成功&#xff0c;这次换了4.0&#xff0c;支持了go。 Hopper与逆向 逆向的目的…...

PKI等介绍

PKI 1、概述 KPI名称&#xff1a;Public Key Infrastructure 公钥基础设施 KPI作用&#xff1a;通过加密技术和数字签名保证信息的安全 KPI组成&#xff1a;公钥加密技术、数字证书、CA、RA 2、信息安全三要素 机密型、完整型、身份验证、操作的不可否认性 3、哪些领域…...

《模拟电子技术》半导体原理部分笔记

《模拟电子技术》笔记绪论第一章 常用半导体器件第二章 基本放大电路绪论 有的人把三极管的出现作为电子技术工业革命的开始标志学习架构&#xff1a;半导体器件&#xff08;二极管、三极管、场效应晶体管&#xff09;、基于上述管的放大电路、集成运算放大器、放大电路的频率…...

Python与MySQL交互

第四章 Python与MySQL交互 1、客户端库概述及安装 PyMySQL介绍 PyMySQL是在 Python3.x 版本中用于连接 MySQL 服务器的一个客户端库。 PyMySQL安装&#xff1a; pip install pymysql执行过程如下图&#xff1a; [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来…...

list的模拟实现(万字解读+由浅入深)

先申明一下本篇总体介绍过程是按照逐步深入去写的&#xff0c;所以可能有些同样类型不在一块&#xff01; 前言&#xff1a; 写这篇博客的时候&#xff0c;我是边思考边写它&#xff01;自己其中感觉自己对于list的理解更加的深入&#xff0c;其中提出的很多问题让我明白了lis…...

Java项目:SSM CRM人事管理系统

作者主页&#xff1a;源码空间站2022 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文末获取源码 项目介绍 CRM人事管理系统&#xff0c;主要功能有&#xff1a; 用户管理&#xff1a;用户查询、添加用户、编辑、删除&#xff1b; 职位管理&#xff1a…...

Qt+opencv 鼠标画线实现几何图形识别并动态创建

前言 使用Qt OpenCV实现&#xff0c;通过鼠标画线绘制几何图形&#xff0c;然后通过opencv进行图形轮廓识别&#xff0c;返回图形顶点&#xff0c;然后创建对应的几何图形添加到场景中。绘制使用QGraphics体系完成。 看效果图&#xff1a; 本文demo在这里 点击下载 环境: …...

HTML5期末大作业——HTML+CSS+JavaScript平遥古城旅游景点介绍(6页)

&#x1f468;‍&#x1f393;学生HTML静态网页基础水平制作&#x1f469;‍&#x1f393;&#xff0c;页面排版干净简洁。使用HTMLCSS页面布局设计,web大学生网页设计作业源码&#xff0c;这是一个不错的旅游网页制作&#xff0c;画面精明&#xff0c;排版整洁&#xff0c;内容…...

HTML5期末考核大作业 基于HTML+CSS+JavaScript沪上美食(9页)

&#x1f380; 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业…...

Reg注册表读写

在Windows 95及其后继版本中&#xff0c;采用了一种叫做“注册表”的数据库来统一进行管理&#xff0c;将各种信息资源集中起来并存储各种配置信息。按照这一原则&#xff0c;Windows各版本中都采用了将应用程序和计算机系统全部配置信息容纳在一起的注册表&#xff0c;用来管理…...

HTML入门零基础教程(五)

嗨&#xff0c;大家好&#xff0c;我是异星球的小怪同志 一个想法有点乱七八糟的小怪 如果觉得对你有帮助&#xff0c;请支持一波。 希望未来可以一起学习交流。 目录 一、图像标签 1.图像标签 2.图标标签的其它属性 3.图像标签属性注意点&#xff1a; 一、图像标签 1.…...

java通过lock实现同步锁

这里我们是一个卖票的演示代码 其实 同步锁 远不止一个synchronized 它本身有一个 加上锁 和释放锁的过程 为了 让我们更好的理解这个过程 JDK5之后 为我们提供了一个单独的锁工具 lock lock是一个接口 他提供了 synchronized 方法 和 更广泛的语句操作 lock方法 获得锁 unl…...

Java多线程同步工具类:Semaphore原理剖析

Java多线程同步工具类&#xff1a;Semaphore原理剖析 文章目录Java多线程同步工具类&#xff1a;Semaphore原理剖析Semaphore原理实战案例前驱知识准备&#xff1a;AbstractQueuedSynchronizer队列同步器 [Java多线程之&#xff1a;队列同步器AbstractQueuedSynchronizer原理剖…...

C++之面向对象

目录 对象与类 类的语法&#xff1a; C中class与struct的区别&#xff1a; 通过类实例化对象的方式 具体案例 类作用域与分文件编写 创建circle.h头文件 创建源文件circle.cpp 创建all.cpp来作为程序的入口 封装 封装的意义 访问权限符 成员属性私有化 优点 具体…...

Windows-》CMD命令

CMD命令【1】Windows-》CMD命令1.mstsc&#xff1a;打开远程桌面连接。2.services.msc&#xff1a;打开本地服务设置。3.notepad&#xff1a;打开记事本。4.control&#xff1a;打开控制面板。5.regedit&#xff1a;打开注册列表编辑器。6.compmgmt.msc---设备管理器。&#xf…...

秒级使网站变灰,不改代码不上线,如何做到?

注意&#xff1a;文本不是讲如何将网站置灰的那个技术点&#xff0c;那个技术点之前汶川地震的时候说过。 本文不讲如何实现技术&#xff0c;而是讲如何在第一时间知道消息后&#xff0c;更快速的实现这个置灰需求的上线。 实现需求不是乐趣&#xff0c;指挥别人去实现需求才…...

vue教程

vue window本地保存Local Storage 保存&#xff1a;window.localStorage.setItem(名,值); window.localStorage.setItem(token,backdata.data[2]); 查询&#xff1a;window.localStorage.getItem(名); window.localStorage.getItem(token); 删除&#xff1a;window.localStor…...

认识哈希表

作者&#xff1a;~小明学编程 文章专栏&#xff1a;Java数据结构 格言&#xff1a;目之所及皆为回忆&#xff0c;心之所想皆为过往 目录 为什么我们需要哈希表&#xff1f; 哈希表的原理 什么是哈希值 冲突 负载因子 解决冲突 闭散列 开散列/哈希桶 代码实现 不考虑…...

Vue学习:Hello小案例

使用Vue的目的&#xff1a;构建用户界面&#xff08;需要使用容器 摆放这个界面的内容&#xff09; favicon.ico:1 GET http://127.0.0.1:5500/favicon.ico 404 (Not Found) 没有页签图标 在者服务器中 http://127.0.0.1:5500没有/favicon.ico 强制刷新网页&#xff1a;s…...

IDEA创建Java Web项目

✅作者简介&#xff1a;热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏&#xff1a;JAVA开发者…...

C++11中可变参数模板使用

在看同事编写的代码&#xff0c;发现有如下的代码&#xff0c;因为没用过&#xff0c;所以查了一下这是什么语法&#xff0c;通过查询资料知道了这是C11中增加的可变参数模板。 template<class T, class ...Args> bool GetValue(T &value, Args &&...args) c…...

MySQL 中的 sql_mode 选项以及配置

MySQL 中的 sql_mode 选项以及配置 目录MySQL 中的 sql_mode 选项以及配置一、查询与设置 sql_mode1、查询 sql_mode2、设置 sql_mode&#xff08;1&#xff09;通过命令设置&#xff08;2&#xff09;在配置文件中设置二、sql_mode 支持的模式1、ANSI 模式&#xff08;宽松模式…...

【C语言航路】第六站:指针初阶

目录 一、指针是什么 二、指针和指针类型 1.指针类型的意义 2.指针-整数 3.指针解引用 三、野指针 1.野指针的成因 &#xff08;1&#xff09;指针未初始化 &#xff08;2&#xff09;指针越界访问 &#xff08;3&#xff09;指针指向的空间释放 2.如何规避野指针 &a…...

从 JPA 2.x 迁移到 3.0

我最近收到了很多关于JPA 3.0的问题&#xff0c;由于EclipseLink和Hibernate现在提供了对它的全面支持&#xff0c;现在是时候仔细看看规范的最新更新了。作为从Java EE到Jakarta EE转换的一部分&#xff0c;Java Persistence API&#xff08;JPA&#xff09;更名为Jakarta Per…...

Allegro如何锁定器件操作指导

Allegro如何锁定器件操作指导 Allegro上可以锁定器件,避免误操作被移动,具体操作如下 选择fix命令 Find选择Symbols 框选需要锁定的器件 可以看到器件被锁住了 除了这个方法之外,还有另外一种方法锁定器件,选择edit-property Find选择Symbols...

第三章:SpringBoot的配置文件-核心技术

目录 1、文件类型 1.1、properties 1.2、yaml 1.2.1、简介 1.2.2、基本语法 1.2.3、数据类型 1.2.4、示例 2、配置提示 1、文件类型 1.1、properties 同以前的properties用法 1.2、yaml 1.2.1、简介 YAML 是 "YAML Aint Markup Language"&#xff08;YA…...

Vue中的计算属性

计算属性&#xff1a;实际上是把vm中的属性进行计算加工&#xff0c;最后能够返回给页面一个结果&#xff0c;它是实时的&#xff0c;所以不能做异步操作。 细想一下&#xff0c;其实methods方法也能实现1中描述的现象&#xff0c;但是计算属性最大的优势是缓存&#xff01;&a…...

HTML+CSS个人电影网页设计——电影从你的全世界路过(4页)带音乐特效

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置&#xff0c;有div的样式格局&#xff0c;这个实例比较全面&#xff0c;有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 文章目录一、网页介绍一…...

业务开发时,接口不能对外暴露的解决方案

1.内外网接口微服务隔离 将对外暴露的接口和对内暴露的接口分别放到两个微服务上,一个服务里所有的接口均对外暴露,另一个服务的接口只能内网服务间调用。 该方案需要额外编写一个只对内部暴露接口的微服务,将所有只能对内暴露的业务接口聚合到这个微服务里,通过这个聚合…...

「点燃我,温暖你」用Python制作一个动态爱心效果

最近「点燃我&#xff0c;温暖你」这部剧非常火&#xff0c;讲述的是程序员的爱情故事。 其中陈飞宇饰演的男主李峋&#xff0c;在剧中用程序做出的爱心跳动效果&#xff0c;非常炫。 网上各个大佬也是纷纷给出看法&#xff0c;综合就是不太可能用C语言来实现的。 大概率是AE…...

初识猿如意开发工具

嗨&#xff0c;大家好&#xff0c;我是异星球的小怪同志 一个想法有点乱七八糟的小怪 如果觉得对你有帮助&#xff0c;请支持一波。 希望未来可以一起学习交流。 一、初遇猿如意 第一次听说猿如意开发工具&#xff0c;于是抱着试试的心态&#xff0c;开始下载尝试。 首先是…...

PyTorch 2.0发布了,一行代码提速76%

PyTorch 官方&#xff1a;我们这次的新特性太好用了&#xff0c;所以就直接叫 2.0 了。 前段时间&#xff0c;PyTorch 团队在官方博客宣布 Pytorch 1.13 发布&#xff0c;包含 BetterTransformer 稳定版等多项更新。在体验新特性的同时&#xff0c;不少人也在期待下一个版本的推…...

栈的基本操作

一&#xff0c;自定义函数 #include<bits/stdc.h> using namespace std; const int N 1000;//N是常量 int s[N 1];//栈 int top;//栈顶的位置(栈内有多少个元素) //入栈 void push(int x){ //非满栈 if(top < N){ //将栈顶上移并存入 top…...

windows内核编程-文件操作

文章目录前言背景知识点介绍字符串内存分配与回收文件操作自旋锁win内核编程-日志实现文件操作的封装日志功能的实现简单的测试日志功能其他前言 本文完整代码见&#xff1a;demo/12-win-driver-log 我们必须先搞定&#xff0c;DebugView可以看到DbgPrintDbgPrint的输出。否则…...

Hadoop原理与技术——Linus命令行基本操作

点击链接查看文档 一、实验目的 Hadoop运行在Linux系统上&#xff0c;因此&#xff0c;需要学习实践一些常用的Linux命令。本实验旨在熟悉常用的Linux操作&#xff0c;为顺利开展后续其他实验奠定基础。 二、实验环境 Windows 10 VMware Workstation Pro虚拟机 Hadoop环境 J…...

目标检测算法——YOLOv5/YOLOv7改进之结合特征提取网络RFBNet(涨点明显)

>>>深度学习Tricks,第一时间送达<<< 🚀🚀🚀NEW!!!魔改YOLOv5/v7目标检测算法来啦 ~ 计算机视觉——致力于目标检测领域科研Tricks改进与推荐 | 主要包括Backbone、Neck、Head、普通注意力机制、自注意力机制Transformer、Swin Transformer v2,各…...

anaconda使用系列教程--4)环境迁移

概述 跨平台尽量避免&#xff0c;比如windows和linux就不要跨平台&#xff0c;就在linux之间跨还是可以的 直接copy整体环境文件&#xff0c;适合于无法联网或网速不佳的新环境 anaconda最好是同版本的 迁移方法 使用requirement文件 A机器&#xff1a; pip freeze > …...

Kotlin高仿微信-第57篇-VIP管理列表

Kotlin高仿微信-项目实践58篇详细讲解了各个功能点&#xff0c;包括&#xff1a;注册、登录、主页、单聊(文本、表情、语音、图片、小视频、视频通话、语音通话、红包、转账)、群聊、个人信息、朋友圈、支付服务、扫一扫、搜索好友、添加好友、开通VIP等众多功能。 Kotlin高仿…...

贪心算法-- 纪念品分组

问题描述元旦快到了&#xff0c;校学生会让乐乐负责新年晚会的纪念品发放工作。为使得参加晚会的同学所获得的纪念品价值 相对均衡&#xff0c;他要把购来的纪念品根据价格进行分组&#xff0c;但每组最多只能包括两件纪念品&#xff0c;并且每组纪念品的价格之和不能超过一个给…...

2种动力配置,标配48英寸大屏,全新雷克萨斯LM马来西亚上市

近日,从海外媒体报道获悉,雷克萨斯正式宣布在马来西亚市场上市全新雷克萨斯LM。据悉,新车推出LM350h 和LM500h两款车型,售价分别为1,228,000 马来西亚林吉特 与1,468,000 马来西亚林吉特 (折合人民币约226.80万元)。外观上,全新雷克萨斯LM依旧承袭雷克萨斯最新一代家族设计…...

六一,乳山五村迎来一群小记者……

6月1日,“儿童友好、生物友好——乳山五村大自然保护植物与艺术体验”活动在上海的乳山五村举行。现场,在上房园林植物研究所专家和青年艺术家的带领下,《少年日报》小记者团60余位小记者和乳山五村等小区少儿朋友观察了原生植物,并参与墙绘活动。当天,上房园林植物研究所…...

豪华中大型SUV,全系2.0T+8AT,25.58万起

作为豪华中大型SUV,红旗HS7从上市以来始终没有一个太好的市场表现,相对市场表现比较低迷,不过这并不意味着红旗HS7不值得买,尤其是近期红旗HS7的优惠力度也比较大。根据我们了解,目前在售的红旗HS7指导售价区间为25.58-33.58万元,现金优惠2万元后的售价为23.58-31.58万元…...

《中国人大》2024年第9期目录

制图:李洪兴编校:宫宜希责编:张钰钗...

笔记90:C++中sort函数的使用

函数原型&#xff1a;sort ( iterator beg , iterator end , _Pred ) a a 参数介绍&#xff1a; beg&#xff1a;起始迭代器end&#xff1a;终止迭代器Pred&#xff1a;谓词&#xff08;如果不给&#xff0c;默认使用 less<int>() 作为谓词&#xff0c;排序方式为从小到大…...

用户接入和认证技术

一、用户接入和认证配置 称为网络接入控制&#xff0c;通过对接入网络的客NAC (Network Admission Control)户端和用户的认证保证网络的安全&#xff0c;是一种“端到端”的安全技术。包括802.1x认证、MAC认证与Portal认证。 二、三种认证方式简介 1、Portal认证 Portal认证通…...