1、要求年、月、日三个选择框中的数字使用jQuery代码添加,年份是今年开始向前50年,每月的天数要求与月份对应,页面打开时显示当天日期。(10分) 2、文本框以秒表的形式显示24小时制当前时间,要求时、分、秒始终使用二位数字显示,比如05:09:06,网页打开时显示当前时间,点击“停止”时钟停止计时,点击“开启”时,显示当前时间,(5分) 点击“确定”按钮使用jQuery代码完成操作:在本部分内容的下方插入一个DIV,其中显示当前所选的年、月、日和时间,设置此DIV宽400PX,高300PX,背景为淡蓝色,字体为楷体,字号为18PX。(10分)
时间: 2024-02-29 15:52:08 浏览: 10
好的,我知道了。下面是对应的jQuery代码:
第一个问题:
HTML代码:
```html
<select id="year"></select>
<select id="month"></select>
<select id="day"></select>
```
jQuery代码:
```javascript
$(function() {
// 年份从今年开始向前50年
var startYear = new Date().getFullYear() - 50;
for (var i = startYear; i <= new Date().getFullYear(); i++) {
$('#year').append($('<option>').val(i).text(i));
}
// 月份和对应的天数
var monthDays = [
{ month: 1, days: 31 },
{ month: 2, days: 28 },
{ month: 3, days: 31 },
{ month: 4, days: 30 },
{ month: 5, days: 31 },
{ month: 6, days: 30 },
{ month: 7, days: 31 },
{ month: 8, days: 31 },
{ month: 9, days: 30 },
{ month: 10, days: 31 },
{ month: 11, days: 30 },
{ month: 12, days: 31 }
];
// 填充月份和天数
for (var i = 1; i <= 12; i++) {
$('#month').append($('<option>').val(i).text(i));
}
$('#month').change(function() {
var selectedMonth = parseInt($(this).val());
var selectedYear = parseInt($('#year').val());
var days = monthDays[selectedMonth-1].days;
// 判断是否是闰年
if (selectedMonth == 2) {
if ((selectedYear % 4 == 0 && selectedYear % 100 != 0) || selectedYear % 400 == 0) {
days = 29;
}
}
$('#day').empty();
for (var i = 1; i <= days; i++) {
$('#day').append($('<option>').val(i).text(i));
}
});
// 填充当天日期
var today = new Date();
$('#year').val(today.getFullYear());
$('#month').val(today.getMonth() + 1);
$('#month').trigger('change');
$('#day').val(today.getDate());
});
```
第二个问题:
HTML代码:
```html
<input type="text" id="time" value="">
<button id="start">开始</button>
<button id="stop">停止</button>
```
jQuery代码:
```javascript
$(function() {
var timer;
function updateClock() {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
hours = ('0' + hours).slice(-2);
minutes = ('0' + minutes).slice(-2);
seconds = ('0' + seconds).slice(-2);
$('#time').val(hours + ':' + minutes + ':' + seconds);
}
// 更新时钟
updateClock();
timer = setInterval(updateClock, 1000);
// 停止时钟
$('#stop').click(function() {
clearInterval(timer);
});
// 开始时钟
$('#start').click(function() {
clearInterval(timer);
updateClock();
timer = setInterval(updateClock, 1000);
});
});
```
第三个问题:
HTML代码:
```html
<button id="confirm">确定</button>
<div id="selected"></div>
```
jQuery代码:
```javascript
$(function() {
$('#confirm').click(function() {
var year = $('#year').val();
var month = $('#month').val();
var day = $('#day').val();
var time = $('#time').val();
var html = '所选的年、月、日和时间为:<br>';
html += '年:' + year + '<br>';
html += '月:' + month + '<br>';
html += '日:' + day + '<br>';
html += '时间:' + time + '<br>';
$('#selected').html(html);
$('#selected').css({
'width': '400px',
'height': '300px',
'background-color': '#ADD8E6',
'font-family': '楷体',
'font-size': '18px'
});
});
});
```