471 lines
14 KiB
HTML
471 lines
14 KiB
HTML
<!-- 使用说明
|
||
保存文件：将上面的代码保存为 gold_test.html文件。
|
||
启动本地服务器：
|
||
# 在包含 gold_test.html 的目录中运行
|
||
python3 -m http.server 8000
|
||
或使用其他HTTP服务器。
|
||
访问测试页面：在浏览器中打开 http://localhost:8000/gold_test.html
|
||
修改监控脚本配置：
|
||
在您的 GoldPrice.js脚本中，修改以下配置：
|
||
// 将原来的工商银行URL替换为测试页面地址
|
||
const TARGET_URL = 'http://localhost:8000/gold_test.html';
|
||
|
||
// 价格选择器保持不变（与测试页面一致）
|
||
const PRICE_SELECTOR = '#activeprice_080020000521'; -->
|
||
|
||
<!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>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
font-family: 'Microsoft YaHei', Arial, sans-serif;
|
||
}
|
||
|
||
body {
|
||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||
min-height: 100vh;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
background-color: white;
|
||
border-radius: 20px;
|
||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
|
||
width: 100%;
|
||
max-width: 800px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.header {
|
||
background: linear-gradient(to right, #d4af37, #b8951e);
|
||
color: white;
|
||
padding: 25px 30px;
|
||
text-align: center;
|
||
}
|
||
|
||
.header h1 {
|
||
font-size: 28px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.header p {
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.content {
|
||
padding: 30px;
|
||
}
|
||
|
||
.price-display {
|
||
text-align: center;
|
||
margin-bottom: 40px;
|
||
padding: 20px;
|
||
background-color: #f8f9fa;
|
||
border-radius: 12px;
|
||
border: 2px solid #e9ecef;
|
||
}
|
||
|
||
.price-label {
|
||
font-size: 18px;
|
||
color: #6c757d;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.current-price {
|
||
font-size: 52px;
|
||
font-weight: bold;
|
||
color: #d4af37;
|
||
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.price-controls {
|
||
background-color: #f8f9fa;
|
||
border-radius: 12px;
|
||
padding: 25px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.control-group {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.control-group label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
font-weight: 600;
|
||
color: #495057;
|
||
}
|
||
|
||
.control-group input {
|
||
width: 100%;
|
||
padding: 12px 15px;
|
||
border: 2px solid #dee2e6;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
transition: border-color 0.3s;
|
||
}
|
||
|
||
.control-group input:focus {
|
||
border-color: #d4af37;
|
||
outline: none;
|
||
}
|
||
|
||
.buttons {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 15px;
|
||
margin-top: 25px;
|
||
}
|
||
|
||
button {
|
||
flex: 1;
|
||
min-width: 120px;
|
||
padding: 14px 20px;
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.set-btn {
|
||
background-color: #28a745;
|
||
color: white;
|
||
}
|
||
|
||
.set-btn:hover {
|
||
background-color: #218838;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.increase-btn {
|
||
background-color: #007bff;
|
||
color: white;
|
||
}
|
||
|
||
.increase-btn:hover {
|
||
background-color: #0069d9;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.decrease-btn {
|
||
background-color: #dc3545;
|
||
color: white;
|
||
}
|
||
|
||
.decrease-btn:hover {
|
||
background-color: #c82333;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.reset-btn {
|
||
background-color: #6c757d;
|
||
color: white;
|
||
}
|
||
|
||
.reset-btn:hover {
|
||
background-color: #5a6268;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.price-history {
|
||
background-color: #f8f9fa;
|
||
border-radius: 12px;
|
||
padding: 25px;
|
||
}
|
||
|
||
.price-history h3 {
|
||
margin-bottom: 15px;
|
||
color: #495057;
|
||
}
|
||
|
||
.history-list {
|
||
list-style-type: none;
|
||
max-height: 200px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.history-list li {
|
||
padding: 10px 15px;
|
||
border-bottom: 1px solid #dee2e6;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.history-list li:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.history-time {
|
||
color: #6c757d;
|
||
}
|
||
|
||
.history-price {
|
||
font-weight: 600;
|
||
color: #d4af37;
|
||
}
|
||
|
||
.instructions {
|
||
margin-top: 25px;
|
||
padding: 20px;
|
||
background-color: #e7f3ff;
|
||
border-radius: 12px;
|
||
border-left: 5px solid #007bff;
|
||
}
|
||
|
||
.instructions h3 {
|
||
color: #0066cc;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.instructions p {
|
||
line-height: 1.6;
|
||
color: #495057;
|
||
}
|
||
|
||
.instructions code {
|
||
background-color: #f1f1f1;
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
font-family: 'Courier New', monospace;
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.content {
|
||
padding: 20px;
|
||
}
|
||
|
||
.current-price {
|
||
font-size: 42px;
|
||
}
|
||
|
||
button {
|
||
min-width: 100%;
|
||
}
|
||
}
|
||
|
||
.price-change {
|
||
font-size: 18px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.positive {
|
||
color: #28a745;
|
||
}
|
||
|
||
.negative {
|
||
color: #dc3545;
|
||
}
|
||
|
||
.neutral {
|
||
color: #6c757d;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="header">
|
||
<h1>黄金价格测试页面</h1>
|
||
<p>用于测试黄金价格监控脚本的模拟页面</p>
|
||
</div>
|
||
|
||
<div class="content">
|
||
<div class="price-display">
|
||
<div class="price-label">当前黄金价格 (元/克)</div>
|
||
<div id="activeprice_080020000521" class="current-price">1150.22</div>
|
||
<div id="priceChange" class="price-change neutral">价格未变化</div>
|
||
</div>
|
||
|
||
<div class="price-controls">
|
||
<div class="control-group">
|
||
<label for="priceInput">设置新价格 (元/克)</label>
|
||
<input type="number" id="priceInput" step="0.01" min="0" value="1150.22" placeholder="输入新的黄金价格">
|
||
</div>
|
||
|
||
<div class="buttons">
|
||
<button id="setPriceBtn" class="set-btn">设置价格</button>
|
||
<button id="increaseBtn" class="increase-btn">+5 元</button>
|
||
<button id="decreaseBtn" class="decrease-btn">-5 元</button>
|
||
<button id="resetBtn" class="reset-btn">重置为 1150.22</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="price-history">
|
||
<h3>价格历史记录</h3>
|
||
<ul id="historyList" class="history-list">
|
||
<li>
|
||
<span class="history-time">刚刚</span>
|
||
<span class="history-price">1150.22 元/克</span>
|
||
</li>
|
||
<li>
|
||
<span class="history-time">1分钟前</span>
|
||
<span class="history-price">1149.53 元/克</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="instructions">
|
||
<h3>使用说明</h3>
|
||
<p>1. 此页面模拟了黄金价格页面，价格元素的选择器为 <code>#activeprice_080020000521</code>，与您的监控脚本使用的选择器一致。</p>
|
||
<p>2. 通过上方输入框和按钮可以修改页面显示的黄金价格。</p>
|
||
<p>3. 您可以在本地运行此页面，然后将监控脚本中的 <code>TARGET_URL</code> 修改为此页面的地址（如 <code>http://localhost:8000/test.html</code>）进行测试。</p>
|
||
<p>4. 您可以使用 Python 的简单HTTP服务器运行此页面：<code>python3 -m http.server 8000</code></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 获取DOM元素
|
||
const priceElement = document.getElementById('activeprice_080020000521');
|
||
const priceInput = document.getElementById('priceInput');
|
||
const setPriceBtn = document.getElementById('setPriceBtn');
|
||
const increaseBtn = document.getElementById('increaseBtn');
|
||
const decreaseBtn = document.getElementById('decreaseBtn');
|
||
const resetBtn = document.getElementById('resetBtn');
|
||
const historyList = document.getElementById('historyList');
|
||
const priceChangeElement = document.getElementById('priceChange');
|
||
|
||
// 价格历史记录
|
||
let priceHistory = [
|
||
{ price: 1150.22, time: '刚刚' },
|
||
{ price: 1149.53, time: '1分钟前' }
|
||
];
|
||
|
||
// 上一个价格，用于计算变化
|
||
let previousPrice = 1150.22;
|
||
|
||
// 更新时间显示
|
||
function formatTime() {
|
||
const now = new Date();
|
||
return now.toLocaleTimeString('zh-CN', {
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
second: '2-digit'
|
||
});
|
||
}
|
||
|
||
// 更新价格变化显示
|
||
function updatePriceChange(currentPrice) {
|
||
const change = currentPrice - previousPrice;
|
||
const changePercent = ((change / previousPrice) * 100).toFixed(2);
|
||
|
||
if (change > 0) {
|
||
priceChangeElement.textContent = `+${change.toFixed(2)} 元 (+${changePercent}%)`;
|
||
priceChangeElement.className = 'price-change positive';
|
||
} else if (change < 0) {
|
||
priceChangeElement.textContent = `${change.toFixed(2)} 元 (${changePercent}%)`;
|
||
priceChangeElement.className = 'price-change negative';
|
||
} else {
|
||
priceChangeElement.textContent = '价格未变化';
|
||
priceChangeElement.className = 'price-change neutral';
|
||
}
|
||
}
|
||
|
||
// 更新历史记录
|
||
function updateHistory(newPrice) {
|
||
// 将当前价格添加到历史记录顶部
|
||
priceHistory.unshift({
|
||
price: newPrice,
|
||
time: formatTime()
|
||
});
|
||
|
||
// 只保留最近的10条记录
|
||
if (priceHistory.length > 10) {
|
||
priceHistory.pop();
|
||
}
|
||
|
||
// 更新历史记录显示
|
||
historyList.innerHTML = '';
|
||
priceHistory.forEach(item => {
|
||
const li = document.createElement('li');
|
||
li.innerHTML = `
|
||
<span class="history-time">${item.time}</span>
|
||
<span class="history-price">${item.price.toFixed(2)} 元/克</span>
|
||
`;
|
||
historyList.appendChild(li);
|
||
});
|
||
}
|
||
|
||
// 设置新价格
|
||
function setNewPrice() {
|
||
const newPrice = parseFloat(priceInput.value);
|
||
|
||
if (isNaN(newPrice) || newPrice <= 0) {
|
||
alert('请输入有效的正数价格');
|
||
return;
|
||
}
|
||
|
||
// 更新价格变化显示
|
||
updatePriceChange(newPrice);
|
||
|
||
// 更新页面显示的价格
|
||
priceElement.textContent = newPrice.toFixed(2);
|
||
|
||
// 更新历史记录
|
||
updateHistory(newPrice);
|
||
|
||
// 更新输入框值为新价格
|
||
priceInput.value = newPrice.toFixed(2);
|
||
|
||
// 记录当前价格作为下一次的上一个价格
|
||
previousPrice = newPrice;
|
||
|
||
console.log(`价格已更新为: ${newPrice.toFixed(2)} 元/克`);
|
||
}
|
||
|
||
// 增加价格
|
||
function increasePrice() {
|
||
const currentPrice = parseFloat(priceElement.textContent);
|
||
const newPrice = currentPrice + 5;
|
||
priceInput.value = newPrice.toFixed(2);
|
||
setNewPrice();
|
||
}
|
||
|
||
// 减少价格
|
||
function decreasePrice() {
|
||
const currentPrice = parseFloat(priceElement.textContent);
|
||
const newPrice = Math.max(0, currentPrice - 5);
|
||
priceInput.value = newPrice.toFixed(2);
|
||
setNewPrice();
|
||
}
|
||
|
||
// 重置价格
|
||
function resetPrice() {
|
||
priceInput.value = '1150.22';
|
||
setNewPrice();
|
||
}
|
||
|
||
// 添加事件监听器
|
||
setPriceBtn.addEventListener('click', setNewPrice);
|
||
increaseBtn.addEventListener('click', increasePrice);
|
||
decreaseBtn.addEventListener('click', decreasePrice);
|
||
resetBtn.addEventListener('click', resetPrice);
|
||
|
||
// 允许通过按Enter键设置价格
|
||
priceInput.addEventListener('keypress', function(e) {
|
||
if (e.key === 'Enter') {
|
||
setNewPrice();
|
||
}
|
||
});
|
||
|
||
// 初始化价格变化显示
|
||
updatePriceChange(1150.22);
|
||
|
||
// 初始控制台提示
|
||
console.log('黄金价格测试页面已加载');
|
||
console.log('当前价格元素选择器: #activeprice_080020000521');
|
||
console.log('当前价格: 1150.22 元/克');
|
||
console.log('您可以通过页面上的控件修改价格，然后使用监控脚本抓取测试。');
|
||
</script>
|
||
</body>
|
||
</html> |