javascript代码
按图片中的要求来 可以适当添加其他效果背景都没问题 越好看越好 JavaScript 网页 要完整代码
基于new bing加以修改的编写：
<!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>
该回答引用ChatGPT4与博主@晓码自在合作编写：
HTML代码:
html
<!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>表单</title>
</head>
<body>
<p id="time">2021年4月21日星期三 10: 32</p>
<p id="greet">早上好!</p>
<form action="#">
<p>
<label for="name">姓名:</label>
<input type="text" name="name" id="name" required>
</p>
<p>
<label for="password">密码:</label>
<input type="password" name="password" id="password" value="12345678">
</p>
<p>
<label>性别:</label>
<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女
</p>
<p>
<label for="age">年龄:</label>
<input type="number" name="age" id="age" required>
</p>
<p>
<label for="city">所在城市:</label>
<select name="city" id="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select>
</p>
<p>
<label>爱好:</label>
<input type="checkbox" name="hobby" value="music">音乐
<input type="checkbox" name="hobby" value="movie">电影
<input type="checkbox" name="hobby" value="book">读书
<input type="checkbox" name="hobby" value="sport">运动
</p>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
</body>
</html>
JavaScript代码:
```js
// 获取时间和元素
const time = document.querySelector('#time')
const greet = document.querySelector('#greet')
// 设置定时器更新时间
setInterval(() => {
let date = new Date()
let hours = date.getHours()
if(hours < 12 ) {
greet.innerText = '早上好!'
} else if (hours < 18) {
greet.innerText = '下午好!'
} else {
greet.innerText = '晚上好!'
}
time.innerText = ${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日星期${['日','一', '二', '三', '四', '五', '六'][date.getDay()]} ${date.getHours()}: ${date.getMinutes()}
}, 1000)
// 表单提交后显示结果
const form = document.querySelector('form')
form.addEventListener('submit', (e) => {
e.preventDefault()
const name = document.querySelector('#name').value
const password = document.querySelector('#password').value
const gender = document.querySelector('input[name="gender"]:checked').value
const age = document.querySelector('#age').value
const city = document.querySelector('#city').value
let hobby = []
document.querySelectorAll('input[name="hobby"]:checked').forEach(input => {
hobby.push(input.value)
})
hobby = hobby.join(',')
alert(`${name}
您好,您的密码是${password},您的所在城市为*，年龄是20，您的爱好是大大
答案参考ChatGPT Plus版，整理汇总。希望能帮助你解决问题
下面是一个实现上述要求的JavaScript代码示例：
// 获取当前时间
function getCurrentTime() {
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1;
const day = now.getDate();
const week = ["日", "一", "二", "三", "四", "五", "六"][now.getDay()];
const hours = now.getHours();
const minutes = now.getMinutes();
return `当前时间：${year}年${month}月${day}日 星期${week} ${hours}:${minutes}`;
}
// 获取早上好提示语
function getGreeting() {
const now = new Date();
const hours = now.getHours();
let greeting = "";
if (hours < 6) {
greeting = "凌晨好";
} else if (hours < 9) {
greeting = "早上好";
} else if (hours < 12) {
greeting = "上午好";
} else if (hours < 14) {
greeting = "中午好";
} else if (hours < 18) {
greeting = "下午好";
} else if (hours < 22) {
greeting = "晚上好";
} else {
greeting = "夜深了";
}
return greeting;
}
// 表单校验和提交处理
function handleSubmit() {
const name = document.getElementById("name").value;
const password = generatePassword();
const gender = document.getElementById("gender").value;
const age = document.getElementById("age").value;
const city = document.getElementById("city").value;
const hobbies = document.querySelectorAll('input[name="hobbies"]:checked');
const selectedHobbies = Array.from(hobbies).map(hobby => hobby.value);
// 校验姓名不能为空
if (name.trim() === "") {
alert("姓名不能为空");
return;
}
// 校验年龄必须是数字
if (isNaN(age)) {
alert("年龄必须是数字");
return;
}
// 拼接提示信息
const message = `${name}您好，您的密码是${password}，您的所在城市为${city}，年龄是${age}，您的爱好是${selectedHobbies.join("，")}。`;
alert(message);
}
// 随机生成8位密码
function generatePassword() {
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
let password = "";
for (let i = 0; i < 8; i++) {
password += chars.charAt(Math.floor(Math.random() * chars.length));
}
return password;
}
// 初始化页面
function init() {
// 更新当前时间和早上好提示语
const currentTimeElement = document.getElementById("current-time");
const greetingElement = document.getElementById("greeting");
currentTimeElement.textContent = getCurrentTime();
greetingElement.textContent = getGreeting();
// 绑定表单提交事件
const form = document.getElementById("my-form");
form.addEventListener("submit", function(e) {
e.preventDefault();
handleSubmit();
});
}
// 页面加载完成后执行初始化
window.addEventListener("load", function() {
init();
});
你可以将上述代码嵌入到你的HTML页面中，并根据需要在页面上添加相应的
元素，如文本框、下拉菜单、复选框等。记得为表单元素添加对应的ID和事件处理函数，并在页面加载完成后执行初始化操作。
请注意，上述代码只是一个简单的示例，可能需要根据你的具体需求进行修改和适应。