1、要求年、月、日三个选择框中的数字使用jQuery代码添加,年份是今年开始向前50年,每月的天数要求与月份对应,页面打开时显示当天日期。(10分) 2、文本框以秒表的形式显示24小时制当前时间,要求时、分、秒始终使用二位数字显示,比如05:09:06,网页打开时显示当前时间,点击“停止”时钟停止计时,点击“开启”时,显示当前时间,(5分) 点击“确定”按钮使用jQuery代码完成操作:在本部分内容的下方插入一个DIV,其中显示当前所选的年、月、日和时间,设置此DIV宽400PX,高300PX,背景为淡蓝色,字体为楷体,字号为18PX。
时间: 2024-03-14 09:47:56 浏览: 91
jquery-year-picker:用于 jquery UI 的年份选择器插件,例如 datepicker。 它允许用户从列表中选择年份
好的,我会根据您的要求进行回答,下面是我给出的代码实现。
1. 年月日选择框代码实现:
```html
<select id="year"></select>
<select id="month"></select>
<select id="day"></select>
```
```javascript
$(function() {
// 获取当前年份
var curYear = new Date().getFullYear();
// 添加年份选项
for (var i = curYear; i >= curYear - 50; i--) {
$('#year').append($('<option></option>').attr('value', i).text(i));
}
// 添加月份选项
for (var i = 1; i <= 12; i++) {
$('#month').append($('<option></option>').attr('value', i).text(i));
}
// 添加日期选项
$('#year, #month').on('change', function() {
var year = $('#year').val();
var month = $('#month').val();
var days = new Date(year, month, 0).getDate();
$('#day').empty();
for (var i = 1; i <= days; i++) {
$('#day').append($('<option></option>').attr('value', i).text(i));
}
});
// 初始化选项
var curMonth = new Date().getMonth() + 1;
$('#year').val(curYear);
$('#month').val(curMonth);
$('#year, #month').trigger('change');
});
```
2. 秒表代码实现:
```html
<div id="clock"></div>
<button id="start">开启</button>
<button id="stop">停止</button>
```
```javascript
$(function() {
var timer;
function updateClock() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
hours = ('0' + hours).slice(-2);
minutes = ('0' + minutes).slice(-2);
seconds = ('0' + seconds).slice(-2);
$('#clock').text(hours + ':' + minutes + ':' + seconds);
}
updateClock();
timer = setInterval(updateClock, 1000);
$('#start').on('click', function() {
clearInterval(timer);
updateClock();
timer = setInterval(updateClock, 1000);
});
$('#stop').on('click', function() {
clearInterval(timer);
});
});
```
3. 确定按钮代码实现:
```html
<button id="confirm">确定</button>
<div id="result"></div>
```
```javascript
$(function() {
$('#confirm').on('click', function() {
var year = $('#year').val();
var month = $('#month').val();
var day = $('#day').val();
var time = $('#clock').text();
var html = '<div style="width: 400px; height: 300px; background-color: #D1EEEE; font-family: KaiTi; font-size: 18px;">';
html += '<p>所选时间:' + year + '年' + month + '月' + day + '日 ' + time + '</p>';
html += '</div>';
$('#result').html(html);
});
});
```
以上就是实现您要求的功能的代码,您可以将其放在一个HTML文件中进行测试。
阅读全文