演示地址: 演示地址
![图片[1]|AI写的简易邮箱定制系统，喜欢拿走|不死鸟资源网](https://www.busi.net/wp-content/uploads/2025/06/20250610184020654-image-1024x707.png)
// 模拟已注册的邮箱数据
const registeredEmails = [
“admin@uu.ma”,
“user@pp.ma”,
“test@22.ma”,
“info@55.ma”,
“support@222.ma”,
“contact@333.ma”,
“help@666.ma”,
“service@999.ma”
];
<!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>
:root {
--primary-color: #07c160;
--secondary-color: #E4405F;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background: #f8f9fa;
}
.container {
max-width: 800px;
margin: 2rem auto;
padding: 2rem;
background: white;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
color: var(--primary-color);
text-align: center;
margin-bottom: 2rem;
font-size: 2.2rem;
}
.search-box {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 1rem;
margin-bottom: 2rem;
}
input, select, button {
padding: 0.8rem 1.2rem;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 1rem;
}
#domain-input {
flex: 1;
border-color: var(--primary-color);
}
#domain-suffix {
min-width: 120px;
background: white;
}
#check-btn {
background: var(--primary-color);
color: white;
border: none;
cursor: pointer;
transition: background 0.3s;
}
#check-btn:hover {
background: #05a050;
}
.result-card {
padding: 1.5rem;
border-radius: 8px;
margin-bottom: 2rem;
text-align: center;
font-size: 1.1rem;
}
.available {
background: #e8f5e9;
color: var(--primary-color);
}
.unavailable {
background: #ffebee;
color: var(--secondary-color);
}
#register-btn {
width: 100%;
padding: 1rem;
background: var(--secondary-color);
color: white;
border: none;
border-radius: 8px;
font-size: 1.1rem;
cursor: pointer;
transition: background 0.3s;
}
#register-btn:hover {
background: #c5304f;
}
/* 域名卡片样式 */
.domain-cards-container {
margin: 2rem 0;
}
.domain-cards-container h2 {
color: var(--primary-color);
margin-bottom: 1.5rem;
font-size: 1.5rem;
text-align: center;
}
.domain-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
}
.domain-card {
padding: 1.2rem;
border-radius: 8px;
border: 2px solid var(--primary-color);
background: #e8f5e9;
text-align: center;
transition: transform 0.2s;
}
.domain-card:hover {
transform: translateY(-3px);
}
.domain-suffix {
font-size: 1.2rem;
margin-bottom: 0.5rem;
font-weight: 500;
color: var(--primary-color);
}
.domain-status {
font-size: 0.9rem;
color: #05a050;
}
/* 模态框样式 */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}
.modal-content {
background: white;
padding: 2rem;
border-radius: 12px;
text-align: center;
position: relative;
}
.close-btn {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 1.5rem;
cursor: pointer;
}
/* 移动端适配 */
@media (max-width: 768px) {
.container {
margin: 1rem;
padding: 1rem;
}
.search-box {
grid-template-columns: 1fr;
}
h1 {
font-size: 1.8rem;
}
}
</style>
</head>
<body>
<div class="container">
<h1>创建您的专属域名邮箱</h1>
<div class="search-box">
<input type="text" id="domain-input" placeholder="输入邮箱前缀（如：yourname）">
<select id="domain-suffix">
<option value="uu.ma">uu.ma</option>
<option value="pp.ma">pp.ma</option>
<option value="22.ma">22.ma</option>
<option value="55.ma">55.ma</option>
<option value="222.ma">222.ma</option>
<option value="333.ma">333.ma</option>
<option value="666.ma">666.ma</option>
<option value="999.ma">999.ma</option>
</select>
<button id="check-btn">立即查询</button>
</div>
<div id="result" class="result-card"></div>
<!-- 新增可注册域名展示卡片 -->
<div class="domain-cards-container">
<h2>可注册域名展示</h2>
<div class="domain-cards" id="domain-cards"></div>
</div>
<button id="register-btn">立即申请注册</button>
</div>
<div id="contact-modal" class="modal">
<div class="modal-content">
<span class="close-btn">×</span>
<h3>联系我们完成注册</h3>
<div style="margin: 2rem 0">
<p><strong>微信客服:</strong> domain_service</p>
<p><strong>联系邮箱:</strong> support@domain.com</p>
</div>
<small>工作日 9:00-18:00 实时响应</small>
</div>
</div>
<script type="module">
// 模拟已注册的邮箱数据
const registeredEmails = [
"admin@uu.ma",
"user@pp.ma",
"test@22.ma",
"info@55.ma",
"support@222.ma",
"contact@333.ma",
"help@666.ma",
"service@999.ma"
];
// 域名后缀配置
const DOMAIN_SUFFIXES = [
"uu.ma", "pp.ma", "22.ma", "55.ma",
"222.ma", "333.ma", "666.ma", "999.ma"
];
// 检查邮箱是否已注册
async function checkAvailability(prefix, suffix) {
const email = `${prefix}@${suffix}`;
return new Promise((resolve) => {
setTimeout(() => {
// 检查邮箱是否在已注册列表中
const isAvailable = !registeredEmails.includes(email);
resolve(isAvailable);
}, 500); // 模拟网络延迟
});
}
// 获取所有可注册域名
async function getAvailableDomains() {
const availableDomains = [];
for (const suffix of DOMAIN_SUFFIXES) {
const isAvailable = await checkAvailability("demo", suffix); // 使用demo前缀检查
if (isAvailable) {
availableDomains.push(suffix);
}
}
return availableDomains;
}
// 价格体系配置
const PRICE_TABLE = {
single: 888, // 单字符价格
multi: 388 // 多字符价格
};
// 元素引用
const resultDiv = document.getElementById('result');
const modal = document.getElementById('contact-modal');
// 查询功能
document.getElementById('check-btn').addEventListener('click', async () => {
const prefix = document.getElementById('domain-input').value.trim();
const suffix = document.getElementById('domain-suffix').value;
if(!prefix) {
alert('请输入邮箱前缀');
return;
}
const isAvailable = await checkAvailability(prefix, suffix);
showResult(`${prefix}@${suffix}`, isAvailable, prefix.length);
});
// 显示结果
function showResult(email, available, prefixLength) {
resultDiv.className = `result-card ${available ? 'available' : 'unavailable'}`;
const price = prefixLength === 1 ? PRICE_TABLE.single : PRICE_TABLE.multi;
const priceHTML = available ?
`<p>年费价格: <strong>¥${price}</strong></p>` : '';
resultDiv.innerHTML = `
<p>邮箱地址: <strong>${email}</strong></p>
<p>状态: ${available ? '🟢 可注册' : '🔴 已注册'}</p>
${priceHTML}
`;
}
// 注册弹窗控制
document.getElementById('register-btn').addEventListener('click', () => {
modal.style.display = 'flex';
});
document.querySelector('.close-btn').addEventListener('click', () => {
modal.style.display = 'none';
});
// 初始化可注册域名展示
async function initDomainCards() {
const container = document.getElementById('domain-cards');
const loadingHTML = `<div class="result-card">加载可注册域名中...</div>`;
container.innerHTML = loadingHTML;
const availableDomains = await getAvailableDomains();
if (availableDomains.length > 0) {
container.innerHTML = availableDomains.map(suffix => `
<div class="domain-card">
<div class="domain-suffix">${suffix}</div>
<div class="domain-status">🟢 可注册</div>
</div>
`).join('');
} else {
container.innerHTML = `<div class="result-card">暂无可用域名</div>`;
}
}
// 在页面加载时初始化
window.addEventListener('DOMContentLoaded', initDomainCards);
</script>
</body>
</html>本站资源均为作者提供和网友推荐收集整理而来，仅供学习和研究使用，请在下载后24小时内删除，谢谢合作!
THE END
