1、要求年、月、日三个选择框中的数字使用jQuery代码添加,年份是今年开始向前50年,每月的天数要求与月份对应,页面打开时显示当天日期。(10分) 2、文本框以秒表的形式显示24小时制当前时间,要求时、分、秒始终使用二位数字显示,比如05:09:06,网页打开时显示当前时间,点击“停止”时钟停止计时,点击“开启”时,显示当前时间,(5分) 点击“确定”按钮使用jQuery代码完成操作:在本部分内容的下方插入一个DIV,其中显示当前所选的年、月、日和时间,设置此DIV宽400PX,高300PX,背景为淡蓝色,字体为楷体,字号为18PX。
时间: 2024-02-29 09:53:05 浏览: 56
jquery-year-picker:用于 jquery UI 的年份选择器插件,例如 datepicker。 它允许用户从列表中选择年份
好的,你的问题我已经理解了。下面是对应的jQuery代码:
1. 添加年、月、日选择框和显示当前日期
```html
<!-- HTML 代码 -->
<select id="year"></select>
<select id="month"></select>
<select id="day"></select>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// jQuery 代码
$(function() {
// 显示当前日期
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var day = now.getDate();
// 添加年份选择框
for (var i = year; i >= year - 50; i--) {
$('#year').append('<option value="' + i + '">' + i + '</option>');
}
// 添加月份选择框
for (var i = 1; i <= 12; i++) {
$('#month').append('<option value="' + i + '">' + i + '</option>');
}
// 添加日期选择框
for (var i = 1; i <= 31; i++) {
$('#day').append('<option value="' + i + '">' + i + '</option>');
}
// 设置默认选中的值
$('#year').val(year);
$('#month').val(month);
$('#day').val(day);
});
</script>
```
2. 显示当前时间并实现秒表
```html
<!-- HTML 代码 -->
<input type="text" id="clock" value="" readonly>
<button id="start">开启</button>
<button id="stop">停止</button>
<script>
// jQuery 代码
$(function() {
// 显示当前时间
setInterval(function() {
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
if (hour < 10) hour = '0' + hour;
if (minute < 10) minute = '0' + minute;
if (second < 10) second = '0' + second;
$('#clock').val(hour + ':' + minute + ':' + second);
}, 1000);
// 实现秒表
var timer;
$('#start').click(function() {
clearInterval(timer);
timer = setInterval(function() {
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
if (hour < 10) hour = '0' + hour;
if (minute < 10) minute = '0' + minute;
if (second < 10) second = '0' + second;
$('#clock').val(hour + ':' + minute + ':' + second);
}, 1000);
});
$('#stop').click(function() {
clearInterval(timer);
});
});
</script>
```
3. 点击确定按钮添加DIV并显示所选的年、月、日和时间
```html
<!-- HTML 代码 -->
<button id="submit">确定</button>
<script>
// jQuery 代码
$(function() {
$('#submit').click(function() {
var year = $('#year').val();
var month = $('#month').val();
var day = $('#day').val();
var time = $('#clock').val();
var html = '<div style="width: 400px; height: 300px; background-color: #E0FFFF; font-family: KaiTi; font-size: 18px;">';
html += '<p>所选的日期为:' + year + '年' + month + '月' + day + '日 ' + time + '</p>';
html += '</div>';
$(html).insertAfter('#submit');
});
});
</script>
```
阅读全文