设计下图所示内容,完成下列三项内容:(本题共25分) 1、要求年、月、日三个选择框中的数字使用jQuery代码添加,年份是今年开始向前50年,每月的天数要求与月份对应,页面打开时显示当天日期。(10分) 2、文本框以秒表的形式显示24小时制当前时间,要求时、分、秒始终使用二位数字显示,比如05:09:06,网页打开时显示当前时间,点击“停止”时钟停止计时,点击“开启”时,显示当前时间,(5分) 3、点击“确定”按钮使用jQuery代码完成操作:在本部分内容的下方插入一个DIV,其中显示当前所选的年、月、日和时间,设置此DIV宽400PX,高300PX,背景为淡蓝色,字体为楷体,字号为18PX。
时间: 2024-03-12 10:43:16 浏览: 141
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时钟与日期选择器</title>
<style>
body {
font-size: 16px;
font-family: Arial, sans-serif;
color: #333;
}
.clock {
font-size: 40px;
font-weight: bold;
text-align: center;
margin: 50px 0;
}
.clock input[type="button"] {
background-color: #1E90FF;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin-right: 10px;
}
.date-picker {
margin: 50px 0;
text-align: center;
}
.date-picker select {
font-size: 20px;
padding: 5px;
margin-right: 10px;
}
#result {
width: 400px;
height: 300px;
background-color: #ADD8E6;
font-family: "楷体";
font-size: 18px;
margin-top: 50px;
padding: 10px;
}
</style>
</head>
<body>
<div class="clock">
<input type="text" id="clock" disabled>
<input type="button" value="开启" onclick="startClock()">
<input type="button" value="停止" onclick="stopClock()">
</div>
<div class="date-picker">
<select id="year"></select>
<select id="month"></select>
<select id="day"></select>
<input type="button" value="确定" onclick="showResult()">
</div>
<div id="result"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// 生成年份选择框
var currentYear = new Date().getFullYear(); // 当前年份
for (var i = currentYear - 50; i <= currentYear; i++) {
$('#year').append('<option value="' + i + '">' + i + '</option>');
}
// 生成月份选择框
for (var i = 1; i <= 12; i++) {
$('#month').append('<option value="' + i + '">' + i + '月</option>');
}
// 根据月份生成日期选择框
function generateDays() {
var year = $('#year').val();
var month = $('#month').val();
var daysInMonth = new Date(year, month, 0).getDate(); // 当月天数
$('#day').empty();
for (var i = 1; i <= daysInMonth; i++) {
$('#day').append('<option value="' + i + '">' + i + '日</option>');
}
}
$('#year,#month').on('change', function () {
generateDays();
});
// 设置当前日期
function setCurrentDate() {
var currentDate = new Date();
var year = currentDate.getFullYear();
var month = currentDate.getMonth() + 1;
var day = currentDate.getDate();
$('#year').val(year);
$('#month').val(month);
generateDays();
$('#day').val(day);
}
setCurrentDate();
// 更新时钟
function updateClock() {
var currentDate = new Date();
var hours = currentDate.getHours();
var minutes = currentDate.getMinutes();
var seconds = currentDate.getSeconds();
// 补零
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
$('#clock').val(hours + ':' + minutes + ':' + seconds);
}
var timer = null;
// 开启时钟
function startClock() {
updateClock();
timer = setInterval(updateClock, 1000);
}
// 停止时钟
function stopClock() {
clearInterval(timer);
}
// 显示结果
function showResult() {
var year = $('#year').val();
var month = $('#month').val();
var day = $('#day').val();
var time = $('#clock').val();
var result = '您选择的日期是:' + year + '年' + month + '月' + day + '日 ' + time;
$('#result').html(result);
}
</script>
</body>
</html>
```
注意事项:
1. 本代码使用 jQuery 库,请确保引入了 jQuery 库。
2. 时钟的更新使用了定时器,需要用变量 `timer` 记录定时器ID,以便于在停止时钟时清除定时器。
3. 显示结果时使用了 `html()` 方法,而不是 `text()` 方法,因为要显示的内容包含 HTML 标签,否则会被解析成普通文本。
阅读全文