登录效果图
注册效果图
登录
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bk.css"/>
<title>小刘的世界</title>
<link rel="Shortcut icon" href="img/tx2.ico"/>
<link rel="stylesheet" href="css/bk.css"/>
<script src="js/jquery.js"></script>
<script src="js/dl.js"></script>
<script src="js/dlcgtanc.js"></script>
<script src="js/djs.js"></script>
</head>
<body background="img/bj.jpg" style="background-repeat:no-repeat; background-attachment:fixed; background-size:1530px 710px;">
<div class="dl">
<h1 class="yhd">Hello You!</h1>
<div class="napw">
<!--用户名-->
<div>
<label for="name" class="name">用户名:</label>
<input type="text" id="name" name="name" placeholder="请输入用户名">
<span class="error-message" id="nameError"></span>
</div>
<!--结束-->
<!--密码-->
<div class="mim">
<label class="pwd">密 码:</label>
<input type="password" id="pwd" name="pwd" placeholder="请输入密码">
<span class="error-message" id="pwdError"></span>
</div>
<!--结束-->
<!-- 注册 -->
<div class="zc">
<strong><p>没有账号去<a href="zc.html" class="zc1">注册</a></p></strong>
</div>
<!-- 结束 -->
<div class="wz">
<input type="submit" id="submitBtn"/>
</div>
</div>
</div>
<div id="light" class="pop_win">
<div class="centered-image">
<img src="img/tx2.ico"/>
</div>
<div class="wenz">
<p>欢迎来到小刘的网站</p>
</div>
<div id="countdown">5</div>
<div class="fl">
<p>请遵守网络规则,不能触碰法律的底线</p>
</div>
<div class="bq">@2024-2025</div>
</div>
<div id="fade" class="black_overlay">
<a href="javascript:void(0)" onclick="closeWin();" style="float: right;" class="fancybox-button fancybox-button--close">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 10.6L6.6 5.2 5.2 6.6l5.4 5.4-5.4 5.4 1.4 1.4 5.4-5.4 5.4 5.4 1.4-1.4-5.4-5.4 5.4-5.4-1.4-1.4-5.4 5.4z"></path></svg></a></div>
</body>
<script>
var countdownElement = document.getElementById('countdown');
var timeLeft = 5;
var countdownStarted = false;
var countdownInterval;
// 更新倒计时显示
function updateCountdown() {
countdownElement.textContent = timeLeft;
timeLeft--;
if (timeLeft < 0) {
clearInterval(countdownInterval); // 清除计时器
countdownElement.textContent = '欢迎来到小刘的世界';
timeLeft = 5; // 重置倒计时时间
countdownStarted = false;
}
}
// 点击登录按钮时开始倒计时
document.getElementById('submitBtn').addEventListener('click', function(e) {
e.preventDefault(); // 阻止表单默认提交行为
if (!countdownStarted) {
countdownStarted = true;
updateCountdown();
countdownInterval = setInterval(updateCountdown, 1000); // 每隔一秒更新一次倒计时
}
// 在这里添加你的登录逻辑
});
</script>
</html>
CSS:bk.css
/*背景*/
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
}
canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*结束*/
/*登录*/
.dl{
background-color: rgba(255, 255, 255, 0.5);
border-radius: 20px;
width: 500px;
height: 400px;
z-index: 5;
}
.yhd{
color: white;
text-align:center;
}
.napw{
margin-top: 50px;
margin-left: 40px;
z-index: 2
}
.name{
color: white;
font-size: 25px;
margin-left: 50px;
}
.pwd{
color: white;
font-size: 25px;
margin-left: 50px;
}
.mim{
margin-top: 30px;
}
input[type="text"] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
outline: none;
}
/*用户名样式*/
input[type="text"]:hover {
border-color: #999;
}
input[type="text"]:focus {
border-color: #555;
box-shadow: 0 0 5px #555;
}
/*结束*/
input[type="password"] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
outline: none;
}
/*密码样式*/
input[type="password"]:hover {
border-color: #999;
}
input[type="password"]:focus {
border-color: #555;
box-shadow: 0 0 5px #555;
}
/*结束*/
/*按钮*/
input[type="submit"] {
padding: 10px 50px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
.wz{
position: fixed;
bottom: 200px; /* 距离底部的距离 */
right: 700px;
}
/*结束*/
.zc{
margin-top: -1em;
margin-left: 8.5em;
color: #fff;
}
.zc1{
color: red;
}
a:link {
color: blue;
text-decoration:none;
}
.error-message {
display: block;
color: red;
margin-left: 8.5em;
}
.black_overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #222;
z-index: 1001;
opacity: .80;
}
.pop_win {
display: none;
position: fixed;
top: 10%;
left: 40%;
width: 20%;
height: 75%;
padding: 10px;
border: 2px solid #3b3e41;
background-color: white;
z-index: 9999;
overflow: auto;
border-radius: 25px;
overflow-x: hidden; /* 隐藏水平滚动条 */
overflow-y: hidden; /* 隐藏垂直滚动条 */
}
.fancybox-button {
background: rgba(30, 30, 30, .6);
border: 0;
border-radius: 0;
box-shadow: none;
cursor: pointer;
display: inline-block;
height: 44px;
margin: 0;
padding: 10px;
position: relative;
transition: color .2s;
vertical-align: top;
visibility: inherit;
width: 44px;
}
.centered-image {
position: relative;
height: 100vh; /* 设置高度为视口高度,实现垂直居中 */
text-align: center; /* 实现水平居中 */
}
.centered-image img {
position: absolute;
top: 20%; /* 定位到父元素的50%处 */
left: 50%; /* 定位到父元素的50%处 */
transform: translate(-50%, -50%); /* 利用transform属性将图片居中 */
width: auto;
height: auto;
}
.wenz p{
margin-top: -20em;
text-align: center;
font-size: 20px;
}
#countdown{
text-align: center;
font-size: 20px;
}
.fl p{
text-align: center;
margin-top: 7em;
font-size: 15px;
}
.bq{
text-align: center;
color: #999;
margin-top: -0.5em;
}
JS:dl.js
function isValidEmail(email) {
var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
return emailRegex.test(email);
}
$(document).ready(function() {
$("#submitBtn").click(function(e) {
e.preventDefault(); // 阻止表单默认提交行为
var name = $("#name").val();
var pwd = $("#pwd").val();
if (name === "") {
showError("邮箱不能为空", "#nameError");
return;
} else {
clearError("#nameError");
}
if (!isValidEmail(name)) {
showError("请输入有效的邮箱地址", "#nameError");
return;
} else {
clearError("#nameError");
}
if (pwd === "") {
showError("密码不能为空", "#pwdError");
return;
} else {
clearError("#pwdError");
}
if (name === "3158749833@qq.com" && pwd === "1234") {
popWin();
setTimeout(function() {
window.location.href = "http://127.0.0.1:8848/Qiang/index.html";
}, 5000); // 5000毫秒即5秒
return;
} else {
alert("用户名或密码错误");
}
// 模拟登录成功
});
function showError(message, target) {
$(target).text(message);
}
function clearError(target) {
$(target).text('');
}
});
/* 弹窗 */
JS:dlcgtanc.js
function popWin() {
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';
setTimeout(function(){
closeWin();
},5000);
}
function closeWin() {
document.getElementById('light').style.display = 'none';
document.getElementById('fade').style.display = 'none';
}
注册
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bk.css"/>
<title>小刘的世界</title>
<link rel="Shortcut icon" href="img/tx2.ico"/>
<link rel="stylesheet" href="css/zc.css" />
<script src="js/yzm.js"></script>
<script src="js/jquery.js"></script>
<script src="js/yanz.js"></script>
</head>
<body background="img/bj.jpg" style="background-repeat:no-repeat background-attachment:fixed; background-size:1530px 710px; " >
<div class="dl">
<h1 class="yhd">Hello You!</h1>
<div class="napw">
<!--用户名-->
<div>
<label for="name" class="name"></label>
<input type="text" id="name" class="cd" name="name" placeholder="请输入邮箱" required>
<span class="error-message"></span>
</div>
<!--结束-->
<!--密码-->
<div class="">
<label for="input" class="pwd"></label>
<input type="password" id="pwd" name="pwd" placeholder="请输入密码" required>
<span class="error-message"></span>
</div>
<!--结束-->
<!-- 确认密码-->
<div class="mim1">
<label for="input" class="pwd"></label>
<input type="password" class="qren" id="pwd" name="pwd" placeholder="请输入确认密码" required>
<span class="error-message"></span>
</div>
<!-- 结束 -->
<!-- 验证码 -->
<div class="yzm">
<label for="input" class="pwd"></label>
<input type="text" id="yzm" name="yzm" placeholder="请输入验证码" required>
<span class="error-message"></span>
</div>
<div class="yzm1">
<button onclick="startCountdown()"><span id="countdown"></span>发送验证码</button>
</div>
<!-- 结束 -->
<div class="wz">
<input type="submit"/>
</div>
</div>
</div>
</body>
</html>
CSS:zc.css
/*背景*/
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
}
canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*结束*/
/*登录*/
.dl{
background-color: rgba(255, 255, 255, 0.5);
border-radius: 20px;
width: 500px;
height: 400px;
z-index: 5;
}
.yhd{
color: white;
text-align:center;
}
.napw{
margin-top: 50px;
margin-left: 40px;
z-index: 2
}
.name{
color: white;
font-size: 25px;
margin-left: 50px;
}
.pwd{
color: white;
font-size: 25px;
margin-left: 50px;
}
.mim{
margin-top: 30px;
}
#pwd{
width: 300px;
}
.cd{
width: 300px;
}
input[type="text"] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
outline: none;
}
/*用户名样式*/
input[type="text"]:hover {
border-color: #999;
}
input[type="text"]:focus {
border-color: #555;
box-shadow: 0 0 5px #555;
}
/*结束*/
input[type="password"] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
outline: none;
}
/*密码样式*/
input[type="password"]:hover {
border-color: #999;
}
input[type="password"]:focus {
border-color: #555;
box-shadow: 0 0 5px #555;
}
/*结束*/
/*按钮*/
input[type="submit"] {
padding: 10px 50px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
.wz{
position: fixed;
bottom: 170px; /* 距离底部的距离 */
right: 700px; /* 距离右侧的距离 */
}
/*结束*/
/* 修改输入框样式为只有下划线 */
input[type="text"],
input[type="password"] {
border: none;
border-bottom: 1px solid #000; /* 下划线样式 */
background-color: transparent; /* 去除背景颜色 */
outline: none; /* 去除默认边框样式 */
padding: 10px; /* 调整内边距 */
color: #000; /* 文本颜色 */
font-size: 16px; /* 字体大小 */
margin-bottom: 20px; /* 调整下方间距 */
}
/* 鼠标悬停样式 */
input[type="text"]:hover, input[type="password"]:hover {
border-bottom: 2px solid #000; /* 悬停时增加下划线粗细 */
}
/* 焦点样式(点击时) */
input[type="text"]:focus, input[type="password"]:focus {
border-bottom: 2px solid #000; /* 聚焦时增加下划线粗细 */
}
/* 注册 */
.yzm1{
margin-top: -2.7em;
margin-left: 17em;
}
#countdown {
font-size: 1-px;
padding: 1px;
text-align: center;
}
/* 结束 */
.error-message {
display: block;
color: red;
margin-top: -1em;
margin-left: 3em;
}
JS:yzm.js
let countdown = 60;
let interval;
function startCountdown() {
let countdownElement = document.getElementById('countdown');
let button = document.querySelector('button');
button.disabled = true;
interval = setInterval(function() {
if (countdown <= 0) {
clearInterval(interval);
countdownElement.innerText = '';
button.disabled = false;
countdown = 60;
} else {
countdownElement.innerText = countdown;
countdown--;
}
}, 1000);
}
JS:yanz.js
function isValidEmail(email) {
var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
return emailRegex.test(email);
}
$(document).ready(function() {
$("input[type='submit']").click(function(e) {
e.preventDefault(); // 阻止表单默认提交行为
var name = $("#name").val();
var pwd = $("#pwd").val();
var qr = $(".qren").val();
var yzm = $("#yzm").val();
if (name === "") {
$("#name").next().text("邮箱不能为空");
return;
} else {
$("#name").next().text("");
}
if (!isValidEmail(name)) {
$("#name").next().text("请输入有效的邮箱地址");
return;
} else {
$("#name").next().text("");
}
if (pwd === "") {
$("#pwd").next().text("密码不能为空");
return;
} else if (pwd.length < 6) {
$("#pwd").next().text("密码长度不能小于6位");
return;
} else if (!/[a-z]/.test(pwd) || !/[A-Z]/.test(pwd)) {
$("#pwd").next().text("密码必须包含大小写字母");
return;
} else {
$("#pwd").next().text("");
}
if (qr === "") {
$(".qren").next().text("请再次输入密码");
return;
} else {
$(".qren").next().text("");
}
if (pwd !== qr) {
$(".qren").next().text("两次输入的密码不一致");
return;
} else {
$(".qren").next().text("");
}
if (yzm === "") {
$("#yzm").next().text("验证码不能为空");
return;
} else {
$("#yzm").next().text("");
}
if(yzm === "1634") {
alert("注册成功");
window.location.href = "http://127.0.0.1:8848/htxtdl/bk.html";
return;
} else{
$("#yzm").next().text("验证码错误");
return;
});
});