Javascript网页设计案例：通过PDF.js实现一款PDF阅读器，包括预览、页面旋转、页面切换、放大缩小、黑夜模式等功能
前言
目前功能包括：
- 切换到首页。
- 切换到尾页。
- 上一页。
- 下一页。
- 添加标签。
- 标签管理
- 页面旋转
- 页面随意拖动
- 双击后还原位置
其实按照自己的预期来说，有很多功能还没有开发完，配色也没有全都搞完，先发出来吧，后期有需要继续添加功能。
功能预览
1.加载后的主页面
白天模式
黑夜模式
2.功能区
一、关于这款PDF阅读器的功能说明
1. 基本布局与样式
- 具有响应式设计，通过
meta标签设置视口以适应不同设备宽度。 - 支持主题切换（明暗模式），定义了一系列CSS变量来管理颜色和布局相关属性，方便切换不同主题风格。
2. 工具栏功能
- 导航功能：包含首页、上一页、下一页、末页的导航按钮，对应
firstPage()、prevPage()、nextPage()、lastPage()函数。 - 缩放功能：有缩小、放大按钮，分别对应
zoomOut()和zoomIn()函数，还提供了一个范围输入控件#zoomControl用于更精确地控制缩放比例。 - 旋转功能：顺时针旋转和逆时针旋转按钮，对应
rotateClockwise()和rotateCounterClockwise()函数。 - 书签功能：可以输入书签名称，点击添加书签按钮（
addBookmark()函数）添加书签，还有书签管理按钮（toggleBookmarkPanel()函数）用于管理已添加的书签。 - 主题切换：有一个主题切换按钮（
toggleTheme()函数），点击可切换明暗主题。
3. 侧边栏与缩略图
- 侧边栏（
.sidebar）用于显示PDF文档的缩略图，缩略图容器为#thumbnails，每个缩略图项（.thumbnail-item）包含一个canvas元素用于显示缩略图，点击缩略图项可进行相关操作。
4. 主内容区域
- 主内容区域（
.main-content）包含PDF文档的显示区域（#pdf-container），其中有一个canvas元素（#pdf-canvas）用于渲染PDF页面，用户可以通过鼠标抓取操作（cursor: -webkit-grab）进行交互。 - 状态栏（
.status-bar）用于显示一些状态信息，如页码等。
5. 模态窗口
- 书签管理模态窗口（
#bookmarks-modal），默认隐藏，用于管理已添加的书签，包含书签列表（#bookmarks-list）和一些操作按钮（.modal-buttons）。
二、Html代码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"><title>PDF阅读器</title><style>:root {--primary-color: #2196F3;--hover-color: #1976D2;--background-color: #1a1a1a;--surface-color: #2d2d2d;--toolbar-bg: #333333;--text-color: #ffffff;--error-color: #ff4444;--border-radius: 8px;--gap: 20px;--toolbar-height: 60px;}body {font-family: Arial, sans-serif;margin: 0;padding: 20px;background-color: var(--background-color);color: var(--text-color);box-sizing: border-box;}.pdf-reader-container {display: flex;gap: var(--gap);max-width: 100%;min-width: 800px;margin: 0 auto;background-color: var(--surface-color);border-radius: var(--border-radius);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);padding: var(--gap) ; /* 0 上下内边距 */margin-top: var(--toolbar-height);box-sizing: border-box;flex-wrap: nowrap;}.toolbar {position: fixed;top: 0;left: 0;right: 0;height: var(--toolbar-height);display: flex;align-items: center;justify-content: space-between;padding: 0 var(--gap);background-color: var(--toolbar-bg);border-radius: 0 0 var(--border-radius) var(--border-radius);box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);z-index: 1000;box-sizing: border-box;}.logo {display: flex;align-items: center;padding: 0 20px;height: 60%;}.logo img {height: 100%;object-fit: contain; transition: transform 0.3s ease; }.toolbar-buttons {display: flex;gap: 10px;}/* 修改按钮样式部分 */button {padding: 8px 12px;font-size: 16px;cursor: pointer;background-color: var(--primary-color);color: var(--text-color);border: none;border-radius: 50%;aspect-ratio: 1/1;transition: all 0.3s ease;display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;position: relative;}button:hover {background-color: var(--hover-color);transform: translateY(-2px);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);}button::before {font-family: "Font Awesome 5 Free";font-weight: 900;}/* 为每个按钮指定图标 */button:nth-child(1)::before { content: "\f100"; } /* 首页 */button:nth-child(2)::before { content: "\f104"; } /* 上一页 */button:nth-child(3)::before { content: "\f105"; } /* 下一页 */button:nth-child(4)::before { content: "\f101"; } /* 末页 */button:nth-child(5)::before { content: "\f068"; } /* 缩小 */button:nth-child(7)::before { content: "\f067"; } /* 放大 */button:nth-child(8)::before { content: "\f2f9"; } /* 顺时针旋转 */button:nth-child(9)::before { content: "\f2ea"; } /* 逆时针旋转 */button:nth-child(11)::before { content: "\f02e"; } /* 添加书签 */button:nth-child(12)::before { content: "\f02e"; } /* 书签管理 */button span {display: none;}.toolbar-buttons {display: flex;gap: 8px;align-items: center;}#zoomControl {width: 100px;height: 6px;background: var(--surface-color);border-radius: 3px;}#bookmarkLabel {padding: 8px;border-radius: var(--border-radius);border: 1px solid var(--primary-color);background: var(--surface-color);color: var(--text-color);}button::after {content: attr(aria-label);position: absolute;bottom: -30px;left: 50%;transform: translateX(-50%);background: var(--toolbar-bg);color: var(--text-color);padding: 4px 8px;border-radius: 4px;font-size: 12px;white-space: nowrap;opacity: 0;transition: opacity 0.2s;pointer-events: none;}button:hover::after {opacity: 1;}::-webkit-scrollbar {width: 8px;}::-webkit-scrollbar-track {background-color: var(--toolbar-bg);border-radius: 4px;}::-webkit-scrollbar-thumb {background-color: var(--primary-color);border-radius: 4px;}::-webkit-scrollbar-thumb:hover {background-color: var(--hover-color);}/* 侧边栏样式 */.sidebar {flex: 0 0 250px;background-color: var(--toolbar-bg);border-radius: var(--border-radius);padding: 16px;height: calc(100vh - var(--toolbar-height) - var(--gap)*2 - 40px);overflow-y: auto;box-sizing: border-box;}.thumbnail-container {display: flex;flex-direction: column;gap: 10px;}.thumbnail-item {position: relative;cursor: pointer;border-radius: 4px;overflow: hidden;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}.thumbnail-item canvas {width: 100%;height: auto;}.thumbnail-item.active {border: 2px solid var(--primary-color);}.main-content {flex: 1;background-color: var(--surface-color);border-radius: var(--border-radius);/* padding: 16px; */height: calc(100vh - var(--toolbar-height) - var(--gap)*2 - 40px);box-sizing: border-box;}#pdf-container {width: 100%;height: 96%;/* height: calc(100vh - var(--toolbar-height) - var(--gap)*2 - 80px - 40px); */border: 1px solid var(--toolbar-bg);border-radius: var(--border-radius);overflow: auto;background-color: #333333;/* padding: 16px; */box-sizing: border-box;overflow-x: hidden;}.status-bar {height: 4%;font-size: 14px;color: var(--text-color);/* padding: 5px; */background-color: var(--toolbar-bg);border-radius: var(--border-radius);margin-top: auto;}.error-message {color: var(--error-color);padding: 10px;margin-top: 10px;background-color: #4d4d4d;border-radius: var(--border-radius);}/* 模态窗口样式 */.modal {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 1000;transition: opacity 0.3s ease;}.modal-content {background-color: var(--toolbar-bg);margin: 15% auto;padding: 20px;width: 80%;max-width: 500px;position: relative;border-radius: var(--border-radius);}.close {position: absolute;right: 20px;top: 10px;font-size: 28px;cursor: pointer;color: var(--text-color);}.close:hover {color: var(--primary-color);}#bookmarks-list {list-style-type: none;padding: 0;margin: 0;}#bookmarks-list li {padding: 8px;margin: 4px 0;cursor: pointer;border-radius: 4px;}#bookmarks-list li:hover {background-color: var(--primary-color);color: var(--text-color);}.modal-buttons {margin-top: 20px;}.modal-buttons button {margin: 0 5px;}canvas#pdf-canvas {position: relative;cursor: -webkit-grab;}.theme-toggle {position: relative;display: inline-block;}.light-theme {--background-color: #f9fafb; --surface-color: #ffffff;--toolbar-bg: #e5e7eb; --text-color: #374151;--error-color: #ef4444;--primary-color: #3b82f6;--hover-color: #2563eb; }.light-theme .toolbar {background-color: var(--toolbar-bg);}.light-theme .sidebar {background-color: var(--toolbar-bg);}.light-theme .main-content {background-color: var(--surface-color);}.light-theme button {background-color: var(--primary-color);color: var(--text-color);}.light-theme .status-bar {background-color: var(--toolbar-bg);}</style>
</head>
<body><div class="toolbar"><div class="logo"><img src="logo.png" alt="Logo"></div><div class="toolbar-buttons"><button onclick="firstPage()" aria-label="首页"><span>首页</span></button><button onclick="prevPage()" aria-label="上一页"><span>上一页</span></button><button onclick="nextPage()" aria-label="下一页"><span>下一页</span></button><button onclick="lastPage()" aria-label="末页"><span>末页</span></button><button onclick="zoomOut()" aria-label="缩小"><span>缩小</span></button><input type="range" min="0.5" max="2.0" step="0.1" value="1.0" id="zoomControl"><button onclick="zoomIn()" aria-label="放大"><span>放大</span></button><button onclick="rotateClockwise()" aria-label="顺时针旋转"><span>顺时针旋转</span></button><button onclick="rotateCounterClockwise()" aria-label="逆时针旋转"><span>逆时针旋转</span></button><input type="text" id="bookmarkLabel" placeholder="输入书签名称"><button onclick="addBookmark()" aria-label="添加书签"><span>添加书签</span></button><button onclick="toggleBookmarkPanel()" aria-label="书签管理"><span>书签管理</span></button><button onclick="toggleTheme()" aria-label="切换主题" class="theme-toggle"><i class="fas fa-moon"></i></button></div></div><div class="pdf-reader-container"><div class="sidebar"><div class="thumbnail-container" id="thumbnails"></div></div><div class="main-content"><div id="pdf-container"><canvas id="pdf-canvas"></canvas></div><div class="status-bar" id="status-bar"></div></div></div><div id="bookmarks-modal" class="modal" style="display: none;"><div class="modal-content"><span class="close" onclick="closeBookmarkPanel()">×</span><h3>书签管理</h3><ul id="bookmarks-list"></ul><div class="modal-buttons"><button onclick="addBookmark()">添加书签</button><button onclick="clearBookmarks()">清除书签</button><button onclick="closeBookmarkPanel()">关闭</button></div></div></div><script src="pdf.min.js"></script> <script src="pdf-reader.js"></script>
</body>
</html>
三、Javascript代码
let doc = null;
let currentPage = 1;
let scale = 1.5;
let rotation = 0;
let bookmarks = [];
let isDragging = false;
let lastX = 0;
let lastY = 0;
let offsetX = 0;
let offsetY = 0;let thumbnails = [];const thumbnailsContainer = document.getElementById('thumbnails'); const bookmarksList = document.getElementById('bookmarks-list');
const bookmarksPanel = document.getElementById('bookmarks-panel'); const container = document.getElementById('pdf-container'); // 新增变量用于存储当前视口的偏移量
let viewportOffsetX = 0;
let viewportOffsetY = 0;// 在window.onload 中添加键盘事件监听
window.addEventListener('keydown', function(e) {if (e.key === 'ArrowLeft') {prevPage();} else if (e.key === 'ArrowRight') {nextPage();}
});// 初始化滚动条
const zoomControl = document.getElementById('zoomControl');
zoomControl.value = scale.toString(); // 初始化旋转状态
const savedRotation = localStorage.getItem('pdfRotation');
if (savedRotation !== null) {rotation = parseInt(savedRotation);
}// 加载PDF文件
function loadPDF(fileUrl) {pdfjsLib.getDocument(fileUrl).promise.then(function (loadedDoc) {doc = loadedDoc;const numPages = doc.numPages; loadPage(currentPage);createThumbnails(numPages);// 更新状态栏 document.getElementById('status-bar').textContent =`第 ${currentPage} 页 / 共 ${numPages} 页 | 缩放比例: ${scale * 100}% | 旋转: ${rotation}°`;}).catch(function (error) {console.error('Error loading PDF:', error);showError(`加载PDF时出错：${error.message}`); });
}// 创建缩略图
function createThumbnails(numPages) {thumbnailsContainer.innerHTML = '';for (let i = 1; i <= numPages; i++) {const thumbnailItem = document.createElement('div'); thumbnailItem.className = 'thumbnail-item';thumbnailItem.dataset.page = i;const canvas = document.createElement('canvas'); thumbnailItem.appendChild(canvas); thumbnailsContainer.appendChild(thumbnailItem); loadThumbnail(i, canvas);thumbnailItem.addEventListener('click', function() {currentPage = i;loadPage(currentPage);updateThumbnailsActiveState();});}
}// 更新缩略图活动状态
function updateThumbnailsActiveState() {const items = thumbnailsContainer.querySelectorAll('.thumbnail-item'); items.forEach(item => {item.classList.remove('active'); });const currentItem = thumbnailsContainer.querySelector(`[data-page="${currentPage}"]`); if (currentItem) {currentItem.classList.add('active'); }
}// 加载指定页面
// 修改loadPage函数
function loadPage(pageNum) {if (!doc) {showError('未加载PDF文件，请检查文件路径。');return;}doc.getPage(pageNum).then(function (page) {while (container.firstChild) {container.removeChild(container.firstChild); }const defaultViewport = page.getViewport({ scale: scale });const containerWidth = container.clientWidth; const containerHeight = container.clientHeight; const newScale = Math.min( containerWidth / defaultViewport.width, containerHeight / defaultViewport.height );const finalScale = Math.max(0.5, Math.min(2.0, newScale));const viewport = page.getViewport({ scale: scale,rotation: rotation});const canvas = document.createElement('canvas'); canvas.id = 'pdf-canvas';container.appendChild(canvas); adjustCanvasSize(canvas, viewport);const context = canvas.getContext('2d'); if (!context) {showError('无法获取Canvas上下文，请检查浏览器支持。');return;}page.render({ canvasContext: context,viewport: viewport}).promise.then(() => {console.log('Page rendered successfully');hideError();// 初始化偏移量viewportOffsetX = (container.clientWidth - canvas.width) / 2;viewportOffsetY = 0;updateCanvasPosition();}).catch(error => {console.error('Error rendering page:', error);showError(`渲染页面时出错：${error.message}`); });document.getElementById('status-bar').textContent =`第 ${pageNum} 页 / 共 ${doc.numPages} 页 | 缩放比例: ${Number(scale.toFixed(1)) * 100}% | 旋转: ${rotation}°`;}).catch(error => {console.error('Error getting page:', error);showError(`获取页面时出错：${error.message}`); });}// 调整Canvas尺寸以适应页面内容
function adjustCanvasSize(canvas, viewport) {canvas.width = viewport.width; canvas.height = viewport.height; const containerRect = container.getBoundingClientRect(); const canvasRect = canvas.getBoundingClientRect(); canvas.style.left = `${(containerRect.width - canvasRect.width) / 2}px`;canvas.style.top = `${(containerRect.height - canvasRect.height) / 2}px`;
}// 修改导航函数
function firstPage() {currentPage = 1;loadPage(currentPage);
}function prevPage() {currentPage = Math.max(1, currentPage - 1);loadPage(currentPage);
}function nextPage() {currentPage = Math.min(doc.numPages, currentPage + 1);loadPage(currentPage);
}function lastPage() {currentPage = doc.numPages; loadPage(currentPage);
}// 缩放功能
function zoomIn() {scale = Math.min(2.0, scale + 0.1);zoomControl.value = scale.toString(); updateZoomButtons();loadPage(currentPage);
}function zoomOut() {scale = Math.max(0.5, scale - 0.1);zoomControl.value = scale.toString(); updateZoomButtons();loadPage(currentPage);
}// 错误提示功能
function showError(message) {const errorDiv = document.createElement('div'); errorDiv.className = 'error-message';errorDiv.textContent = message;document.body.appendChild(errorDiv);
}function hideError() {const errorDiv = document.querySelector('.error-message'); if (errorDiv) {errorDiv.remove(); }
}// 旋转功能
function rotateClockwise() {rotation += 90;if (rotation >= 360) rotation = 0;localStorage.setItem('pdfRotation', rotation);loadPage(currentPage);
}function rotateCounterClockwise() {rotation -= 90;if (rotation < 0) rotation += 360;localStorage.setItem('pdfRotation', rotation);loadPage(currentPage);
}// 初始化PDF阅读器
window.onload = function () {const fileUrl = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'; loadPDF(fileUrl);// 恢复旋转状态 if (savedRotation !== null) {rotation = parseInt(savedRotation);loadPage(currentPage);}// 加载保存的书签 loadSavedBookmarks();// 新增事件监听const PDF = document.getElementById('pdf-container'); console.log(PDF);PDF.addEventListener('mousedown', startDrag);PDF.addEventListener('mousemove', drag);PDF.addEventListener('mouseup', stopDrag);PDF.addEventListener('wheel', zoomWithWheel);PDF.addEventListener('dblclick', resetPosition);const currentTheme = localStorage.getItem('theme') || 'dark';if (currentTheme === 'light') {document.body.classList.add('light-theme'); }};// 新增拖拽功能
function startDrag(e) {if (e.button === 0) { // 左键点击isDragging = true;lastX = e.clientX; lastY = e.clientY; }
}// 双击还原
function resetPosition(e) {canvas = document.getElementById("pdf-canvas");viewportOffsetX = (container.clientWidth - canvas.width) / 2;viewportOffsetY = 0;updateCanvasPosition();
}function drag(e) {if (isDragging) {const deltaX = e.clientX - lastX;const deltaY = e.clientY - lastY;// 更新偏移量viewportOffsetX += deltaX;viewportOffsetY += deltaY;// 限制偏移范围const canvas = document.getElementById('pdf-canvas'); // 更新canvas位置updateCanvasPosition();lastX = e.clientX; lastY = e.clientY; }
}function stopDrag() {isDragging = false;
}// 新增滚轮缩放功能
function zoomWithWheel(e) {e.preventDefault(); const delta = e.deltaY; if (delta > 0) {zoomOut();} else {zoomIn();}
}// 更新canvas位置
function updateCanvasPosition() {const canvas = document.getElementById('pdf-canvas'); if (canvas) {canvas.style.left = `${viewportOffsetX}px`;canvas.style.top = `${viewportOffsetY}px`;}
}/*** 更新缩放按钮的显示 */
function updateZoomButtons() {const buttons = document.querySelectorAll('button'); buttons.forEach(button => {if (button.onclick === zoomIn) {button.textContent = `放大 (${scale.toFixed(1)})`; } else if (button.onclick === zoomOut) {button.textContent = `缩小 (${scale.toFixed(1)})`; }});
}/*** 处理滚动条输入事件 */
zoomControl.addEventListener('input', function (e) {const inputValue = parseFloat(e.target.value); // 反向计算 scale 值 scale = inputValue - 0.1;updateZoomButtons();// 使用节流处理以优化性能 throttledLoadPage(currentPage);
});/*** 节流函数 * @param {function} func 目标函数 * @param {number} wait 延迟时间（毫秒）* @returns {function} 节流后的函数 */
function throttle(func, wait) {let timeout;return function (...args) {if (!timeout) {func.apply(this, args);timeout = setTimeout(() => {timeout = null;}, wait);}};
}// 对 loadPage 进行节流处理
const throttledLoadPage = throttle(loadPage, 100);// 监听窗口调整大小事件
window.addEventListener('resize', function () {if (doc && currentPage) {loadPage(currentPage);}
});// 切换书签面板显示状态
function toggleBookmarkPanel() {const isHidden = bookmarksPanel.style.display === 'none';bookmarksPanel.style.display = isHidden ? 'block' : 'none';if (isHidden) {loadBookmarks();}
}// 关闭书签面板
function closeBookmarkPanel() {bookmarksPanel.style.display = 'none';
}// 添加当前页面为书签
function addBookmark() {const bookmarkLabel = document.getElementById('bookmarkLabel').value.trim(); if (!bookmarkLabel) {showError('请输入书签名称');return;}const bookmark = {page: currentPage,scale: scale,label: bookmarkLabel };bookmarks.push(bookmark); saveBookmarks();loadBookmarks();document.getElementById('bookmarkLabel').value = ''; // 清空输入框
}// 加载并显示所有书签
function loadBookmarks() {const bookmarksList = document.getElementById('bookmarks-list'); bookmarksList.innerHTML = '';bookmarks.forEach((bookmark, index) => {const li = document.createElement('li'); li.innerHTML = `<span>${bookmark.label}</span> <button onclick="jumpToBookmark(${index})">跳转</button><button onclick="deleteBookmark(${index})">删除</button>`;li.style.backgroundColor = '#4CAF50';li.style.color = 'white';li.style.padding = '8px';li.style.margin = '4px 0';li.style.borderRadius = '4px';bookmarksList.appendChild(li); });
}// 删除指定索引的书签
function deleteBookmark(index) {bookmarks.splice(index, 1);saveBookmarks();loadBookmarks();
}// 清除所有书签
function clearBookmarks() {bookmarks = [];saveBookmarks();loadBookmarks();
}// 跳转到指定书签
function jumpToBookmark(index) {const bookmark = bookmarks[index];currentPage = bookmark.page; scale = bookmark.scale; loadPage(currentPage);
}// 保存书签到 localStorage
function saveBookmarks() {localStorage.setItem('pdfBookmarks', JSON.stringify(bookmarks));
}// 加载保存的书签
function loadSavedBookmarks() {const saved = localStorage.getItem('pdfBookmarks'); if (saved) {bookmarks = JSON.parse(saved); loadBookmarks();}
}function toggleBookmarkPanel() {const modal = document.getElementById('bookmarks-modal'); modal.style.display = 'block';loadBookmarks();
}function closeBookmarkPanel() {const modal = document.getElementById('bookmarks-modal'); modal.style.display = 'none';
}// 加载缩略图
function loadThumbnail(pageNum, canvas) {doc.getPage(pageNum).then(function (page) {const viewport = page.getViewport({ scale: 0.5 });canvas.width = viewport.width; canvas.height = viewport.height; const context = canvas.getContext('2d'); if (!context) return;page.render({ canvasContext: context,viewport: viewport}).promise.then(() => {if (pageNum === currentPage) {thumbnailItem.classList.add('active'); }});});
}function toggleTheme() {document.body.classList.toggle('light-theme'); const root = document.documentElement; root.style.setProperty('--background-color', document.body.classList.contains('light-theme') ? '#f5f5f5' : '#1a1a1a');root.style.setProperty('--surface-color', document.body.classList.contains('light-theme') ? '#ffffff' : '#2d2d2d');root.style.setProperty('--toolbar-bg', document.body.classList.contains('light-theme') ? '#f0f0f0' : '#333333');root.style.setProperty('--text-color', document.body.classList.contains('light-theme') ? '#333333' : '#ffffff');root.style.setProperty('--error-color', document.body.classList.contains('light-theme') ? '#cc0000' : '#ff4444');}
相关文章：
Javascript网页设计案例：通过PDF.js实现一款PDF阅读器，包括预览、页面旋转、页面切换、放大缩小、黑夜模式等功能
前言 目前功能包括： 切换到首页。切换到尾页。上一页。下一页。添加标签。标签管理页面旋转页面随意拖动双击后还原位置 其实按照自己的预期来说，有很多功能还没有开发完，配色也没有全都搞完，先发出来吧，后期有需要…...
js考核第三题
题三：随机点名 要求： 分为上下两个部分，上方为显示区域，下方为控制区域。显示区域显示五十位群成员的学号和姓名，控制区域由开始和结束两个按钮 组成。点击开始按钮，显示区域里的内容开始滚动，…...
新型基于Go语言的恶意软件利用Telegram作为C2通信渠道
研究人员发现了一种新型后门恶意软件，使用Go语言编写，并利用Telegram作为其命令与控制（C2）通信渠道。尽管该恶意软件似乎仍处于开发阶段，但它已经具备完整的功能，能够执行多种恶意活动。这种创新的C2通信方…...
【Python 语法】Python 正则表达式（regular expressions, regex）
1. 基本语法1.1 字符匹配1.2 元字符1.3 特殊字符1.4 分组和捕获1.5 断言2. 常用函数2.1 `re.match()`2.2 `re.search()`2.3 `re.findall()`2.4 `re.sub()`2.5 `re.split()`3. 进阶用法3.1 捕获组3.2 非捕获组3.3 预查Python 中的**正则表达式（regular expressions, regex）**是…...
STM32 如何使用DMA和获取ADC
目录 背景 摇杆的原理 程序 端口配置 ADC 配置 DMA配置 背景 DMA是一种计算机技术，允许某些硬件子系统直接访问系统内存，而不需要中央处理器（CPU）的介入，从而减轻CPU的负担。我们可以通过DMA来从外设…...
【原创】vue-element-admin-plus完成编辑页面中嵌套列表功能
前言 vue-element-admin-plus对于复杂业务的支持程度确实不怎么样，我这里就遇到了编辑页面中还要嵌套列表的真实案例，比如字典，主字典嵌套子信息，类似于一个树状结构。目前vue-element-admin-plus给出的例子是无法满足这个需求的…...
程序控制)
Java零基础入门笔记：(3)程序控制
前言 本笔记是学习狂神的java教程，建议配合视频，学习体验更佳。 【狂神说Java】Java零基础学习视频通俗易懂_哔哩哔哩_bilibili Scanner对象 之前我们学的基本语法中我们并没有实现程序和人的交互，但是Java给我们提供了这样一个工具类&…...
拷打，数据库面经！
数据库必会面试题 1. 请解释数据库中的MVCC（多版本并发控制）机制，并说明其在MySQL InnoDB中的具体实现方式？ 答案： MVCC是一种通过维护数据的历史版本实现高并发的技术，允许读操作不阻塞写操作࿰…...
Docker+DockerCompose+Harbor安装
安装docker # 安装yum工具 yum install yum-utils -y# 配置yum源 yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo# 安装docker yum install -y docker-ce-25.0.3 docker-ce-cli-25.0.3 containerd.io# 加载镜像 systemctl d…...
论文笔记（七十二）Reward Centering（一）
Reward Centering（一） 文章概括摘要1 奖励中心化理论 文章概括 引用： article{naik2024reward,title{Reward Centering},author{Naik, Abhishek and Wan, Yi and Tomar, Manan and Sutton, Richard S},journal{arXiv preprint arXiv:2405.0…...
在springboot加vue项目中加入图形验证码
后端 首先先要创建一个CaptchaController的类，可以在下面的代码中看到 在getCaptcha的方法里面写好了生成随机的4位小写字母或数字的验证码，然后通过BufferedImage类变为图片，顺便加上了干扰线。之后把图片转为Base64编码方便传给前端 为了…...
【系列专栏】银行IT的云原生架构-存储架构-数据库部署 10
银行 IT 的云原生架构：存储架构（数据库部署） 一、引言 在银行 IT 云原生架构的构建中，存储架构作为关键支撑，其性能、可靠性和扩展性直接影响着银行各类业务系统的运行效率与数据安全。而数据库作为数据存储与管理的…...
OpenGL ES -＞ 投影变换矩阵完美解决绘制GLSurfaceView绘制图形拉伸问题
GLSurfaceView绘制图形拉伸问题 假如在XML文件中声明GLSurfaceView的宽高为 android:layout_width"match_parent"android:layout_height"match_parent GLSurfaceView绘制的图形在Open GL ES坐标系中，而Open GL ES坐标系会根据GLSurfaceView的宽高将…...
【Three.js】JS 3D library（一个月进化史）
#春节过完了，该继续投入学习了~ 作为一个平面开发者，想要增进更多的技能，掌握web3D开发# 前置知识与技能 1. JavaScript 基础 - 掌握ES6语法（类、模块、箭头函数、解构等） - 熟悉异步编程（Promise、…...
在 debian 12 上安装 mysqlclient 报错
报错如下 Looking in indexes: https://pypi.tuna.tsinghua.edu.cn/simple Collecting mysqlclientUsing cached https://pypi.tuna.tsinghua.edu.cn/packages/61/68/810093cb579daae426794bbd9d88aa830fae296e85172d18cb0f0e5dd4bc/mysqlclient-2.2.7.tar.gz (91 kB)Installi…...
wordpress主题插件开发中高频使用的38个函数
核心模板函数 get_header()/get_footer()/get_sidebar() – 加载模板部件 the_title()/the_content()/the_excerpt() – 显示文章标题、内容、摘要 the_post() – 循环中获取文章数据 bloginfo(‘url’) – 获取站点URL wp_head()/wp_footer() – 输出头部/尾部代码 wp_n…...
BMS项目-面试及答疑整理
1. SOC计算用的什么原理实现的？ bms目前计算SOC使用的安时积分+开路电压首先得对电池有一个抽象得概念，把电池比作游泳池，电量比作游泳池里面的水，电流比作流入和流出得水流，那么充电也就是往游泳池里面灌入水流安时积分：对水流进行一个实时监测，比如1S一次监测，那么每…...
js第十二题
题十二：轮播图 要求： 1.鼠标不在图片上方时，进行自动轮播，并且左右箭头不会显示；当鼠标放在图片上方时，停止轮播，并且左右箭头会显示； 2.图片切换之后，图片中下方的小…...
LeetCode-76.最小覆盖子串
1、题目描述： 给你一个字符串 s 、一个字符串 t 。返回 s 中涵盖 t 所有字符的最小子串。如果 s 中不存在涵盖 t 所有字符的子串，则返回空字符串 "" 。 注意： 对于 t 中重复字符，我们寻找的子字符串中该字符数量必须…...
CAS单点登录（第7版）20.用户界面
如有疑问，请看视频：CAS单点登录（第7版） 用户界面 概述 概述 对 CAS 用户界面 （UI） 进行品牌化涉及编辑 CSS 样式表以及一小部分相对简单的 HTML 包含文件，也称为视图。（可选&…...
【强化学习的数学原理】第08课-值函数近似-笔记
学习资料：bilibili 西湖大学赵世钰老师的【强化学习的数学原理】课程。链接：强化学习的数学原理 西湖大学 赵世钰 文章目录 一、例子：曲线拟合二、原理-目标函数介绍三、原理-优化算法和函数选择四、原理-示例与分析五、Sarsa和Q-learning六、…...
基于css实现正六边形的三种方案
方案一：通过旋转三个长方形生成正六边形 分析： 如下图所示，我们可以通过旋转三个长方形来得到一个正六边形。疑问： 1. 长方形的宽高分别是多少？ 设正六边形的边长是100，基于一些数学常识，可以…...
React VS Vue
React 和 Vue 是目前最流行的两个前端框架，它们在设计理念、生态系统和开发体验上各有特点。以下是对 React 和 Vue 的全方位对比： 1. 核心设计理念 React 库而非框架：React 是一个用于构建 UI 的库，专注于视图层，其…...
CMake 编译工具
在使用 CMake 时，你可以通过指定工具链文件来设置编译器（如 GCC、G 或 Clang）。以下是具体步骤： 1. 创建工具链文件 首先，创建一个工具链文件（例如 toolchain.cmake），并在其中指定…...
el-tree选中数据重组成树
vueelement-ui 实现el-tree选择重新生成一个已选中的值组成新的数据树，效果如下 <template><div class"flex"><el-tree class"tree-row" :data"list" ref"tree" :props"{children: children, label: …...
IO、NIO解读和不同点，以及常用的文件流操作方法
java高级——IO、NIO解读和不同点，以及常用的文件流操作方法 前情提要文章介绍1. 什么是IO1.1 节点的分类1.2 传输方式 2. 七大传输方式解读2.1 File类解读2.1.1 创建文件的三种方式2.2.2 File的常用方法2.2.3 如何正确认识FileUtils 2.2 字节流（核心&am…...
51单片机-按键
1、独立按键 1.1、按键介绍 轻触开关是一种电子开关，使用时，轻轻按开关按钮就可使开关接通，当松开手时，开关断开。 1.2、独立按键原理 按键在闭合和断开时，触点会存在抖动现象。P2\P3\P1都是准双向IO口，…...
Spring Boot Actuator 监控✨
Spring Boot Actuator 是 Spring Boot 提供的一个强大的监控和管理工具，它可以帮助你深入了解和监控你的应用程序的运行状态。通过 Actuator，你可以获取应用程序的健康状况、内存使用情况、线程信息、HTTP 请求跟踪等。🚀 核心知识点 &#…...
SpringBoot论坛网站 – 功能详解与部署教程
项目概述 《SpringBoot的论坛网站》是一个基于SpringBoot框架开发的现代化论坛平台，旨在为用户提供一个便捷的交流空间。该项目不仅功能丰富，还具备良好的扩展性和易用性，适合用于学习、分享和讨论各类话题。以下是项目的核心功能模块和部署…...
俄罗斯方块游戏完整代码示例
以下是一个基于Cocos Creator引擎开发的俄罗斯方块游戏的完整代码示例。该游戏实现了俄罗斯方块的基本功能，并且代码整合在单个文件中，无需任何外部依赖，可以直接在浏览器中运行。 1. 创建Cocos Creator项目 首先，确保你已经安装了…...
【设计模式】【结构型模式】组合模式（Composite）
👋hi，我不是一名外包公司的员工，也不会偷吃茶水间的零食，我的梦想是能写高端CRUD 🔥 2025本人正在沉淀中… 博客更新速度 👍 欢迎点赞、收藏、关注，跟上我的更新节奏 🎵 当你的天空突…...
【设计模式】03-理解常见设计模式-行为型模式（专栏完结）
前言 前面我们介绍完创建型模式和创建型模式，这篇介绍最后的行为型模式，也是【设计模式】专栏的最后一篇。 一、概述 行为型模式主要用于处理对象之间的交互和职责分配，以实现更灵活的行为和更好的协作。 二、常见的行为型模式 1、观察者模…...
Qt 6.8版本 自制windows下运行软件＜一＞——串口调试助手
自制串口调试助手 哔哩哔哩效果展示 一、 说明 本人在读学生，跟随哔哩哔哩网站北京迅为公司的教学视频，进行学习qt，由于视频中的实现过程是利用ui界面的实现，本人在学习过程中，通过完全敲代码的形式，实现同…...
Qt——静态函数中发送信号方法总结（不需要通过类内部信号与槽实现，关键是清楚你发送的信号源自哪个对象）
【系列专栏】：博主结合工作实践输出的，解决实际问题的专栏，朋友们看过来！ 《项目案例分享》 《极客DIY开源分享》 《嵌入式通用开发实战》 《C++语言开发基础总结》 《从0到1学习嵌入式Linux开发》 《QT开发实战》 《Android开发实战》...
深入解析 vLLM：高性能 LLM 服务框架的架构之美（一）原理与解析
修改内容时间2.4.1处理请求的流程，引用更好的流程图2025.02.11首发2025.02.08 深入解析 vLLM：高性能 LLM 服务框架的架构之美（一）原理与解析 深入解析 vLLM：高性能 LLM 服务框架的架构之美（二）…...
关于视频去水印的一点尝试
一. 视频去水印的几种方法 1. 使用ffmpeg delogo滤镜 delogo 滤镜的原理是通过插值算法，用水印周围的像素填充水印的位置。 示例： ffmpeg -i input.mp4 -filter_complex "[0:v]delogox420:y920:w1070:h60" output.mp4 该命令表示通过滤镜…...
前端常见面试题-2025
vue4.0 Vue.js 4.0 是在 2021 年 9 月发布。Vue.js 4.0 是 Vue.js 的一个重要版本，引入了许多新特性和改进，旨在提升开发者的体验和性能。以下是一些关键的更新和新特性： Composition API 重构：Vue 3 引入了 Composition API 作为…...
JavaEE-SpringBoot快速入门
文章目录 本节目标Maven什么是Maven创建一个Maven项目maven项目功能maven的依赖管理全球仓库, 私服, 本地服务器, 配置国内镜像 第一个SpringBoot项目创建项目运行SpringBoot程序 SpringBoot原理初步Web服务器 总结 本节目标 了解什么是maven, 配置国内源使用Springboot创建项…...
盛铂科技 SMF106 低相位噪声贴片式频率综合器模块
在现代通信和电子设备领域，频率综合器作为关键组件，其性能优劣直接影响系统的整体表现。盛铂科技的 SMF106 低相位噪声贴片式频率综合器，以其卓越的性能和独特设计，成为众多高性能系统的选择。 一、频率覆盖范围广，步进…...
前端【技术方案】重构项目
1. 明确重构目标 优化性能 减少页面加载时间降低资源占用 提升代码可维护性 更规范的代码风格更清晰的代码结构更明确的模块设计 扩展功能 为项目添加新功能改进现有功能 2. 评估项目现状 审查代码 全面检查现有代码，找出代码中的问题，如代码冗余、耦合…...
第十六天 HarmonyOS WebView开发实战：从加载网页到与JavaScript交互
HarmonyOS WebView开发实战：从加载网页到与JavaScript交互 一、WebView基础与HarmonyOS特性解析 在移动应用开发中，WebView作为内嵌浏览器组件，在HarmonyOS（鸿蒙系统）中扮演着重要角色。它不仅能够加载本地和远程网页…...
Unity学习part2
为bilibili教程【【Unity教程】零基础带你从小白到超神】 https://www.bilibili.com/video/BV1gQ4y1e7SS/?p50&share_sourcecopy_web&vd_source6e7a3cbb802eb986578ad26fae1eeaab的笔记 1、灯光的使用 定向光模拟太阳，是平行光。旋转定向光，光…...
贪吃蛇游戏
贪吃蛇 一、html <div class"container" id"app"></div><script src"./js/index.js"></script>二、css * {margin: 0;top: 0;} .set {margin: 15px auto;width: 600px; } .container {width: 600px;height: 600px;bac…...
docker修改镜像默认存储路径（基于 WSL2 的迁移方法）
打开powershell窗口 任意地方shift右键 1、停止 WSL wsl --shutdown2、导出数据 wsl --export docker-desktop-data E:\docker\DockerDesktopdata\docker-desktop-data.tar wsl --export docker-desktop E:\docker\DockerDesktop\docker-desktop.tar3、取消注册 wsl --un…...
C#+SqlSugar实现主从库读写分离
在使用 **SqlSugar** 进行分库操作时，可以通过配置多个数据库连接，并根据业务逻辑动态切换数据库。以下是一个完整的分库示例，展示如何实现分库功能。 --- ### **1. 安装 NuGet 包** 安装 SqlSugarCore： bash dotnet add packag…...
从无序到有序：上北智信通过深度数据分析改善会议室资源配置
当前企业普遍面临会议室资源管理难题，预约机制不完善和临时会议多导致资源调度不合理，既有空置又有过度拥挤现象。 针对上述问题，上北智信采用了专业数据分析手段，巧妙融合楼层平面图、环形图、折线图和柱形图等多种可视化工具&a…...
以太网详解（八）传输层协议：TCP/UDP 协议
文章目录 传输层协议概述为什么需要传输层？传输层功能网络层与传输层在实现 “端到端” 传输的异同两类服务:面向连接/无连接服务 传输控制协议 TCPTCP 协议数据单元格式TCP 的重传机制快重传和快恢复快重传举例快恢复算法 用户数据报协议 UDPUDP 概述UDP 基本工作过…...
CentOS 8 配置bond
CentOS 8 网络配置的详细步骤和对应的配置文件内容。 1. 配置聚合网卡（Bonding） 配置intranet聚合网卡 在/etc/sysconfig/network-scripts/目录下创建ifcfg-intranet文件，内容如下： TYPE=Bond NAME=intranet DEVICE=intranet ONBOOT=yes BOOTPROTO=none IPADDR=10.2.1.22…...
C语言基础16：二维数组、字符数组
二维数组 定义 二维数组本质上是一个行列式的组合，也就是说二维数组由行和列两部分组成。属于多维数组，二维数组数据是通过行列进行解读。 二维数组可被视为一个特殊的一维数组，相当于二维数组又是一个一维数组，只不过它的元素…...
Java 同步锁性能的最佳实践：从理论到实践的完整指南
目录 一、同步锁性能分析 （一）性能验证说明 1. 使用同步锁的代码示例 2. 不使用同步锁的代码示例 3. 结果与讨论 （二）案例初步优化分析说明 1. 使用AtomicInteger原子类尝试优化分析 2. 对AtomicInteger原子类进一步优化 …...