【项目简介】
这是一个超级可爱的 QQ 每日运势测试网页应用，采用梦幻粉白色系设计，充满少女心的界面风格，输入 QQ 号即可测试今日运势！
![图片[1]-KaiGeQQ凶吉每日测试源码可爱粉白版-胖大海博客资源网](https://pdha.top/wp-content/uploads/pdha.top/2025/06/1749692526384.png)
【主要功能】
- QQ 号测试：输入 5 -12 位 QQ 号码即可开始测试
- 三大运势指标：财运、桃花运、事业运数值评分（1-100 分）
- 签卦系统：随机生成各种有趣的签卦结果
- 星级评价：根据综合运势显示 1 – 7 颗星评级
- 一键复制 QQ 群号功能
【设计特色】
- 粉白梦幻渐变背景
- 独角兽主题头像
- 大量可爱 emoji 装饰元素
- 毛玻璃效果和柔和阴影
- 响应式设计，适配手机和电脑
【使用方法】
- 1. 输入您的 QQ 号码（5-12 位数字）
- 2. 点击 ” 开始测试 ” 按钮
- 3. 查看您的今日运势结果
- 4. 可以点击 ” 重新测试 ” 测试其他 QQ 号
【源码下载】
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QQ凶吉每日测试</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
background: linear-gradient(135deg, #ffb3d1 0%, #ffc3e3 50%, #fff0f8 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
position: relative;
overflow-x: hidden;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20% 20%, rgba(255, 182, 193, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 105, 180, 0.2) 0%, transparent 50%),
radial-gradient(circle at 40% 70%, rgba(255, 182, 193, 0.2) 0%, transparent 50%);
z-index: -1;
}
.container {
background: rgba(255, 255, 255, 0.9);
border-radius: 25px;
padding: 30px;
box-shadow: 0 20px 40px rgba(255, 105, 180, 0.2);
max-width: 400px;
width: 100%;
text-align: center;
backdrop-filter: blur(15px);
border: 2px solid rgba(255, 182, 193, 0.3);
position: relative;
}
.container::before {
content: '🌸✨💕🦄🌙⭐️🍭🎀';
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 12px;
color: #ff69b4;
border: 2px solid rgba(255, 182, 193, 0.5);
}
.header {
margin-bottom: 30px;
}
.avatar {
width: 70px;
height: 70px;
border-radius: 50%;
background: linear-gradient(135deg, #ff69b4, #ff1493);
margin: 0 auto 15px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 28px;
font-weight: bold;
box-shadow: 0 8px 16px rgba(255, 105, 180, 0.3);
border: 3px solid white;
}
.title {
font-size: 22px;
color: #ff1493;
margin-bottom: 8px;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(255, 105, 180, 0.3);
}
.subtitle {
color: #ff69b4;
font-size: 14px;
margin-bottom: 10px;
}
.cute-decoration {
font-size: 16px;
margin: 10px 0;
opacity: 0.8;
}
.input-section {
margin-bottom: 30px;
}
.qq-input {
width: 100%;
padding: 15px;
border: 2px solid #e0e0e0;
border-radius: 10px;
font-size: 16px;
text-align: center;
margin-bottom: 15px;
transition: border-color 0.3s;
}
.qq-input:focus {
outline: none;
border-color: #ff69b4;
box-shadow: 0 0 10px rgba(255, 105, 180, 0.3);
}
.test-btn {
width: 100%;
padding: 15px;
background: linear-gradient(135deg, #ff69b4, #ff1493);
color: white;
border: none;
border-radius: 15px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3);
font-weight: bold;
}
.test-btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(255, 105, 180, 0.4);
}
.result-section {
display: none;
text-align: left;
}
.fortune-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
}
.fortune-item:last-child {
border-bottom: none;
}
.fortune-label {
color: #333;
font-weight: 500;
}
.fortune-value {
font-weight: bold;
color: #ff1493;
font-size: 18px;
}
.divination {
background: linear-gradient(135deg, #ffcccb, #ffb6c1);
border-radius: 15px;
padding: 18px;
margin: 20px 0;
text-align: center;
border: 2px solid rgba(255, 105, 180, 0.2);
box-shadow: 0 4px 12px rgba(255, 105, 180, 0.1);
}
.divination-title {
font-size: 14px;
color: #666;
margin-bottom: 5px;
}
.divination-content {
font-weight: bold;
color: #333;
}
.comment {
background: linear-gradient(135deg, #fff0f5, #ffeef8);
border-radius: 15px;
padding: 18px;
margin: 20px 0;
text-align: center;
border: 2px solid rgba(255, 182, 193, 0.3);
box-shadow: 0 4px 12px rgba(255, 105, 180, 0.1);
}
.comment-title {
font-size: 14px;
color: #666;
margin-bottom: 5px;
}
.comment-content {
font-size: 18px;
font-weight: bold;
color: #333;
}
.stars {
display: flex;
justify-content: center;
gap: 3px;
margin: 10px 0;
}
.star {
color: #ffd700;
font-size: 20px;
}
.star.empty {
color: #ddd;
}
.ad-section {
margin: 20px 0;
padding: 15px;
background: linear-gradient(135deg, #ffe4e1, #ffd1dc);
border-radius: 15px;
border: 2px solid rgba(255, 105, 180, 0.2);
text-align: center;
}
.ad-title {
font-size: 14px;
color: #ff1493;
font-weight: bold;
margin-bottom: 8px;
}
.ad-link {
color: #ff69b4;
text-decoration: none;
font-size: 13px;
display: block;
margin: 5px 0;
padding: 8px;
background: white;
border-radius: 8px;
transition: all 0.3s;
}
.ad-link:hover {
background: #ff69b4;
color: white;
transform: scale(1.02);
}
.reset-btn {
margin-top: 20px;
width: 100%;
padding: 15px;
background: linear-gradient(135deg, #ffc0cb, #ffb6c1);
color: #ff1493;
border: 2px solid #ff69b4;
border-radius: 15px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s;
}
.reset-btn:hover {
background: linear-gradient(135deg, #ff69b4, #ff1493);
color: white;
transform: translateY(-2px);
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="avatar">🦄</div>
<div class="title">💖 QQ凶吉每日测试 💖</div>
<div class="subtitle">✨ 输入QQ号，测试今日运势 ✨</div>
<div class="cute-decoration">🌸 🦋 🌙 ⭐️ 🍭 🎀 🌈 💕</div>
</div>
<div class="input-section" id="inputSection">
<input type="text" class="qq-input" id="qqInput" placeholder="请输入您的QQ号码" maxlength="12">
<button class="test-btn" onclick="startTest()">开始测试</button>
</div>
<div class="result-section" id="resultSection">
<div class="fortune-item">
<span class="fortune-label">💰 财运：</span>
<span class="fortune-value" id="wealth">0</span>
</div>
<div class="fortune-item">
<span class="fortune-label">🌸 桃花运：</span>
<span class="fortune-value" id="love">0</span>
</div>
<div class="fortune-item">
<span class="fortune-label">📈 事业运：</span>
<span class="fortune-value" id="career">0</span>
</div>
<div class="divination">
<div class="divination-title">🎴 签卦：</div>
<div class="divination-content" id="divination">无</div>
</div>
<div class="comment">
<div class="comment-title">💬 点评：</div>
<div class="comment-content" id="comment">无</div>
</div>
<div class="stars" id="stars"></div>
<div class="ad-section">
<div class="ad-title">🌟 精选推荐 🌟</div>
<a href="https://pdha.top/" target="_blank" class="ad-link">
☁️ 胖大海资源网
</a>
<div class="ad-link" onclick="copyQQGroup()">
👥 QQ技术交流群：290093633 (点击复制)
</div>
</div>
<button class="reset-btn" onclick="resetTest()">🔄 重新测试</button>
</div>
</div>
<script>
// 签卦列表
const divinations = [
"「穷途的山炮」", "「幸运的星空」", "「平凡的日常」", "「神秘的月夜」",
"「温暖的阳光」", "「狂野的暴风」", "「宁静的湖泊」", "「燃烧的火焰」",
"「茂盛的森林」", "「无尽的海洋」", "「高耸的山峰」", "「广阔的草原」",
"「闪耀的钻石」", "「古老的智慧」", "「新生的希望」", "「永恒的爱情」"
];
// 点评列表
const comments = [
"大吉", "中吉", "小吉", "吉", "半吉", "末吉", "凶", "小凶", "半凶", "末凶", "大凶"
];
// 根据QQ号生成伪随机数
function generateRandom(qq, seed) {
const combined = parseInt(qq) + seed;
const x = Math.sin(combined) * 10000;
return x - Math.floor(x);
}
// 根据QQ号生成运势数据
function generateFortune(qq) {
const today = new Date().toDateString(); // 确保每天的结果不同
const baseSeed = qq.split('').reduce((sum, digit) => sum + parseInt(digit), 0);
const daySeed = today.split('').reduce((sum, char) => sum + char.charCodeAt(0), 0);
const wealth = Math.floor(generateRandom(qq, baseSeed + 1 + daySeed) * 100) + 1;
const love = Math.floor(generateRandom(qq, baseSeed + 2 + daySeed) * 100) + 1;
const career = Math.floor(generateRandom(qq, baseSeed + 3 + daySeed) * 100) + 1;
const divinationIndex = Math.floor(generateRandom(qq, baseSeed + 4 + daySeed) * divinations.length);
const commentIndex = Math.floor(generateRandom(qq, baseSeed + 5 + daySeed) * comments.length);
const averageScore = (wealth + love + career) / 3;
const stars = Math.max(1, Math.min(7, Math.floor(averageScore / 15) + 1));
return {
wealth,
love,
career,
divination: divinations[divinationIndex],
comment: comments[commentIndex],
stars
};
}
// 显示星级
function displayStars(count) {
const starsContainer = document.getElementById('stars');
starsContainer.innerHTML = '';
for (let i = 1; i <= 7; i++) {
const star = document.createElement('span');
star.className = i <= count ? 'star' : 'star empty';
star.textContent = '★';
starsContainer.appendChild(star);
}
}
// 开始测试
function startTest() {
const qqInput = document.getElementById('qqInput');
const qq = qqInput.value.trim();
if (!qq || !/^\d+$/.test(qq)) {
alert('请输入有效的QQ号码！');
return;
}
if (qq.length < 5 || qq.length > 12) {
alert('QQ号码长度应在5-12位之间！');
return;
}
const fortune = generateFortune(qq);
// 更新显示
document.getElementById('wealth').textContent = fortune.wealth;
document.getElementById('love').textContent = fortune.love;
document.getElementById('career').textContent = fortune.career;
document.getElementById('divination').textContent = fortune.divination;
document.getElementById('comment').textContent = fortune.comment;
displayStars(fortune.stars);
// 切换显示
document.getElementById('inputSection').style.display = 'none';
document.getElementById('resultSection').style.display = 'block';
}
// 重新测试
function resetTest() {
document.getElementById('inputSection').style.display = 'block';
document.getElementById('resultSection').style.display = 'none';
document.getElementById('qqInput').value = '';
}
// 复制QQ群号
function copyQQGroup() {
const groupNumber = '290093633';
if (navigator.clipboard) {
navigator.clipboard.writeText(groupNumber).then(() => {
alert('QQ群号已复制：' + groupNumber);
}).catch(() => {
alert('QQ技术交流群：' + groupNumber);
});
} else {
alert('QQ技术交流群：' + groupNumber);
}
}
// 回车键触发测试
document.getElementById('qqInput').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
startTest();
}
});
</script>
</body>
</html>感谢您的来访，获取更多精彩文章请收藏本站。
© 版权声明
THE END
暂无评论内容