1、要求年、月、日三个选择框中的数字使用jQuery代码添加，年份是今年开始向前50年，每月的天数要求与月份对应，页面打开时显示当天日期。（10分） 2、文本框以秒表的形式显示24小时制当前时间，要求时、分、秒始终使用二位数字显示，比如05：09：06，网页打开时显示当前时间，点击“停止”时钟停止计时，点击“开启”时，显示当前时间，（5分） 点击“确定”按钮使用jQuery代码完成操作：在本部分内容的下方插入一个DIV，其中显示当前所选的年、月、日和时间，设置此DIV宽400PX，高300PX，背景为淡蓝色，字体为楷体，字号为18PX。
时间: 2024-03-09 08:48:07 浏览: 11
HTML部分：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery时间选择器</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>jQuery时间选择器</h1>
<div>
<label>年：</label>
<select id="year"></select>
<label>月：</label>
<select id="month"></select>
<label>日：</label>
<select id="day"></select>
</div>
<div>
<input type="text" id="clock" readonly>
<button id="start">开始</button>
<button id="stop">停止</button>
</div>
<div>
<button id="sure">确定</button>
</div>
</div>
<div class="result"></div>
<script src="script.js"></script>
</body>
</html>
```
CSS部分：
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 600px;
margin: 50px auto;
text-align: center;
}
h1 {
margin-bottom: 50px;
}
select {
width: 100px;
font-size: 18px;
}
#clock {
width: 150px;
font-size: 24px;
text-align: center;
margin: 50px;
}
#start,
#stop,
#sure {
font-size: 18px;
padding: 5px 10px;
margin: 10px;
}
.result {
width: 400px;
height: 300px;
margin: 30px auto;
background-color: #e0f3ff;
font-family: "楷体";
font-size: 18px;
text-align: center;
line-height: 40px;
overflow: auto;
}
```
JavaScript部分：
```javascript
$(document).ready(function(){
// 初始化年份选择器
var year = new Date().getFullYear(); // 当前年份
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>');
}
// 初始化日选择器
function initDays(year, month) {
var days = new Date(year, month, 0).getDate(); // 获取当月天数
$('#day').empty();
for (var i = 1; i <= days; i++) {
$('#day').append('<option value="' + i + '">' + i + '</option>');
}
}
initDays(year, 1);
// 选择器变化时更新日选择器
$('#year, #month').change(function(){
var year = $('#year').val();
var month = $('#month').val();
initDays(year, month);
});
// 显示当前日期
var date = new Date();
$('#year').val(date.getFullYear());
$('#month').val(date.getMonth() + 1);
$('#day').val(date.getDate());
// 秒表计时
function updateTime() {
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
$('#clock').val(formatNumber(hour) + ':' + formatNumber(minute) + ':' + formatNumber(second));
}
var timer = setInterval(updateTime, 1000);
// 格式化数字为两位数
function formatNumber(number) {
if (number < 10) {
return '0' + number;
} else {
return number;
}
}
// 停止计时
$('#stop').click(function(){
clearInterval(timer);
});
// 开始计时
$('#start').click(function(){
clearInterval(timer);
timer = setInterval(updateTime, 1000);
updateTime();
});
// 确定按钮
$('#sure').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').html(result);
});
});
```
相关推荐
最新推荐
uniapp 仿微信的右边下拉选择弹出框的实现代码
主要介绍了uniapp 仿微信的右边下拉选择弹出框的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
layer提示框添加多个按钮选择的实例
//询问框 var index = layer.confirm('下载文件还是在线预览呢？', { btn: ['在线预览','下载',"关闭"], //按钮 shade: false //不显示遮罩 }, function(){ //关闭提示框 layer.close(index); }, ...
Python自动生成代码 使用tkinter图形化操作并生成代码框架
主要为大家详细介绍了Python自动生成代码，使用tkinter图形化操作并生成代码框架，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jquery实现input输入框实时输入触发事件代码
代码如下: <input id=”productName” name=”productName” class=”wid10″ type=”text” value=”” /> 代码如下: //绑定商品名称联想 $(‘#productName’).bind(‘input propertychange’, function() {...
springboot整合jquery和bootstrap框架过程图解
主要介绍了springboot整合jquery和bootstrap框架过程图解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
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. 实时数据湖架构概述**
实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势：
- **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。
- **数据民主化：**实时数据湖使各种利益相关者都可
SQL怎么实现 数据透视表
SQL可以通过使用聚合函数和GROUP BY子句来实现数据透视表。
例如，假设有一个销售记录表，其中包含产品名称、销售日期、销售数量和销售额等信息。要创建一个按照产品名称、销售日期和销售额进行汇总的数据透视表，可以使用以下SQL语句：
```
SELECT ProductName, SaleDate, SUM(SaleQuantity) AS TotalQuantity, SUM(SaleAmount) AS TotalAmount
FROM Sales
GROUP BY ProductName, SaleDate;
```
该语句将Sales表按照ProductName和SaleDat
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。