1、要求年、月、日三个选择框中的数字使用jQuery代码添加,年份是今年开始向前50年,每月的天数要求与月份对应,页面打开时显示当天日期。(10分) 2、文本框以秒表的形式显示24小时制当前时间,要求时、分、秒始终使用二位数字显示,比如05:09:06,网页打开时显示当前时间,点击“停止”时钟停止计时,点击“开启”时,显示当前时间,(5分) 点击“确定”按钮使用jQuery代码完成操作:在本部分内容的下方页面中间插入一个DIV,其中显示当前所选的年、月、日和时间,设置此DIV宽400PX,高300PX,背景为淡蓝色,字体为楷体,字号为18PX。
时间: 2024-03-14 07:47:29 浏览: 15
好的,我会尽力回答你的问题。针对你的第一个问题,可以使用以下的jQuery代码实现:
```javascript
// 获取当前日期
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1;
var day = today.getDate();
// 设置年份下拉框
for (var i = year - 50; i <= year; i++) {
$('#year').append('<option value="' + i + '">' + i + '</option>');
}
// 设置月份下拉框
for (var i = 1; i <= 12; i++) {
$('#month').append('<option value="' + i + '">' + i + '</option>');
}
// 设置日期下拉框
var daysInMonth = new Date(year, month, 0).getDate();
for (var i = 1; i <= daysInMonth; i++) {
$('#day').append('<option value="' + i + '">' + i + '</option>');
}
// 设置默认选项
$('#year').val(year);
$('#month').val(month);
$('#day').val(day);
```
上述代码首先获取了当前日期,然后使用循环语句分别设置了年、月、日下拉框的选项。其中,年份从今年开始向前50年,月份和日期则根据当前年份和月份动态设置。最后,通过设置`val`属性,将当前日期设为默认选项。
针对你的第二个问题,可以使用以下的jQuery代码实现:
```javascript
var timer; // 定时器
var stopwatch = $('#stopwatch'); // 显示时间的文本框
// 开始计时
function startTimer() {
timer = setInterval(function() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
stopwatch.val(padZero(hours) + ':' + padZero(minutes) + ':' + padZero(seconds));
}, 1000);
}
// 停止计时
function stopTimer() {
clearInterval(timer);
}
// 补零函数
function padZero(num) {
return (num < 10 ? '0' : '') + num;
}
// 页面加载时显示当前时间
startTimer();
// 点击“停止”按钮停止计时
$('#stop').click(function() {
stopTimer();
});
// 点击“开始”按钮开始计时
$('#start').click(function() {
startTimer();
});
// 点击“确定”按钮添加DIV
$('#confirm').click(function() {
var year = $('#year').val();
var month = $('#month').val();
var day = $('#day').val();
var time = stopwatch.val();
var html = '<div style="width: 400px; height: 300px; background-color: lightblue; font-family: KaiTi; font-size: 18px;">';
html += '<p>当前时间:' + year + '年' + month + '月' + day + '日 ' + time + '</p>';
html += '</div>';
$('body').append(html);
});
```
上述代码首先定义了一个定时器`timer`和一个文本框`stopwatch`,用于显示时间。接着定义了`startTimer()`和`stopTimer()`函数,分别用于开始和停止计时,并通过`setInterval()`函数每秒更新一次时间。在页面加载完毕后,自动开始计时。点击“停止”按钮后,调用`stopTimer()`函数停止计时;点击“开始”按钮后,调用`startTimer()`函数开始计时。点击“确定”按钮后,获取年、月、日和时间的值,然后使用字符串拼接的方式添加一个DIV,将其插入到页面中。