1、要求年、月、日三个选择框中的数字使用jQuery代码添加,年份是今年开始向前50年,每月的天数要求与月份对应,页面打开时显示当天日期。 2、文本框以秒表的形式显示24小时制当前时间,要求时、分、秒始终使用二位数字显示,比如05:09:06,网页打开时显示当前时间,点击“停止”时钟停止计时,点击“开启”时,显示当前时间。 3、点击“确定”按钮使用jQuery代码完成操作:在本部分内容的下方插入一个DIV,其中显示当前所选的年、月、日和时间,设置此DIV宽400PX,高300PX,背景为淡蓝色,字体为楷体,字号为18PX。
时间: 2024-03-17 10:43:13 浏览: 90
jquery-year-picker:用于 jquery UI 的年份选择器插件,例如 datepicker。 它允许用户从列表中选择年份
好的,我可以为您提供一些关于实现您的需求的 jQuery 代码示例。首先是第一个问题,实现年、月、日三个选择框中的数字使用 jQuery 代码添加,年份是今年开始向前50年,每月的天数要求与月份对应,页面打开时显示当天日期。
HTML 代码:
```html
<label for="year">年:</label>
<select id="year"></select>
<label for="month">月:</label>
<select id="month"></select>
<label for="day">日:</label>
<select id="day"></select>
```
jQuery 代码:
```javascript
// 获取当前年份和月份
var today = new Date();
var currentYear = today.getFullYear();
var currentMonth = today.getMonth() + 1;
// 添加年份选项
for (var i = currentYear; i >= currentYear - 50; i--) {
$('#year').append('<option value="' + i + '">' + i + '</option>');
}
// 添加月份选项
for (var i = 1; i <= 12; i++) {
$('#month').append('<option value="' + i + '">' + i + '</option>');
}
// 根据年份和月份计算天数并添加选项
function addDays() {
var year = parseInt($('#year').val());
var month = parseInt($('#month').val());
var days = new Date(year, month, 0).getDate();
$('#day').empty();
for (var i = 1; i <= days; i++) {
$('#day').append('<option value="' + i + '">' + i + '</option>');
}
}
// 初始化选项
$('#year').val(currentYear);
$('#month').val(currentMonth);
addDays();
// 监听年份和月份变化事件
$('#year, #month').on('change', function() {
addDays();
});
// 页面打开时显示当天日期
$('#year').val(today.getFullYear());
$('#month').val(today.getMonth() + 1);
$('#day').val(today.getDate());
```
接下来是第二个问题,文本框以秒表的形式显示24小时制当前时间,要求时、分、秒始终使用二位数字显示,比如05:09:06,网页打开时显示当前时间,点击“停止”时钟停止计时,点击“开启”时,显示当前时间。
HTML 代码:
```html
<input type="text" id="clock" readonly>
<button id="start">开启</button>
<button id="stop">停止</button>
```
jQuery 代码:
```javascript
// 更新时钟显示
function updateClock() {
var now = new Date();
var hours = now.getHours().toString().padStart(2, '0');
var minutes = now.getMinutes().toString().padStart(2, '0');
var seconds = now.getSeconds().toString().padStart(2, '0');
$('#clock').val(hours + ':' + minutes + ':' + seconds);
}
// 页面打开时显示当前时间
updateClock();
var timer; // 定时器
// 点击“开启”按钮开始计时
$('#start').on('click', function() {
timer = setInterval(updateClock, 1000);
});
// 点击“停止”按钮停止计时
$('#stop').on('click', function() {
clearInterval(timer);
});
```
最后是第三个问题,点击“确定”按钮使用 jQuery 代码完成操作:在本部分内容的下方插入一个 DIV,其中显示当前所选的年、月、日和时间,设置此 DIV 宽 400PX,高 300PX,背景为淡蓝色,字体为楷体,字号为 18PX。
HTML 代码:
```html
<label for="year">年:</label>
<select id="year"></select>
<label for="month">月:</label>
<select id="month"></select>
<label for="day">日:</label>
<select id="day"></select>
<button id="confirm">确定</button>
<div id="result"></div>
```
jQuery 代码:
```javascript
// 获取当前年份和月份
var today = new Date();
var currentYear = today.getFullYear();
var currentMonth = today.getMonth() + 1;
// 添加年份选项
for (var i = currentYear; i >= currentYear - 50; i--) {
$('#year').append('<option value="' + i + '">' + i + '</option>');
}
// 添加月份选项
for (var i = 1; i <= 12; i++) {
$('#month').append('<option value="' + i + '">' + i + '</option>');
}
// 根据年份和月份计算天数并添加选项
function addDays() {
var year = parseInt($('#year').val());
var month = parseInt($('#month').val());
var days = new Date(year, month, 0).getDate();
$('#day').empty();
for (var i = 1; i <= days; i++) {
$('#day').append('<option value="' + i + '">' + i + '</option>');
}
}
// 初始化选项
$('#year').val(currentYear);
$('#month').val(currentMonth);
addDays();
// 监听年份和月份变化事件
$('#year, #month').on('change', function() {
addDays();
});
// 页面打开时显示当天日期
$('#year').val(today.getFullYear());
$('#month').val(today.getMonth() + 1);
$('#day').val(today.getDate());
// 点击“确定”按钮更新结果
$('#confirm').on('click', function() {
var year = $('#year').val();
var month = $('#month').val();
var day = $('#day').val();
var time = $('#clock').val();
var result = year + '年' + month + '月' + day + '日 ' + time;
$('#result').text(result).css({
'width': '400px',
'height': '300px',
'background-color': 'lightblue',
'font-family': 'KaiTi',
'font-size': '18px'
});
});
```
希望这些代码可以帮助您实现您的需求。
阅读全文