console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>排列三历史统计工具</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.tab-active { border-bottom: 2px solid #1677ff; color: #1677ff; font-weight: 600; }
.num-ball {
width: 40px; height: 40px; line-height: 40px;
border-radius: 50%; background: #1677ff; color: #fff;
text-align: center; font-weight: bold; display: inline-block;
}
</style>
</head>
<body class="bg-gray-50 text-sm">
<!-- 全局风险提示 -->
<div class="bg-amber-50 text-amber-700 p-3 text-xs leading-relaxed">
温馨提示：开奖结果完全随机，本工具仅做历史数据统计复盘，不构成任何购彩建议，请勿沉迷。
</div>
<!-- 标签导航 -->
<div class="bg-white flex border-b">
<div class="tab-btn tab-active flex-1 text-center py-3 cursor-pointer" data-tab="history">开奖历史</div>
<div class="tab-btn flex-1 text-center py-3 cursor-pointer text-gray-500" data-tab="hotcold">冷热统计</div>
<div class="tab-btn flex-1 text-center py-3 cursor-pointer text-gray-500" data-tab="trend">走势分析</div>
</div>
<div class="p-3">
<!-- 页面1：开奖历史 + 条件筛选 -->
<div id="tab-history" class="tab-panel">
<!-- 筛选面板 -->
<div class="bg-white rounded-lg p-3 mb-3 shadow-sm">
<div class="font-medium mb-2">条件筛选</div>
<div class="grid grid-cols-2 gap-2 mb-2">
<div>
<label class="text-gray-500 text-xs">和值最小值</label>
<input type="number" id="sumMin" placeholder="0" class="w-full border rounded px-2 py-1 mt-1">
</div>
<div>
<label class="text-gray-500 text-xs">和值最大值</label>
<input type="number" id="sumMax" placeholder="27" class="w-full border rounded px-2 py-1 mt-1">
</div>
<div>
<label class="text-gray-500 text-xs">跨度最小值</label>
<input type="number" id="spanMin" placeholder="0" class="w-full border rounded px-2 py-1 mt-1">
</div>
<div>
<label class="text-gray-500 text-xs">跨度最大值</label>
<input type="number" id="spanMax" placeholder="9" class="w-full border rounded px-2 py-1 mt-1">
</div>
</div>
<div class="mb-2">
<label class="text-gray-500 text-xs">奇偶形态</label>
<select id="oddEven" class="w-full border rounded px-2 py-1 mt-1">
<option value="">全部</option>
<option value="3奇0偶">全奇</option>
<option value="0奇3偶">全偶</option>
<option value="2奇1偶">2奇1偶</option>
<option value="1奇2偶">1奇2偶</option>
</select>
</div>
<div class="flex gap-2">
<button id="filterBtn" class="flex-1 bg-blue-500 text-white py-1.5 rounded">筛选</button>
<button id="resetBtn" class="flex-1 border py-1.5 rounded">重置</button>
</div>
</div>
<!-- 开奖列表 -->
<div id="historyList" class="space-y-2"></div>
</div>
<!-- 页面2：冷热号统计 -->
<div id="tab-hotcold" class="tab-panel hidden">
<div class="bg-white rounded-lg p-3 shadow-sm">
<div class="font-medium mb-3">号码热度排行（近100期）</div>
<div id="hotList" class="grid grid-cols-5 gap-2"></div>
</div>
</div>
<!-- 页面3：走势分析 -->
<div id="tab-trend" class="tab-panel hidden">
<div class="bg-white rounded-lg p-3 mb-3 shadow-sm">
<div class="font-medium mb-3">和值分布（近100期）</div>
<div id="sumChart" class="flex items-end justify-around h-48 border-b pb-1 text-xs"></div>
</div>
<div class="bg-white rounded-lg p-3 shadow-sm">
<div class="font-medium mb-3">跨度分布（近100期）</div>
<div id="spanChart" class="flex items-end justify-around h-40 border-b pb-1 text-xs"></div>
</div>
</div>
</div>
<script>
// ========== 1. 模拟历史数据（可替换为真实数据） ==========
// 真实使用时，把这里替换成你整理的官方历史开奖数据即可
const rawData = []
// 生成100条模拟数据演示用
for (let i = 0; i < 100; i++) {
const period = String(2026280 - i)
const date = `2026-10-${String(20 - i).padStart(2, '0')}`
const n1 = Math.floor(Math.random() * 10)
const n2 = Math.floor(Math.random() * 10)
const n3 = Math.floor(Math.random() * 10)
rawData.push({ period, date, num1: n1, num2: n2, num3: n3 })
}
// ========== 2. 核心统计工具函数 ==========
function calcItemStats(num1, num2, num3) {
const nums = [num1, num2, num3]
const sum = num1 + num2 + num3
const span = Math.max(...nums) - Math.min(...nums)
const oddCount = nums.filter(n => n % 2 === 1).length
const oddEven = `${oddCount}奇${3 - oddCount}偶`
const bigCount = nums.filter(n => n >= 5).length
const bigSmall = `${bigCount}大${3 - bigCount}小`
return { sum, span, oddEven, bigSmall }
}
function calcHotCold(list) {
const count = new Array(10).fill(0)
list.forEach(item => {
count[item.num1]++
count[item.num2]++
count[item.num3]++
})
return count.map((times, num) => ({ num, times })).sort((a, b) => b.times - a.times)
}
function calcDistribution(list, key) {
const map = {}
list.forEach(item => {
const v = item[key]
map[v] = (map[v] || 0) + 1
})
return Object.entries(map)
.map(([value, count]) => ({ value: Number(value), count }))
.sort((a, b) => a.value - b.value)
}
// 预处理所有数据
const fullData = rawData.map(item => ({
...item,
...calcItemStats(item.num1, item.num2, item.num3)
}))
// ========== 3. 渲染开奖历史列表 ==========
function renderHistory(list) {
const container = document.getElementById('historyList')
container.innerHTML = list.map(item => `
<div class="bg-white rounded-lg p-3 shadow-sm">
<div class="flex justify-between text-gray-500 text-xs mb-2">
<span>第${item.period}期</span>
<span>${item.date}</span>
</div>
<div class="flex gap-3 mb-2">
<span class="num-ball">${item.num1}</span>
<span class="num-ball">${item.num2}</span>
<span class="num-ball">${item.num3}</span>
</div>
<div class="flex justify-between text-gray-400 text-xs">
<span>和值：${item.sum}</span>
<span>跨度：${item.span}</span>
<span>${item.oddEven}</span>
<span>${item.bigSmall}</span>
</div>
</div>
`).join('')
}
// ========== 4. 筛选功能 ==========
function filterData() {
const sumMin = Number(document.getElementById('sumMin').value) || 0
const sumMax = Number(document.getElementById('sumMax').value) || 27
const spanMin = Number(document.getElementById('spanMin').value) || 0
const spanMax = Number(document.getElementById('spanMax').value) || 9
const oddEven = document.getElementById('oddEven').value
const result = fullData.filter(item => {
if (item.sum < sumMin || item.sum > sumMax) return false
if (item.span < spanMin || item.span > spanMax) return false
if (oddEven && item.oddEven !== oddEven) return false
return true
})
renderHistory(result)
}
function resetFilter() {
document.getElementById('sumMin').value = ''
document.getElementById('sumMax').value = ''
document.getElementById('spanMin').value = ''
document.getElementById('spanMax').value = ''
document.getElementById('oddEven').value = ''
renderHistory(fullData)
}
// ========== 5. 渲染冷热号 ==========
function renderHotCold() {
const hotList = calcHotCold(fullData.slice(0, 100))
document.getElementById('hotList').innerHTML = hotList.map(item => `
<div class="text-center p-2 bg-blue-50 rounded">
<div class="text-lg font-bold text-blue-600">${item.num}</div>
<div class="text-xs text-gray-500">${item.times}次</div>
</div>
`).join('')
}
// ========== 6. 渲染走势图表 ==========
function renderCharts() {
const data = fullData.slice(0, 100)
const sumDist = calcDistribution(data, 'sum')
const spanDist = calcDistribution(data, 'span')
// 和值柱状图
document.getElementById('sumChart').innerHTML = sumDist.map(item => `
<div class="flex flex-col items-center" style="width:3%">
<div class="text-gray-500">${item.count}</div>
<div class="bg-blue-500 w-full rounded-t" style="height:${item.count * 8}px"></div>
<div class="text-gray-500 mt-1">${item.value}</div>
</div>
`).join('')
// 跨度柱状图
document.getElementById('spanChart').innerHTML = spanDist.map(item => `
<div class="flex flex-col items-center" style="width:8%">
<div class="text-gray-500">${item.count}</div>
<div class="bg-green-500 w-full rounded-t" style="height:${item.count * 10}px"></div>
<div class="text-gray-500 mt-1">${item.value}</div>
</div>
`).join('')
}
// ========== 7. 标签页切换 ==========
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.tab-btn').forEach(b => {
b.classList.remove('tab-active')
b.classList.add('text-gray-500')
})
btn.classList.add('tab-active')
btn.classList.remove('text-gray-500')
const tab = btn.dataset.tab
document.querySelectorAll('.tab-panel').forEach(p => p.classList.add('hidden'))
document.getElementById(`tab-${tab}`).classList.remove('hidden')
// 切换时渲染对应页面
if (tab === 'hotcold') renderHotCold()
if (tab === 'trend') renderCharts()
})
})
// 绑定筛选按钮
document.getElementById('filterBtn').addEventListener('click', filterData)
document.getElementById('resetBtn').addEventListener('click', resetFilter)
// 初始化
renderHistory(fullData)
</script>
</body>
</html>