html5+css3实现傅里叶变换的动态展示效果(仅供参考)
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>傅里叶变换的动态展示效果</title><style>body {font-family: 'Microsoft YaHei', Arial, sans-serif;margin: 0;padding: 0;background: #f8f9fa;color: #333;}.container {max-width: 1200px;margin: 0 auto;padding: 20px;}h1 {text-align: center;color: #2c3e50;margin-bottom: 30px;}.controls {display: flex;flex-wrap: wrap;gap: 20px;justify-content: center;margin-bottom: 30px;background: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}.control-group {display: flex;flex-direction: column;min-width: 200px;}label {margin-bottom: 5px;font-weight: bold;}input[type="range"], select {width: 100%;padding: 8px;border: 1px solid #ddd;border-radius: 4px;}button {background: #3498db;color: white;border: none;padding: 10px 20px;border-radius: 4px;cursor: pointer;font-size: 16px;transition: background-color 0.3s;}button:hover {background: #2980b9;}.visualization {display: flex;flex-wrap: wrap;gap: 20px;justify-content: center;}.canvas-container {background: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);flex: 1;min-width: 300px;}canvas {width: 100%;height: 300px;background: #f1f1f1;border-radius: 4px;}.explanation {margin-top: 30px;background: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}.formula {font-family: 'Cambria Math', serif;text-align: center;margin: 20px 0;font-size: 18px;}.loading {display: none;text-align: center;margin: 20px 0;}.loading img {width: 50px;height: 50px;}@media (max-width: 768px) {.canvas-container {min-width: 100%;}}</style>
</head>
<body><div class="container"><h1>傅里叶变换的动态展示效果</h1><div class="controls"><div class="control-group"><label for="waveType">波形类型</label><select id="waveType"><option value="sine">正弦波</option><option value="square">方波</option><option value="sawtooth">锯齿波</option><option value="triangle">三角波</option><option value="custom">自定义波形</option></select></div><div class="control-group"><label for="frequency">频率 (Hz)</label><input type="range" id="frequency" min="1" max="20" value="5" step="1"><span id="frequencyValue">5 Hz</span></div><div class="control-group"><label for="amplitude">振幅</label><input type="range" id="amplitude" min="0.1" max="1" value="0.5" step="0.1"><span id="amplitudeValue">0.5</span></div><div class="control-group"><label for="harmonics">谐波数量</label><input type="range" id="harmonics" min="1" max="20" value="5" step="1"><span id="harmonicsValue">5</span></div><button id="updateBtn">更新波形</button><button id="computeBtn">计算傅里叶变换</button></div><div class="loading" id="loading"><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMzgiIHZpZXdCb3g9IjAgMCAzOCAzOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiMzNDk4ZGIiPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxIDEpIiBzdHJva2Utd2lkdGg9IjIiPgogICAgICAgICAgICA8Y2lyY2xlIHN0cm9rZS1vcGFjaXR5PSIuNSIgY3g9IjE4IiBjeT0iMTgiIHI9IjE4Ii8+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNiAxOGMwLTkuOTQtOC4wNi0xOC0xOC0xOCI+CiAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybQogICAgICAgICAgICAgICAgICAgIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIKICAgICAgICAgICAgICAgICAgICB0eXBlPSJyb3RhdGUiCiAgICAgICAgICAgICAgICAgICAgZnJvbT0iMCAxOCAxOCIKICAgICAgICAgICAgICAgICAgICB0bz0iMzYwIDE4IDE4IgogICAgICAgICAgICAgICAgICAgIGR1cj0iMXMiCiAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICAgICAgICAgICAgPC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" alt="加载中..."><p>计算中...</p></div><div class="visualization"><div class="canvas-container"><h3>原始波形</h3><canvas id="originalWave"></canvas></div><div class="canvas-container"><h3>傅里叶变换频谱</h3><canvas id="fourierSpectrum"></canvas></div></div><div class="visualization"><div class="canvas-container"><h3>傅里叶级数合成波形</h3><canvas id="synthesizedWave"></canvas></div><div class="canvas-container"><h3>相位谱</h3><canvas id="phaseSpectrum"></canvas></div></div><div class="explanation"><h2>傅里叶变换原理</h2><p>傅里叶变换是一种将时域信号转换为频域表示的数学工具。它可以将任何周期性的函数分解为简单正弦波的叠加。</p><div class="formula"><p>离散傅里叶变换 (DFT)：</p><p>X(k) = Σ[n=0 to N-1] x(n) · e<sup>-j2πkn/N</sup></p><p>傅里叶级数：</p><p>f(t) = a<sub>0</sub>/2 + Σ[n=1 to ∞] [a<sub>n</sub>cos(nωt) + b<sub>n</sub>sin(nωt)]</p></div><p>在这个演示中，您可以通过控制面板选择不同的波形，并观察其傅里叶变换结果。傅里叶变换让我们能够看到波形中包含的各种频率成分及其振幅和相位。</p></div></div><script>// DOM 元素const waveTypeSelect = document.getElementById('waveType');const frequencySlider = document.getElementById('frequency');const frequencyValue = document.getElementById('frequencyValue');const amplitudeSlider = document.getElementById('amplitude');const amplitudeValue = document.getElementById('amplitudeValue');const harmonicsSlider = document.getElementById('harmonics');const harmonicsValue = document.getElementById('harmonicsValue');const updateBtn = document.getElementById('updateBtn');const computeBtn = document.getElementById('computeBtn');const loading = document.getElementById('loading');const originalCanvas = document.getElementById('originalWave');const fourierCanvas = document.getElementById('fourierSpectrum');const synthesizedCanvas = document.getElementById('synthesizedWave');const phaseCanvas = document.getElementById('phaseSpectrum');// 设置画布大小function setupCanvas(canvas) {canvas.width = canvas.offsetWidth;canvas.height = canvas.offsetHeight;return canvas.getContext('2d');}const originalCtx = setupCanvas(originalCanvas);const fourierCtx = setupCanvas(fourierCanvas);const synthesizedCtx = setupCanvas(synthesizedCanvas);const phaseCtx = setupCanvas(phaseCanvas);// 更新UI显示值frequencySlider.addEventListener('input', () => {frequencyValue.textContent = `${frequencySlider.value} Hz`;});amplitudeSlider.addEventListener('input', () => {amplitudeValue.textContent = amplitudeSlider.value;});harmonicsSlider.addEventListener('input', () => {harmonicsValue.textContent = harmonicsSlider.value;});// 窗口调整大小时重新设置画布window.addEventListener('resize', () => {setupCanvas(originalCanvas);setupCanvas(fourierCanvas);setupCanvas(synthesizedCanvas);setupCanvas(phaseCanvas);drawWave();});// 生成不同类型的波形数据function generateWaveData(type, frequency, amplitude, sampleCount) {const data = new Array(sampleCount);const period = sampleCount / frequency;for (let i = 0; i < sampleCount; i++) {const t = i / sampleCount;const x = 2 * Math.PI * frequency * t;switch (type) {case 'sine':data[i] = amplitude * Math.sin(x);break;case 'square':data[i] = amplitude * (Math.sin(x) >= 0 ? 1 : -1);break;case 'sawtooth':data[i] = amplitude * (2 * (x / (2 * Math.PI) - Math.floor(0.5 + x / (2 * Math.PI))));break;case 'triangle':data[i] = amplitude * (2 * Math.abs(2 * (x / (2 * Math.PI) - Math.floor(0.5 + x / (2 * Math.PI)))) - 1);break;case 'custom':// 自定义波形：基本正弦波加上一些谐波data[i] = amplitude * (Math.sin(x) + 0.5 * Math.sin(3 * x) + 0.3 * Math.sin(5 * x)) / 1.8; // 归一化break;default:data[i] = amplitude * Math.sin(x);}}return data;}// 绘制波形function drawWaveform(ctx, data, color = '#3498db') {const width = ctx.canvas.width;const height = ctx.canvas.height;ctx.clearRect(0, 0, width, height);ctx.beginPath();ctx.strokeStyle = color;ctx.lineWidth = 2;const stepSize = width / (data.length - 1);const centerY = height / 2;const scale = height / 2 * 0.9;for (let i = 0; i < data.length; i++) {const x = i * stepSize;const y = centerY - data[i] * scale;if (i === 0) ctx.moveTo(x, y);else ctx.lineTo(x, y);}ctx.stroke();// 绘制x轴和y轴ctx.beginPath();ctx.strokeStyle = '#aaa';ctx.lineWidth = 1;ctx.moveTo(0, centerY);ctx.lineTo(width, centerY);ctx.stroke();}// 绘制频谱function drawSpectrum(ctx, magnitudes, maxFreq = 20) {const width = ctx.canvas.width;const height = ctx.canvas.height;ctx.clearRect(0, 0, width, height);// 找出最大振幅以便归一化const maxMagnitude = Math.max(...magnitudes.slice(1)); // 忽略直流分量const barWidth = width / maxFreq;const scale = height * 0.9;// 绘制频谱柱状图ctx.fillStyle = '#3498db';for (let i = 0; i < Math.min(maxFreq, magnitudes.length); i++) {const magnitude = i === 0 ? 0 : magnitudes[i] / maxMagnitude; // 忽略直流分量const barHeight = magnitude * scale;const x = i * barWidth;const y = height - barHeight;ctx.fillRect(x, y, barWidth * 0.8, barHeight);}// 绘制x轴ctx.beginPath();ctx.strokeStyle = '#aaa';ctx.lineWidth = 1;ctx.moveTo(0, height);ctx.lineTo(width, height);ctx.stroke();// 绘制频率刻度ctx.fillStyle = '#666';ctx.font = '10px Arial';ctx.textAlign = 'center';for (let i = 0; i < maxFreq; i += 5) {const x = i * barWidth + barWidth / 2;ctx.fillText(`${i} Hz`, x, height - 5);}}// 绘制相位谱function drawPhaseSpectrum(ctx, phases, maxFreq = 20) {const width = ctx.canvas.width;const height = ctx.canvas.height;ctx.clearRect(0, 0, width, height);const barWidth = width / maxFreq;const centerY = height / 2;const scale = height / 2 * 0.8;// 绘制相位点和连线ctx.beginPath();ctx.strokeStyle = '#e74c3c';ctx.lineWidth = 2;for (let i = 1; i < Math.min(maxFreq, phases.length); i++) {const x = i * barWidth + barWidth / 2;const y = centerY - phases[i] / Math.PI * scale;if (i === 1) ctx.moveTo(x, y);else ctx.lineTo(x, y);// 绘制圆点ctx.fillStyle = '#e74c3c';ctx.beginPath();ctx.arc(x, y, 3, 0, 2 * Math.PI);ctx.fill();}ctx.stroke();// 绘制x轴和y轴ctx.beginPath();ctx.strokeStyle = '#aaa';ctx.lineWidth = 1;ctx.moveTo(0, centerY);ctx.lineTo(width, centerY);ctx.moveTo(0, centerY - scale);ctx.lineTo(width, centerY - scale);ctx.fillText('π', 10, centerY - scale);ctx.moveTo(0, centerY + scale);ctx.lineTo(width, centerY + scale);ctx.fillText('-π', 10, centerY + scale);ctx.stroke();}// FFT算法实现 (Cooley-Tukey)function fft(x) {const N = x.length;if (N <= 1) {return x;}// 确保N是2的幂if (N & (N - 1)) {throw new Error("FFT长度必须是2的幂");}// 分治法：分别计算偶数和奇数索引const even = new Array(N / 2);const odd = new Array(N / 2);for (let i = 0; i < N / 2; i++) {even[i] = x[i * 2];odd[i] = x[i * 2 + 1];}// 递归计算const evenResult = fft(even);const oddResult = fft(odd);// 合并结果const result = new Array(N).fill().map(() => new Complex(0, 0));for (let k = 0; k < N / 2; k++) {const twiddle = Complex.fromPolar(1, -2 * Math.PI * k / N);const oddTerm = Complex.multiply(twiddle, oddResult[k]);result[k] = Complex.add(evenResult[k], oddTerm);result[k + N / 2] = Complex.subtract(evenResult[k], oddTerm);}return result;}// 复数类class Complex {constructor(re, im) {this.re = re;this.im = im;}static add(a, b) {return new Complex(a.re + b.re, a.im + b.im);}static subtract(a, b) {return new Complex(a.re - b.re, a.im - b.im);}static multiply(a, b) {return new Complex(a.re * b.re - a.im * b.im,a.re * b.im + a.im * b.re);}static fromPolar(r, theta) {return new Complex(r * Math.cos(theta),r * Math.sin(theta));}magnitude() {return Math.sqrt(this.re * this.re + this.im * this.im);}phase() {return Math.atan2(this.im, this.re);}}// 计算傅里叶变换function computeFourier(data) {// 确保数据长度是2的幂const nextPow2 = Math.pow(2, Math.ceil(Math.log2(data.length)));const paddedData = new Array(nextPow2).fill(0);for (let i = 0; i < data.length; i++) {paddedData[i] = new Complex(data[i], 0);}for (let i = data.length; i < nextPow2; i++) {paddedData[i] = new Complex(0, 0);}// 计算FFTconst result = fft(paddedData);// 提取幅度和相位const magnitudes = result.map(c => c.magnitude() / Math.sqrt(nextPow2));const phases = result.map(c => c.phase());return { magnitudes, phases, result };}// 使用傅里叶级数合成波形function synthesizeWave(fourierResult, harmonics, sampleCount) {const synthesized = new Array(sampleCount).fill(0);const { magnitudes, phases, result } = fourierResult;// 使用指定数量的谐波合成for (let t = 0; t < sampleCount; t++) {let sum = magnitudes[0] / 2; // 直流分量for (let n = 1; n <= harmonics; n++) {if (n < magnitudes.length) {const amplitude = magnitudes[n];const phase = phases[n];const angle = 2 * Math.PI * n * t / sampleCount;sum += amplitude * Math.cos(angle + phase);}}synthesized[t] = sum;}return synthesized;}// 主波形绘制函数function drawWave() {const waveType = waveTypeSelect.value;const frequency = parseInt(frequencySlider.value);const amplitude = parseFloat(amplitudeSlider.value);const harmonics = parseInt(harmonicsSlider.value);const sampleCount = 1024;// 生成原始波形const waveData = generateWaveData(waveType, frequency, amplitude, sampleCount);drawWaveform(originalCtx, waveData);return { waveType, frequency, amplitude, harmonics, sampleCount, waveData };}// 计算并绘制傅里叶变换相关图像function computeAndDrawFourier() {loading.style.display = 'block';setTimeout(() => {const { waveType, frequency, amplitude, harmonics, sampleCount, waveData } = drawWave();// 计算傅里叶变换const fourierResult = computeFourier(waveData);const { magnitudes, phases } = fourierResult;// 绘制频谱drawSpectrum(fourierCtx, magnitudes);// 绘制相位谱drawPhaseSpectrum(phaseCtx, phases);// 合成波形const synthesized = synthesizeWave(fourierResult, harmonics, sampleCount);drawWaveform(synthesizedCtx, synthesized, '#27ae60');loading.style.display = 'none';}, 100);}// 事件监听updateBtn.addEventListener('click', drawWave);computeBtn.addEventListener('click', computeAndDrawFourier);// 初始绘制drawWave();computeAndDrawFourier();// AJAX功能 - 可以加载预设波形function loadPresetWaveform(presetName) {// 模拟AJAX请求loading.style.display = 'block';// 使用setTimeout模拟网络延迟setTimeout(() => {let presetConfig = {};// 预设配置switch (presetName) {case 'speech':presetConfig = {waveType: 'custom',frequency: 8,amplitude: 0.8,harmonics: 15};break;case 'music':presetConfig = {waveType: 'sine',frequency: 12,amplitude: 0.7,harmonics: 10};break;case 'noise':presetConfig = {waveType: 'sawtooth',frequency: 3,amplitude: 0.9,harmonics: 20};break;default:presetConfig = {waveType: 'sine',frequency: 5,amplitude: 0.5,harmonics: 5};}// 更新UIwaveTypeSelect.value = presetConfig.waveType;frequencySlider.value = presetConfig.frequency;frequencyValue.textContent = `${presetConfig.frequency} Hz`;amplitudeSlider.value = presetConfig.amplitude;amplitudeValue.textContent = presetConfig.amplitude;harmonicsSlider.value = presetConfig.harmonics;harmonicsValue.textContent = presetConfig.harmonics;// 重新绘制drawWave();computeAndDrawFourier();loading.style.display = 'none';}, 500);}// 添加预设按钮const presetContainer = document.createElement('div');presetContainer.className = 'control-group';presetContainer.innerHTML = `<label>预设波形</label><div style="display: flex; gap: 10px;"><button id="preset-speech">语音</button><button id="preset-music">音乐</button><button id="preset-noise">噪声</button></div>`;document.querySelector('.controls').appendChild(presetContainer);document.getElementById('preset-speech').addEventListener('click', () => loadPresetWaveform('speech'));document.getElementById('preset-music').addEventListener('click', () => loadPresetWaveform('music'));document.getElementById('preset-noise').addEventListener('click', () => loadPresetWaveform('noise'));</script>
</body>
</html>
仅供参考，我也不懂数学。
傅里叶变换是一种将时域信号转换为频域表示的数学工具。它可以将任何周期性的函数分解为简单正弦波的叠加。
离散傅里叶变换 (DFT)：
X(k) = Σ[n=0 to N-1] x(n) · e-j2πkn/N
傅里叶级数：
f(t) = a0/2 + Σ[n=1 to ∞] [ancos(nωt) + bnsin(nωt)]
在这个演示中，您可以通过控制面板选择不同的波形，并观察其傅里叶变换结果。傅里叶变换让我们能够看到波形中包含的各种频率成分及其振幅和相位。
相关文章：
)
html5+css3实现傅里叶变换的动态展示效果(仅供参考)
<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>傅里叶变换的动态展示效果</title><sty…...
SysConfig修改后`ti_msp_dl_config`文件未更新问题的解决方法（已解决）
SysConfig修改后ti_msp_dl_config文件未更新问题的解决方法 在使用SysConfig工具配置TI MSPM0系列MCU时，有时会遇到一个令人困惑的问题：在SysConfig中修改配置后，生成的ti_msp_dl_config.c文件内容却没有更新。这可能会导致工程无法正确编译…...
深入浅出 IPFS 在 DApps 和 NFT 中的应用：以 Pinata 实战为例
目录 IPFS背景什么是 IPFS？IPFS 在 DApps 与 NFT 中的作用什么是 Pinata？为什么使用它？使用原生IPFS上传下载文件（HTML + JavaScript 示例）使用Pinata上传下载文件（HTML + JavaScript 示例）注册并创建APIKey使用 Pinata 上传文件和JSON（HTML + JavaScript 示例）总结IP…...
深度剖析LLM的“大脑”：单层Transformer的思考模式探索
简单说一下哈 —— 咱们打算训练一个单层 Transformer 加上稀疏自编码器的小型百万参数大型语言模型（LLM），然后去调试它的思考过程，看看这个 LLM 的思考和人类思考到底有多像。 LLMs 是怎么思考的呢？ 开源 LLM 出现之后…...
（4）python开发经验
文章目录 1 使用ctypes库调用2 使用pybind11 更多精彩内容👉内容导航 👈👉Qt开发 👈👉python开发 👈 1 使用ctypes库调用 说明：ctypes是一个Python内置的库，可以提供C兼容的数据类型…...
卷积神经网络全连接层详解：特征汇总、FCN替代与性能影响分析
【内容摘要】 本文聚焦卷积神经网络（CNN）的全连接层，详细介绍其将二维特征图转化为一维向量的过程，阐述全卷积网络（FCN）如何通过转置卷积替代全连接层以实现像素级分类，并分析全连接层对图像分类…...
通义千问-langchain使用构建（一）
目录 序言通义千问1获取通义千问api_key2Conda构建下本地环境3 构建一下多轮对话 LangChain1使用Langchain调用通义千问接口实现翻译 结论 序言 25年5月，现在基本每个大厂都有涉及大模型(Large Language Model)，然后在大模型基础上构建应用框架。 参考…...
六西格玛觉醒：一场数据思维的启蒙运动
当生产线上的不良品率曲线第一次在我眼前具象化为统计波动图时，我意识到自己正站在新旧认知的断层带上。从对着MINITAB界面手足无措的菜鸟，到能独立完成过程能力分析的绿带学员，这段学习旅程不仅重塑了我的问题解决逻辑，更让我…...
BitMart合约交易体验 BitMart滑点全赔的底层逻辑
美国新泽西州泽西市，2025年5月13日 – BitMart，全球领先的数字资产交易平台，推出了其开创性的滑点保护计划，旨在解决加密市场中最具挑战性且常常被忽视的风险之一：滑点。该计划为交易者提供了在 USDT 保证金永续合约交…...
HCIP（BFD）
一、前言 随着网络应用的广泛部署,网络发生故障极大可能导致业务异常。为了减小链路、设备故障对业 务的影响,提高网络的可靠性,网络设备需要尽快检测到与相邻设备间的通信故障,以便及时采取措施,保证业务正常进行。BFD(Bidirectional Forwarding Detection,双向转发检测)提供…...
json-server的用法-基于 RESTful API 的本地 mock 服务
json-server 是一个非常方便的工具，用于快速搭建基于 RESTful API 的本地 mock 服务，特别适合前端开发阶段模拟后端数据接口。 🧩 一、安装 npm install -g json-server🚀 二、快速启动 创建一个 db.json 文件（模拟数…...
化工单元操作试验装置系列产品JG-SX211计算机过程控制板框过滤操作实训装置
化工单元操作试验装置系列产品JG-SX211计算机过程控制板框过滤操作实训装置 一、装置功能 板框过滤岗位技能：板框过滤机的构造和操作方法；板框压滤机的操作（装合、过滤、洗涤、卸渣、整理）；洗涤速率与最终过滤速率的关…...
Linux 内核 IPv4 协议栈中的协议注册机制解析
1. 引言 在 Linux 内核的 IPv4 协议栈中，inetsw 是一个核心数据结构，负责管理不同套接字类型（如 SOCK_STREAM、SOCK_DGRAM）的协议实现。本文结合代码分析，深入探讨其设计原理、动态协议注册机制及并发安全实现。 2. inetsw 的结构与作用 2.1 定义与初始化 static struc…...
【PostgreSQL数据分析实战：从数据清洗到可视化全流程】附录-C. 常用SQL脚本模板
👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路 文章大纲 附录C. 常用SQL脚本模板速查表一、数据清洗与预处理模板二、数据聚合与分析模板三、窗口函数应用模板四、性能优化与监控模板五、数据备份与恢复模板六、权限管理与安全模板…...
Linux操作系统实战：中断源码的性能分析（转）
Linux中断是指在Linux操作系统中，当硬件设备或软件触发某个事件时，CPU会中断正在执行的任务，并立即处理这个事件。它是实现实时响应和处理外部事件的重要机制，Linux中断可以分为两种类型：硬件中断和软件中断࿰…...
Windows系统Anaconda/Miniconda的安装、配置、基础使用、清理缓存空间和Pycharm/VSCode配置指南
本文同步发布在个人博客： Windows系统Anaconda/Miniconda的安装、配置、基础使用、清理缓存空间和Pycharm/VSCode配置指南 - 萑澈的寒舍Conda 是一个开源的跨平台包管理与环境管理工具，广泛应用于数据科学、机器学习及 Python 开发领域。它不仅能帮助用…...
用HBuilder运行小程序到微信开发者工具
首先在HBuilder里配置微信开发者工具安装路径 “运行”--“运行到小程序模拟器”--“运行设置”--“微信开发者工具路径”...
基于网关实现不同网段S7-1200 CPU的通信方法
在工业自动化场景中，不同网段的S7-1200 PLC之间需要进行数据交换时，通常需要借助网关或路由设备实现跨网段通信。以下是几种常见的实现方法及详细配置步骤。 一、通信需求分析 当两个或多个S7-1200 PLC位于不同子网（如192.168.1.0/24和192.1…...
微信小程序学习之轮播图swiper
轮播图是小程序的重要组件，我们还是好好学滴。 1、上代码，直接布局一个轮播图组件(index.wxml)： <swiper class"swiper" indicator-active-color"#fa2c19" indicator-color"#fff" duration"{{durati…...
零基础用 Hexo + Matery 搭建博客｜Github Pages 免费部署教程
文章目录 一、Hexo1.1 依赖1.2 快速使用1.3 目录说明1.4 命令说明1.4.1 常规命令1.4.2 全局选项 二、主题安装2.1 安装 Matery 主题2.1.1 下载2.1.2 配置2.1.2.1 基础配置2.1.2.2 新建页面类型2.1.2.3 其他配置 2.2 其他主题推荐 三、部署3.1 部署到 Github Pages 四、总结 一、…...
Large-Scale Language Models: In-Depth Principles and Pioneering Innovations
大规模语言模型（Large-Scale Language Models, LLMs）是人工智能领域的璀璨明珠，深刻重塑了自然语言处理（NLP）并推动多模态应用的蓬勃发展。从BERT的语义洞察到GPT系列的生成奇迹，再到Grok、LLaMA等模型的跨界创新，LLMs在智能对话、代码生成、科学探索等领域展现出近乎人…...
)
微信小程序智能商城系统(uniapp+Springboot后端+vue管理端)
一、系统介绍 本智能商城系统是基于当今主流技术栈开发的一款多端商城解决方案，主要包括微信小程序前端、SpringBoot 后端服务以及 Vue 管理后台三大部分。系统融合了线上商城的核心功能，支持商品浏览、下单、支付、订单管理等操作，适用于中小…...
命令行快速上传文件到SFTP服务器（附参考示例）
一、SFTP基础命令格式 更新参数后的标准命令格式为： sftp -P [端口号] [用户名][服务器IP]:[远程路径] <<< $put [本地文件路径]二、新参数实例解析 使用新连接参数的完整命令示例： sftp -P 30033 test_jigou_sftp121.199.64.216:/download…...
【Linux】第十六章 分析和存储日志
1. RHEL 日志文件保存在哪个目录中？ 一般存储在 /var/log 目录中。 2. 什么是syslog消息和非syslog消息？ syslog消息是一种标准的日志记录协议和格式，用于系统和应用程序记录日志信息。它规定了日志消息的结构和内容，包括消息的…...
vue2+ThinkPHP5实现简单大文件切片上传
使用 Vue 2 和 ThinkPHP 5 实现大文件切片上传功能 文章目录 一、前端（Vue 2）安装依赖文件上传并切片全部代码二、后端（ThinkPHP 5）完整代码一、前端（Vue 2） 安装依赖 安装spark-md5依赖 用于生成文件哈希，以便验证文件的完整性。 npm install spark-md5文件上传并切…...
phpstudy的Apache添加AddType application/x-httpd-php .php .php5配置无效的处理方式
前言 最近在学习安全竞赛ctf相关的内容，使用phpstudy作为服务端，研究图片上传相关漏洞的靶场upload-labs。其中遇到后缀名过滤，会过滤后缀名php。按照网上的处理方式，只需要在Apache服务器的配置文件中增加“AddType application…...
2025年Flutter项目管理技能要求
在2025年，随着Flutter技术的广泛应用和项目复杂度的提升，项目管理的重要性愈发凸显。Flutter项目管理不仅需要技术能力，还需要良好的沟通、协调、规划和执行能力。本文将详细探讨2025年Flutter项目管理应具备的技能要求，帮助项目管…...
Step1
项目 SchedulerSim 已搭建完成 ✅ ⸻ ✅ 你现在拥有的： • 🔧 两种调度器（Round Robin SJF） • 📦 模拟进程类 Process • 🧱 清晰结构：OOP 风格 便于扩展 • ✍️ 主函数已演示调度器运行效…...
——QuickStart)
MCP(一)——QuickStart
目录 1. MCP简介2. MCP的优势3. MCP核心4. QuickStart For Server Developers(仅具参考)4.1 MCP核心概念4.2 构建MCP服务器的代码4.2.1 设置MCP服务器实例4.2.2 辅助函数4.2.3 实现工具执行4.2.4 在Cherry-Studio中添加MCP服务器4.2.5 演示4.2.5.1 测试工具get_alerts4.2.5.2 测…...
NLP的基本流程概述
自然语言处理（Natural Language Processing, NLP）是计算机科学与人工智能领域中的一个重要分支，旨在使计算机能够理解、分析、生成和处理人类语言。NLP的基本流程通常包括以下几个关键步骤： 1. 文本预处理 (Text Preprocessing) …...
【Java学习笔记】==运算符
运算符 是一个比较运算符 既可以判断基本类型，又可以判断引用类型 如果判断基本类型，判断的是值是否相等，示例: int i 10; double d 10.0（底层会发生自动类型转换） 如果判断引用类型，判断的是地址是否相…...
移动网页调试工具实战：从 Chrome 到 WebDebugX 的效率演进
前端开发的日常，说白了就是构建、预览、调试的不断循环。如果是桌面浏览器，调试体验已经极致成熟；但一旦牵涉到移动端，尤其是 WebView 环境，一切都变得复杂。 过去几年里，我陆续试用了多个调试工具&#x…...
Vue 图片预览功能（含缩略图）
众所周知，常见的组件库如Element、Ant Design，自带的图片预览功能都没有缩略图，所以 需要单独封装一个图片预览的服务。 第三方库：v-viewer 安装： npm install v-viewer viewerjs 若使用报错，可安装指定…...
RK3588 串行解串板，支持8路GMSL相机
RK3588 支持的 GMSL 相机接入数量取决于所使用的解串板型号及配置方案： xcDeserializer3.0 解串板 可接入最多 8 路 2M GMSL2 相机1。 xcDeserializer4.0 解串板 支持 4 路 2M GMSL2 相机1。 边缘计算盒解决方案 部分商用方案可实现 4 或 8…...
数据库字段唯一性修复指南：从设计缺陷到规范实现
数据库字段唯一性修复指南：从设计缺陷到规范实现 一、问题背景 表结构设计缺陷： sys_user 表未对 dingtalk_user_id（钉钉用户ID）字段设置唯一性约束，导致数据重复，引发以下问题： 系统稳定性风…...
深度学习Dropout实现
深度学习中的 Dropout 技术在代码层面上的实现通常非常直接。其核心思想是在训练过程中，对于网络中的每个神经元（或者更精确地说，是每个神经元的输出），以一定的概率 p 随机将其输出置为 0。在反向传播时，这…...
IIS服务器URL重写配置完整教程
1.下载URL Rewrite Module 2.1 https://www.iis.net/downloads/microsoft/url-rewrite https://download.microsoft.com/download/1/2/8/128E2E22-C1B9-44A4-BE2A-5859ED1D4592/rewrite_amd64_zh-CN.msi 2.安装...
前后端分离博客 Weblog 项目实战
前后端分离博客 Weblog 项目实战：专栏介绍 - 犬小哈专栏 原文作者 http://116.62.199.48/ 功能模块 技术栈 必备环境 后端环境： JDK 1.8 版本（此版本是目前企业中使用最广泛的）;MySQL 5.7 版本 (或者 8.x 版本都可以&#…...
stm32 ADC单通道转换
stm32c8t6仅有12位分辨率 1、单次转换 非扫描 1、初始化 void Ad_Init() {RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOA, ENABLE);RCC_APB2PeriphClockCmd(RCC_APB2Periph_ADC1, ENABLE);//配置ADCCLK时钟分频,ADC的输入时钟不得超过14MHzRCC_ADCCLKConfig(RCC_PCLK2_Div6);G…...
万文c++继承
1、继承的概念与定义 1.1继承的概念 继承：是c代码复用的手段，允许在原有的基础上扩展，在此之前都是函数层次的复用，继承是类设计层次的复用。 下面有两个类Student和Teacher都有姓名/地址/电话/年龄等成员变量。都有identity身…...
记录一次git提交失败解决方案
问题显示: Push rejected: Push to origin/master was rejected 解决步骤: 拉取远程代码并合并 先同步远程仓库的更新到本地，允许合并不相关历史记录： git pull origin master --allow-unrelated-histories 此操作会触发合并冲突解决流程…...
uni-app vue3版本打包h5后 页面跳转报错（uni[e] is not a function）
先看问题 解决方案 在HBuilderX项目中，若需在Web配置中显式关闭摇树优化（Tree Shaking），可以通过以下步骤实现：首先，在配置中打开摇树优化，然后再将其关闭。这样操作后，配置文件中会…...
数字住建：助推智慧工地创新发展
近年来，国家和地方政府陆续出台了一系列政策措施，推动建筑业的智能化高质量发展。通过明确智慧工地的发展方向和目标定位，鼓励建筑业企业采用先进的信息化技术和管理模式，开展智能建造试点城市、资金扶持、税收优惠、智慧工地建设…...
libmemcached库api接口讲解二
我们来学一下怎么存数据 📘 libmemcached 数据写入函数详解（set / add / replace） ✅ 一、三个函数的作用与区别 函数作用key 存在时key 不存在时常见用途memcached_set()写入（新增或覆盖）✅ 覆盖✅ 创建默认推荐memc…...
【数据分析】从TCGA下载所有癌症的多组学数据
禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录 介绍加载R包组学数据类型下载函数运行并行运行使用建议总结系统信息介绍 TCGA（The Cancer Genome Atlas）是一个庞大的癌症基因组数据库，包含多种癌症类型的多组学数据，如基因表达、…...
K8S redis 部署
在Kubernetes 1.26.14中部署Redis单实例/集群的步骤如下（结合NFS持久化存储与认证配置）： 一、部署Redis单实例（StatefulSet模式） 1. 创建配置文件 redis-statefulset.yaml # ConfigMap存储Redis配置 apiVersion: v1 …...
Android学习总结之kotlin篇（二）
扩展函数转成字节码的原理（源码级别） Kotlin 扩展函数在编译时会被转换为静态方法，这一过程涉及到以下几个关键步骤： 首先，Kotlin 编译器会为包含扩展函数的包生成一个特定的类。这个类的命名通常是基于包名和文件名的…...
)
QMK RGB矩阵灯效配置详解：从理论到实践(实操部分)
QMK RGB矩阵灯效配置详解：从理论到实践 引言 RGB灯效是现代机械键盘中一个非常吸引人的特性，通过QMK固件，我们可以实现丰富多彩的灯光效果。本文将详细讲解如何在QMK中配置RGB矩阵灯效，从基础理论到实际实现，帮助键盘爱好者打造专属的RGB键盘。无论你是刚开始接触QMK，还…...
知识图谱重构电商搜索：下一代AI搜索引擎的底层逻辑
1. 搜索引擎的进化论 从雅虎目录式搜索到Google的PageRank算法，搜索引擎经历了三次技术跃迁。而AI搜索引擎正在掀起第四次革命：在电商场景中，传统的「关键词匹配」已无法满足个性化购物需求，MOE搜索等新一代架构开始融合知识图谱…...
解密企业级大模型智能体Agentic AI 关键技术：MCP、A2A、Reasoning LLMs-强化学习算法
解密企业级大模型智能体Agentic AI 关键技术：MCP、A2A、Reasoning LLMs-强化学习算法 现在我们的核心问题是有一些同学会知道要才能强化学习。为什么才能强化学习？是实现AGI。例如从这个其实你从第一阶段开始以后，就是chatbot，这…...