编辑
实现效果：
编辑
编辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f3f3f3;
}
h1 {
margin-top: 50px;
margin-bottom: 20px;
font-size: 2em;
color: #444;
}
#clock {
margin-bottom: 20px;
font-size: 1.2em;
color: #666;
}
.form-item {
margin-top: 20px;
text-align: left;
line-height: 2;
}
.form-item label {
display: inline-block;
width: 100px;
font-weight: bold;
color: #333;
}
.form-item input[type=text],
.form-item select {
padding: 5px;
border-radius: 3px;
border: 1px solid #ccc;
outline: none;
}
.form-item input[type=text]:focus,
.form-item select:focus {
border-color: #5298d2;
}
.form-item button {
margin-left: 10px;
padding: 5px 10px;
border-radius: 3px;
border: none;
outline: none;
background-color: #5298d2;
color: white;
cursor: pointer;
}
.form-item button:hover {
background-color: #3786c7;
}
.form-item input[type=radio],
.form-item input[type=checkbox] {
margin-right: 10px;
}
.form-item input[type=radio]:checked+label,
.form-item input[type=checkbox]:checked+label {
font-weight: bold;
color: #5298d2;
}
.form-item button#submitForm {
margin-top: 30px;
width: 120px;
height: 40px;
background-color: #5298d2;
color: white;
font-size: 1.2em;
border-radius: 5px;
border: none;
}
.form-item button#submitForm:hover {
background-color: #3786c7;
}
</style>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人信息注册</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>个人信息注册</h1>
<div id="clock"></div>
<form>
<div class="form-item">
<label for="name">姓名：</label>
<input type="text" id="name" required>
</div>
<div class="form-item">
<label for="password">密码：</label>
<input type="text" id="password" readonly>
<button type="button" id="generatePassword">生成密码</button>
</div>
<div class="form-item">
<label>性别：</label>
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
</div>
<div class="form-item">
<label for="age">年龄：</label>
<input type="text" id="age" pattern="\d+" required>
</div>
<div class="form-item">
<label for="city">所在城市：</label>
<select id="city">
<option value="Beijing">北京</option>
<option value="Shanghai">上海</option>
<option value="Guangzhou">广州</option>
<option value="Shenzhen">深圳</option>
</select>
</div>
<div class="form-item">
<label>爱好：</label>
<input type="checkbox" name="hobby" value="reading">阅读
<input type="checkbox" name="hobby" value="music">音乐
<input type="checkbox" name="hobby" value="sports">运动
<input type="checkbox" name="hobby" value="travel">旅游
<input type="checkbox" name="hobby" value="food">美食
</div>
<div class="form-item">
<button type="button" id="submitForm">提交</button>
<button type="reset">重置</button>
</div>
</form>
<script src="script.js"></script>
</body>
</html>
</body>
<script>
// 获取HTML元素
const clockEle = document.getElementById("clock");
const nameInput = document.getElementById("name");
const passwordInput = document.getElementById("password");
const generatePasswordBtn = document.getElementById("generatePassword");
const ageInput = document.getElementById("age");
const submitFormBtn = document.getElementById("submitForm");
// 获取当前时间并显示在页面上
function showTime() {
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1;
const date = now.getDate();
const day = ["日", "一", "二", "三", "四", "五", "六"][now.getDay()];
const hour = now.getHours();
const minute = now.getMinutes();
const second = now.getSeconds();
clockEle.textContent = `${year}年${month}月${date}日 星期${day} ${hour}:${minute}:${second}`;
}
showTime(); // 首次加载页面时显示时间
setInterval(showTime, 1000); // 每秒钟更新时间
// 点击“生成密码”按钮，生成随机密码并填写到密码框中
generatePasswordBtn.addEventListener("click", function() {
const password = Math.random().toString(36).slice(-8);
passwordInput.value = password;
});
// 点击“提交”按钮，显示拼接提示信息
submitFormBtn.addEventListener("click", function() {
const name = nameInput.value.trim();
const password = passwordInput.value.trim();
const gender = document.querySelector("input[name=gender]:checked").value;
const age = parseInt(ageInput.value.trim());
const city = document.getElementById("city").value;
const hobbyArr = Array.from(document.querySelectorAll("input[name=hobby]:checked")).map((ele) => ele.value);
const hobby = hobbyArr.length > 0 ? hobbyArr.join(",") : "无";
if (!name) {
alert("请输入姓名！");
return;
}
if (!age || isNaN(age)) {
alert("年龄必须是数字！");
return;
}
const msg = `${name}您好，您的密码是${password}，您所在的城市是${city}，年龄是${age}，您的爱好是${hobby}`;
alert(msg);
});
</script>
</html>