HTML设计邮箱登录和跳转代码（四川省职高信息技术一类）

已于 2025-05-14 16:10:05 修改
阅读量448 收藏
点赞数 18
分类专栏： 示例项目 四川省职业高中HTML 文章标签： html 前端 css html5 javascript
于 2025-05-14 16:06:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2403_88399315/article/details/147956583
版权

一：运行显示图

二：HTML代码区域

        1：index.html代码区域

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>星空验证码验证</title>
		<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
		<link href="CSS/CSS.css" type="text/css" rel="stylesheet">
	</head>
	<body>
		<div class="stars" id="stars"></div>

		<div class="login-container">
			<h1>星空验证码验证</h1>

			<div class="input-group">
				<label for="email">邮箱账号</label>
				<input type="text" id="email" placeholder="请输入您的邮箱">
				<div class="error" id="email-error">请输入有效的邮箱地址</div>
			</div>

			<div class="input-group">
				<label for="password">密码</label>
				<input type="password" id="password" placeholder="请输入密码">
				<div class="error" id="password-error">密码必须包含字母和数字</div>
			</div>

			<button id="login-btn">登录</button>
		</div>
		<!-- 作者：栀子花.451 -->
		<!-- 时间：2025-5-14 -->
		<script src="JavaScript/JavaScript.js"></script>
	</body>
</html>

        2：onell.html代码区域

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>星空欢迎页</title>
		<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
		<link href="CSS/onell.css" type="text/css" rel="stylesheet">
	</head>
	<body>
		<div class="stars" id="stars"></div>
		<div class="planet" id="planet1"></div>
		<div class="planet" id="planet2"></div>
		<div class="comet"></div>

		<div class="welcome-container">
			<h1>欢迎来到星空世界 ✨</h1>

			<div class="user-info">
				<p>您已成功通过星空验证</p>
				<p>现在可以享受我们的星空服务</p>
			</div>

			<p>在这里，您可以探索宇宙的奥秘，<br>发现无尽的星辰大海，<br>体验梦幻般的星际之旅。</p>

			<button class="logout-btn" onclick="window.location.href='index.html'">返回登录</button>
		</div>
		<!-- 作者：栀子花.451 -->
		<!-- 时间：2025-5-14 -->
		<script src="JavaScript/onell.js"></script>
	</body>
</html>

二：CSS代码区域

        1：CSS.css代码区域

body {
	font-family: 'Ma Shan Zheng', cursive;
	background-color: #0a0a2a;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	background-image:
		radial-gradient(white, rgba(255, 255, 255, .2) 2px, transparent 40px),
		radial-gradient(white, rgba(255, 255, 255, .15) 1px, transparent 30px),
		radial-gradient(white, rgba(255, 255, 255, .1) 2px, transparent 40px),
		radial-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, .1) 2px, transparent 30px);
	background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
	background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
}

.login-container {
	background-color: rgba(10, 10, 42, 0.8);
	padding: 40px;
	border-radius: 15px;
	box-shadow: 0 0 20px rgba(100, 149, 237, 0.5);
	width: 350px;
	text-align: center;
	border: 1px solid cornflowerblue;
}

h1 {
	margin-top: 0;
	color: cornflowerblue;
	font-size: 28px;
	margin-bottom: 30px;
}

.input-group {
	margin-bottom: 20px;
	text-align: left;
}

label {
	display: block;
	margin-bottom: 8px;
	color: #aaa;
}

input {
	width: 100%;
	padding: 12px;
	border: 1px solid #333;
	border-radius: 5px;
	background-color: #11112a;
	color: white;
	font-size: 16px;
	box-sizing: border-box;
}

input:focus {
	outline: none;
	border-color: cornflowerblue;
	box-shadow: 0 0 5px rgba(100, 149, 237, 0.5);
}

button {
	background-color: cornflowerblue;
	color: white;
	border: none;
	padding: 12px 20px;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
	width: 100%;
	font-family: 'Ma Shan Zheng', cursive;
	transition: background-color 0.3s;
}

button:hover {
	background-color: #4d79c7;
}

.error {
	color: #ff6b6b;
	font-size: 14px;
	margin-top: 5px;
	display: none;
}

.stars {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: -1;
}

.star {
	position: absolute;
	background-color: white;
	border-radius: 50%;
	animation: twinkle var(--duration) infinite ease-in-out;
}

@keyframes twinkle {

	0%,
	100% {
		opacity: 0.2;
	}

	50% {
		opacity: 1;
	}
}

        2：onell.css代码区域

body {
	font-family: 'Ma Shan Zheng', cursive;
	background-color: #0a0a2a;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	background-image:
		radial-gradient(white, rgba(255, 255, 255, .2) 2px, transparent 40px),
		radial-gradient(white, rgba(255, 255, 255, .15) 1px, transparent 30px),
		radial-gradient(white, rgba(255, 255, 255, .1) 2px, transparent 40px),
		radial-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, .1) 2px, transparent 30px);
	background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
	background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
	overflow: hidden;
}

.welcome-container {
	background-color: rgba(10, 10, 42, 0.8);
	padding: 40px;
	border-radius: 15px;
	box-shadow: 0 0 20px rgba(100, 149, 237, 0.5);
	width: 500px;
	text-align: center;
	border: 1px solid cornflowerblue;
	position: relative;
	z-index: 1;
	animation: float 6s ease-in-out infinite;
}

h1 {
	margin-top: 0;
	color: cornflowerblue;
	font-size: 36px;
	margin-bottom: 20px;
	text-shadow: 0 0 10px rgba(100, 149, 237, 0.7);
}

p {
	font-size: 18px;
	line-height: 1.6;
	margin-bottom: 30px;
	color: #ddd;
}

.user-info {
	background-color: rgba(100, 149, 237, 0.2);
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 30px;
	border-left: 3px solid cornflowerblue;
}

.logout-btn {
	background-color: cornflowerblue;
	color: white;
	border: none;
	padding: 12px 25px;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
	font-family: 'Ma Shan Zheng', cursive;
	transition: all 0.3s;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.logout-btn:hover {
	background-color: #4d79c7;
	transform: translateY(-2px);
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.stars {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 0;
}

.star {
	position: absolute;
	background-color: white;
	border-radius: 50%;
	animation: twinkle var(--duration) infinite ease-in-out;
}

.comet {
	position: absolute;
	width: 6px;
	height: 6px;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	box-shadow: 0 0 10px 2px rgba(100, 149, 237, 0.8);
	animation: cometFly 15s linear infinite;
}

.comet:after {
	content: '';
	position: absolute;
	width: 150px;
	height: 2px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), transparent);
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

@keyframes twinkle {

	0%,
	100% {
		opacity: 0.2;
	}

	50% {
		opacity: 1;
	}
}

@keyframes float {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-15px);
	}
}

@keyframes cometFly {
	0% {
		transform: translate(-100px, -100px);
		opacity: 1;
	}

	70% {
		opacity: 1;
	}

	100% {
		transform: translate(calc(100vw + 100px), calc(100vh + 100px));
		opacity: 0;
	}
}

.planet {
	position: absolute;
	border-radius: 50%;
	z-index: -1;
	opacity: 0.8;
}

#planet1 {
	width: 200px;
	height: 200px;
	background: radial-gradient(circle at 30% 30%, #4d79c7, #0a0a2a 70%);
	top: 10%;
	right: 10%;
	animation: planetRotate 60s linear infinite;
}

#planet2 {
	width: 150px;
	height: 150px;
	background: radial-gradient(circle at 30% 30%, #c74d4d, #0a0a2a 70%);
	bottom: 15%;
	left: 15%;
	animation: planetRotate 40s linear infinite reverse;
}

@keyframes planetRotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

三：JavaScript代码区域

        1：JavaScript.js代码区域

// 创建星星背景
function createStars() {
	const starsContainer = document.getElementById('stars');
	const starCount = 100;

	for (let i = 0; i < starCount; i++) {
		const star = document.createElement('div');
		star.className = 'star';

		// 随机大小 (1-3px)
		const size = Math.random() * 2 + 1;
		star.style.width = `${size}px`;
		star.style.height = `${size}px`;

		// 随机位置
		star.style.left = `${Math.random() * 100}%`;
		star.style.top = `${Math.random() * 100}%`;

		// 随机闪烁时间 (3-6秒)
		star.style.setProperty('--duration', `${Math.random() * 3 + 3}s`);

		starsContainer.appendChild(star);
	}
}

// 验证邮箱格式
function validateEmail(email) {
	const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
	return re.test(email);
}

// 验证密码格式 (字母和数字)
function validatePassword(password) {
	const re = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/;
	return re.test(password);
}

// 登录验证
function validateLogin() {
	const email = document.getElementById('email').value;
	const password = document.getElementById('password').value;
	const emailError = document.getElementById('email-error');
	const passwordError = document.getElementById('password-error');

	let isValid = true;

	// 验证邮箱
	if (!validateEmail(email)) {
		emailError.style.display = 'block';
		isValid = false;
	} else {
		emailError.style.display = 'none';
	}

	// 验证密码
	if (!validatePassword(password)) {
		passwordError.style.display = 'block';
		isValid = false;
	} else {
		passwordError.style.display = 'none';
	}

	// 如果验证通过，跳转到 onell.html
	if (isValid) {
		window.location.href = 'onell.html';
	}

	return false; // 阻止表单默认提交行为
}

// 初始化
document.addEventListener('DOMContentLoaded', function() {
	createStars();

	// 绑定登录按钮点击事件
	document.getElementById('login-btn').addEventListener('click', validateLogin);

	// 也可以监听表单的提交事件
	document.querySelector('.login-container').addEventListener('submit', function(e) {
		e.preventDefault();
		validateLogin();
	});
});

        2：onell.js代码区域

// 创建星星背景
function createStars() {
	const starsContainer = document.getElementById('stars');
	const starCount = 200;

	for (let i = 0; i < starCount; i++) {
		const star = document.createElement('div');
		star.className = 'star';

		// 随机大小 (1-3px)
		const size = Math.random() * 2 + 1;
		star.style.width = `${size}px`;
		star.style.height = `${size}px`;

		// 随机位置
		star.style.left = `${Math.random() * 100}%`;
		star.style.top = `${Math.random() * 100}%`;

		// 随机闪烁时间 (3-8秒)
		star.style.setProperty('--duration', `${Math.random() * 5 + 3}s`);

		starsContainer.appendChild(star);
	}
}

// 创建流星
function createComet() {
	const comet = document.querySelector('.comet');
	comet.style.left = `${Math.random() * 100}%`;
	comet.style.top = `${Math.random() * 100}%`;
	comet.style.animationDuration = `${Math.random() * 10 + 10}s`;
}

// 初始化
document.addEventListener('DOMContentLoaded', function() {
	createStars();
	createComet();

	// 每隔一段时间创建新的流星
	setInterval(createComet, 5000);
});

四：结构图

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值