设计下图所示内容，完成下列三项内容：（本题共25分） 1、要求年、月、日三个选择框中的数字使用jQuery代码添加，年份是今年开始向前50年，每月的天数要求与月份对应，页面打开时显示当天日期。（10分） 2、文本框以秒表的形式显示24小时制当前时间，要求时、分、秒始终使用二位数字显示，比如05：09：06，网页打开时显示当前时间，点击“停止”时钟停止计时，点击“开启”时，显示当前时间，（5分） 3、点击“确定”按钮使用jQuery代码完成操作：在本部分内容的下方插入一个DIV，其中显示当前所选的年、月、日和时间，设置此DIV宽400PX，高300PX，背景为淡蓝色，字体为楷体，字号为18PX。
时间: 2024-03-12 17:43:16 浏览: 19
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时钟与日期选择器</title>
<style>
body {
font-size: 16px;
font-family: Arial, sans-serif;
color: #333;
}
.clock {
font-size: 40px;
font-weight: bold;
text-align: center;
margin: 50px 0;
}
.clock input[type="button"] {
background-color: #1E90FF;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin-right: 10px;
}
.date-picker {
margin: 50px 0;
text-align: center;
}
.date-picker select {
font-size: 20px;
padding: 5px;
margin-right: 10px;
}
#result {
width: 400px;
height: 300px;
background-color: #ADD8E6;
font-family: "楷体";
font-size: 18px;
margin-top: 50px;
padding: 10px;
}
</style>
</head>
<body>
<div class="clock">
<input type="text" id="clock" disabled>
<input type="button" value="开启" onclick="startClock()">
<input type="button" value="停止" onclick="stopClock()">
</div>
<div class="date-picker">
<select id="year"></select>
<select id="month"></select>
<select id="day"></select>
<input type="button" value="确定" onclick="showResult()">
</div>
<div id="result"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// 生成年份选择框
var currentYear = new Date().getFullYear(); // 当前年份
for (var i = currentYear - 50; i <= currentYear; i++) {
$('#year').append('<option value="' + i + '">' + i + '</option>');
}
// 生成月份选择框
for (var i = 1; i <= 12; i++) {
$('#month').append('<option value="' + i + '">' + i + '月</option>');
}
// 根据月份生成日期选择框
function generateDays() {
var year = $('#year').val();
var month = $('#month').val();
var daysInMonth = new Date(year, month, 0).getDate(); // 当月天数
$('#day').empty();
for (var i = 1; i <= daysInMonth; i++) {
$('#day').append('<option value="' + i + '">' + i + '日</option>');
}
}
$('#year,#month').on('change', function () {
generateDays();
});
// 设置当前日期
function setCurrentDate() {
var currentDate = new Date();
var year = currentDate.getFullYear();
var month = currentDate.getMonth() + 1;
var day = currentDate.getDate();
$('#year').val(year);
$('#month').val(month);
generateDays();
$('#day').val(day);
}
setCurrentDate();
// 更新时钟
function updateClock() {
var currentDate = new Date();
var hours = currentDate.getHours();
var minutes = currentDate.getMinutes();
var seconds = currentDate.getSeconds();
// 补零
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
$('#clock').val(hours + ':' + minutes + ':' + seconds);
}
var timer = null;
// 开启时钟
function startClock() {
updateClock();
timer = setInterval(updateClock, 1000);
}
// 停止时钟
function stopClock() {
clearInterval(timer);
}
// 显示结果
function showResult() {
var year = $('#year').val();
var month = $('#month').val();
var day = $('#day').val();
var time = $('#clock').val();
var result = '您选择的日期是：' + year + '年' + month + '月' + day + '日 ' + time;
$('#result').html(result);
}
</script>
</body>
</html>
```
注意事项：
1. 本代码使用 jQuery 库，请确保引入了 jQuery 库。
2. 时钟的更新使用了定时器，需要用变量 `timer` 记录定时器ID，以便于在停止时钟时清除定时器。
3. 显示结果时使用了 `html()` 方法，而不是 `text()` 方法，因为要显示的内容包含 HTML 标签，否则会被解析成普通文本。
相关推荐
最新推荐
程控交换实验、用户模块电路 主要完成BORSCHT七种功能，它由下列电路组成：
按一次该键则显示下一个时间值，三个值循环显示，当按下“确认”键时，就选定当前显示值供系统使用，按“复位”键则清除该次时间的设定。 “会议电话”： 该键为召开电话会议的按键。电话会议设置用户1为主叫方，...
华中科技大学操作系统实验报告.docx
4. 编写程序创建如图所示的进程树，在每个进程中显示当前进程ID和父进程ID。 实验三 Linux进程间通信 一．实验目的 （1） 分析进程争用临界资源的现象，学习解决进程互斥的方法； （2） 学习如何利用进程的“软中断...
电大2013年秋)计算机应用基础形成性考核册题目及答案
①创建如图所示的一个目录结构； ②在考试文件夹下的CWINLX下创建一个名为AB5的文件夹； ③将考试文件夹下的KS3.txt及KS5.tst文件移到AB5文件夹中； ④将考试文件夹下的LS文件夹换名为KS5； ⑤将KS4.txt设置成只读...
都是想要的考试题 速度下载
一、单项选择题（每小题 1 分共 10 分） 1. 0.6875D的二进制为 ( ) ① 0.0111B ② 0.1101B ③ 0.1011B ④ 0.1111B 2. 一条指令执行完后，CS＝1000H，IP=1052H，则下一条指令的地址为 ( ) ① ...
asm 汇编语言基础知识
汇编语言程序设计上机过程如图1.1所示。 图1.1 汇编语言程序上机过程 （一）用编辑程序EDIT建立汇编语言源程序文件(ASM文件) 例如，编写程序，判断一个年份是否是闰年的汇编语言源程序，可以在DOS模式下用...
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
实现实时数据湖架构：Kafka与Hive集成
# 1. 实时数据湖架构概述**
实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势：
- **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。
- **数据民主化：**实时数据湖使各种利益相关者都可
云原生架构与soa架构区别？
云原生架构和SOA架构是两种不同的架构模式，主要有以下区别：
1. 设计理念不同：
云原生架构的设计理念是“设计为云”，注重应用程序的可移植性、可伸缩性、弹性和高可用性等特点。而SOA架构的设计理念是“面向服务”，注重实现业务逻辑的解耦和复用，提高系统的灵活性和可维护性。
2. 技术实现不同：
云原生架构的实现技术包括Docker、Kubernetes、Service Mesh等，注重容器化、自动化、微服务等技术。而SOA架构的实现技术包括Web Services、消息队列等，注重服务化、异步通信等技术。
3. 应用场景不同：
云原生架构适用于云计算环境下的应用场景，如容器化部署、微服务
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。