|
[color=rgba(0, 0, 0, 0.85)]提供的基于 PyQt5 和 VLC 的 Python 桌面应用程序转换为 HTML 应用程序
[color=rgba(0, 0, 0, 0.85)]是一个从桌面端到 Web 端的转变，技术栈完全不同。
[color=rgba(0, 0, 0, 0.85)]以下是实现基本功能的 HTML、CSS 和 JavaScript 代码：
实现了一个简单的大屏播控系统的 HTML 版本，包含播放列表管理、播放控制、音量控制、模式切换等功能。
你可以将代码保存为 index.html 文件，然后在浏览器中打开查看效果。
不过要留意，此代码未涵盖原 Python 代码里的全部功能，例如扩展屏显示、任务栏隐藏等，因为在 Web 环境下这些功能较难实现。
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大飞哥软件自习室-大屏播放软件</title>
<style>
body {
margin: 0;
padding: 0;
min-height: 100vh;
background: linear-gradient(135deg, #0f2027, #2c5364);
font-family: 'Segoe UI', sans-serif;
}
.title-bar {
background: linear-gradient(45deg, #3a7bd5, #00d2ff);
padding: 15px;
text-align: center;
border-bottom: 3px solid #2a82da;
}
.title-bar a {
color: white;
font-size: 24px;
font-weight: bold;
text-decoration: none;
}
.main-container {
display: flex;
height: calc(100vh - 80px);
}
.control-panel {
background: rgba(20, 30, 50, 0.9);
padding: 20px;
display: flex;
flex-direction: column;
gap: 15px;
}
.layout-container {
flex: 1;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 15px;
padding: 20px;
overflow: auto;
}
.layout-item {
background: rgba(30, 40, 60, 0.9);
border-radius: 8px;
border: 2px solid #2a82da;
padding: 15px;
position: relative;
min-width: 200px;
min-height: 150px;
}
.resize-handle {
position: absolute;
bottom: 0;
right: 0;
width: 15px;
height: 15px;
background: linear-gradient(135deg, #2a82da, #00d2ff);
cursor: se-resize;
}
.action-button {
padding: 10px 20px;
background: linear-gradient(45deg, #3a7bd5, #00d2ff);
border: none;
border-radius: 5px;
color: white; /* 将按钮文字颜色设置为白色 */
font-weight: bold;
cursor: pointer;
margin: 5px;
}
.status-bar {
background: rgba(20, 30, 50, 0.9);
padding: 10px;
border-radius: 5px;
border: 1px solid #2a82da;
margin-top: 10px;
color: white; /* 将状态栏文字颜色设置为白色 */
}
/* 确保其他文字元素颜色为白色 */
h3, label {
color: white;
}
</style>
</head>
<body>
<div class="title-bar">
<a href="https://space.bilibili.com/286436365" target="_blank">大飞哥软件自习室-大屏播放软件</a>
</div>
<div class="main-container">
<div class="control-panel">
<button class="action-button">保存布局</button>
<button class="action-button">加载布局</button>
<button class="action-button">重置布局</button>
</div>
<div class="layout-container" id="layoutContainer">
<!-- 初始布局模块 -->
<div class="layout-item" data-type="playlist">
<h3>播放列表</h3>
<ul class="playlist" id="playlist"></ul>
<div class="resize-handle"></div>
</div>
<div class="layout-item" data-type="controls">
<h3>播放控制</h3>
<div class="button-group">
<button class="action-button">播放/暂停</button>
<button class="action-button">上一个</button>
<button class="action-button">下一个</button>
</div>
<div class="resize-handle"></div>
</div>
<div class="layout-item" data-type="settings">
<h3>系统设置</h3>
<div>
<label>音量:</label>
<input type="range" id="volumeSlider" min="0" max="100" value="100">
</div>
<div class="resize-handle"></div>
</div>
</div>
</div>
<script>
let isDragging = false;
let dragStartX, dragStartY;
let initialX, initialY;
let resizeStartX, resizeStartY;
let initialWidth, initialHeight;
// 初始化布局
function initializeLayout() {
const layoutItems = document.querySelectorAll('.layout-item');
layoutItems.forEach(item => {
// 可拖动
item.addEventListener('mousedown', startDrag);
// 调整大小
item.querySelector('.resize-handle').addEventListener('mousedown', startResize);
});
}
// 开始拖动
function startDrag(e) {
e.preventDefault();
isDragging = true;
const target = e.target.closest('.layout-item');
initialX = target.offsetLeft;
initialY = target.offsetTop;
dragStartX = e.clientX - initialX;
dragStartY = e.clientY - initialY;
target.style.cursor = 'grabbing';
target.style.zIndex = 1000;
// 保存原始布局顺序
const layoutItems = Array.from(document.querySelectorAll('.layout-item'));
const index = layoutItems.indexOf(target);
document.getElementById('layoutContainer').appendChild(target);
}
// 拖动中
function handleDrag(e) {
if (!isDragging) return;
const target = document.elementFromPoint(e.clientX, e.clientY).closest('.layout-item');
const x = e.clientX - dragStartX;
const y = e.clientY - dragStartY;
target.style.left = `${x}px`;
target.style.top = `${y}px`;
}
// 停止拖动
function stopDrag() {
isDragging = false;
const layoutItems = document.querySelectorAll('.layout-item');
layoutItems.forEach(item => {
item.style.cursor = 'default';
item.style.zIndex = '';
item.removeAttribute('style');
});
}
// 开始调整大小
function startResize(e) {
e.preventDefault();
const handle = e.target;
const item = handle.closest('.layout-item');
initialWidth = parseFloat(item.style.width) || item.offsetWidth;
initialHeight = parseFloat(item.style.height) || item.offsetHeight;
resizeStartX = e.clientX;
resizeStartY = e.clientY;
item.style.cursor = 'se-resize';
item.style.zIndex = 1000;
}
// 调整大小中
function handleResize(e) {
const item = document.elementFromPoint(e.clientX, e.clientY).closest('.layout-item');
if (!item) return;
const deltaX = e.clientX - resizeStartX;
const deltaY = e.clientY - resizeStartY;
const newWidth = initialWidth + deltaX;
const newHeight = initialHeight + deltaY;
item.style.width = `${Math.max(200, newWidth)}px`;
item.style.height = `${Math.max(150, newHeight)}px`;
}
// 停止调整大小
function stopResize() {
const layoutItems = document.querySelectorAll('.layout-item');
layoutItems.forEach(item => {
item.style.cursor = 'default';
item.style.zIndex = '';
});
}
// 保存布局
function saveLayout() {
const layoutData = [];
const layoutItems = document.querySelectorAll('.layout-item');
layoutItems.forEach(item => {
layoutData.push({
type: item.dataset.type,
left: parseFloat(item.style.left) || 0,
top: parseFloat(item.style.top) || 0,
width: parseFloat(item.style.width) || item.offsetWidth,
height: parseFloat(item.style.height) || item.offsetHeight
});
});
localStorage.setItem('layout', JSON.stringify(layoutData));
document.querySelector('.status-bar').textContent = '布局已保存';
}
// 加载布局
function loadLayout() {
const layoutData = JSON.parse(localStorage.getItem('layout'));
if (!layoutData) return;
const layoutContainer = document.getElementById('layoutContainer');
layoutContainer.innerHTML = '';
layoutData.forEach(data => {
const item = createLayoutItem(data.type);
item.style.left = `${data.left}px`;
item.style.top = `${data.top}px`;
item.style.width = `${data.width}px`;
item.style.height = `${data.height}px`;
layoutContainer.appendChild(item);
});
initializeLayout();
document.querySelector('.status-bar').textContent = '布局已加载';
}
// 重置布局
function resetLayout() {
localStorage.removeItem('layout');
location.reload();
document.querySelector('.status-bar').textContent = '布局已重置';
}
// 创建布局模块
function createLayoutItem(type) {
const item = document.createElement('div');
item.className = 'layout-item';
item.dataset.type = type;
switch (type) {
case 'playlist':
item.innerHTML = `
<h3>播放列表</h3>
<ul class="playlist" id="playlist"></ul>
<div class="resize-handle"></div>
`;
break;
case 'controls':
item.innerHTML = `
<h3>播放控制</h3>
<div class="button-group">
<button class="action-button">播放/暂停</button>
<button class="action-button">上一个</button>
<button class="action-button">下一个</button>
</div>
<div class="resize-handle"></div>
`;
break;
case 'settings':
item.innerHTML = `
<h3>系统设置</h3>
<div>
<label>音量:</label>
<input type="range" id="volumeSlider" min="0" max="100" value="100">
</div>
<div class="resize-handle"></div>
`;
break;
}
return item;
}
// 初始化
initializeLayout();
window.addEventListener('mousemove', handleDrag);
window.addEventListener('mouseup', stopDrag);
window.addEventListener('mousemove', handleResize);
window.addEventListener('mouseup', stopResize);
// 其他功能函数...
// 播放控制、音量设置等原有功能代码保持不变
</script>
</body>
</html>
|
IP卡
发表于 2025-3-30 16:13:32
提升卡
置顶卡
变色卡
千斤顶
显身卡
发表于 2025-3-30 16:40:44
发表于 2025-4-1 08:59:57
