时间选择器用JS来实现

3403771864 发布于2022-10-27 22:42 / 648人阅读

　　本文主主要讲时间选择器用JS来实现，具体内容如下

　　dateTime.js

　function withData(param) {
　　return param < 10 ? '0' + param : '' + param;
　　}
　　function getLoopArray(start, end) {
　　var start = start || 0;
　　var end = end || 1;
　　var array = [];
　　for (var i = start; i <= end; i++) {
　　array.push(withData(i));
　　}
　　return array;
　　}
　　function getMonthDay(year, month) {
　　var flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0), array = null;
　　switch (month) {
　　case '01':
　　case '03':
　　case '05':
　　case '07':
　　case '08':
　　case '10':
　　case '12':
　　array = getLoopArray(1, 31)
　　break;
　　case '04':
　　case '06':
　　case '09':
　　case '11':
　　array = getLoopArray(1, 30)
　　break;
　　case '02':
　　array = flag ? getLoopArray(1, 29) : getLoopArray(1, 28)
　　break;
　　default:
　　array = '月份格式不正确，请重新输入！'
　　}
　　return array;
　　}
　　function getNewDateArry() {
　　// 当前时间的处理
　　var newDate = new Date();
　　var year = withData(newDate.getFullYear()),
　　mont = withData(newDate.getMonth() + 1),
　　date = withData(newDate.getDate()),
　　hour = withData(newDate.getHours()),
　　minu = withData(newDate.getMinutes()),
　　seco = withData(newDate.getSeconds());
　　return [year, mont, date, hour, minu, seco];
　　}
　　function dateTimePicker(startYear, endYear, date) {
　　// 返回默认显示的数组和联动数组的声明
　　var dateTime = [], dateTimeArray = [[], [], [], [], [], []];
　　var start = startYear || 1978;
　　var end = endYear || 2100;
　　// 默认开始显示数据
　　var defaultDate = date ? [...date.split(' ')[0].split('-'), ...date.split(' ')[1].split(':')] : getNewDateArry();
　　// 处理联动列表数据
　　/*年月日 时分秒*/
　　dateTimeArray[0] = getLoopArray(start, end);
　　dateTimeArray[1] = getLoopArray(1, 12);
　　dateTimeArray[2] = getMonthDay(defaultDate[0], defaultDate[1]);
　　dateTimeArray[3] = getLoopArray(0, 23);
　　dateTimeArray[4] = getLoopArray(0, 59);
　　dateTimeArray[5] = getLoopArray(0, 59);
　　dateTimeArray.forEach((current, index) => {
　　dateTime.push(current.indexOf(defaultDate[index]));
　　}); return {
　　dateTimeArray: dateTimeArray,
　　dateTime: dateTime
　　}
　　}

　　实现实例　

　<!DOCTYPE html>
　　<html>
　　<head>
　　<meta name="viewport" content="width=device-width" />
　　<title>Index</title>
　　<!-- 引用dateTimePicker.js -->
　　<script src="~/Scripts/dateTime.js"></script>
　　<script>
　　window.onload = function () {
　　var stryear = 2000; //设置开始时间2000年
　　var endyear = 2060; //设置结束时间2060年
　　var date = dateTimePicker(stryear,endyear); //调用dateTimePicker方法获取时间(开始时间，结束时间）
　　//定义日期时间
　　var year = date.dateTimeArray[0]; //年
　　var month = date.dateTimeArray[1];//月
　　var day = date.dateTimeArray[2];//日
　　var time = date.dateTimeArray[3];//时
　　var minute = date.dateTimeArray[4];//分
　　var second = date.dateTimeArray[5];//秒
　　//将日期时间放入对应的select中
　　var yearInner = "";
　　var monthInner = "";
　　var dayInner = "";
　　var timeInner = "";
　　var minuteInner = "";
　　var secondInner = "";
　　//年
　　for (var i = 0; i < year.length; i++) {
　　yearInner += '<option>' + year[i] + '</option>'
　　}
　　document.getElementById("yearSelect").innerHTML = yearInner;
　　//月
　　for (var i = 0; i < month.length; i++) {
　　monthInner += '<option>' + month[i] + '</option>'
　　}
　　document.getElementById("monthSelect").innerHTML = monthInner;
　　//日
　　for (var i = 0; i < day.length; i++) {
　　dayInner += '<option>' + day[i] + '</option>'
　　}
　　document.getElementById("daySelect").innerHTML = dayInner;
　　//时
　　for (var i = 0; i < time.length; i++) {
　　timeInner += '<option>' + time[i] + '</option>'
　　}
　　document.getElementById("timeSelect").innerHTML = timeInner;
　　//分
　　for (var i = 0; i < minute.length; i++) {
　　minuteInner += '<option>' + minute[i] + '</option>'
　　}
　　document.getElementById("minuteSelect").innerHTML = minuteInner;
　　//秒
　　for (var i = 0; i < second.length; i++) {
　　secondInner += '<option>' + second[i] + '</option>'
　　}
　　document.getElementById("secondSelect").innerHTML = secondInner;
　　}
　　</script>
　　</head>
　　<body>
　　<div>
　　<select id="yearSelect"></select>
　　<span>-</span>
　　<select id="monthSelect"></select>
　　<span>-</span>
　　<select id="daySelect"></select>
　　<br />
　　<select id="timeSelect"></select>
　　<span>:</span>
　　<select id="minuteSelect"></select>
　　<span>:</span>
　　<select id="secondSelect"></select>
　　</div>
　　</body>
　　</html>

　　详细代码内容已叙述完，欢迎大家实践运用，后续关注我们更多精彩内容。

云服务器 GPU云服务器 js实现上下键选择 js导出来的数据线性时间选择 jsp实现选择

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/128228.html

一步一步搭建一个图片上传网站（后台服务器用nodejs）

摘要：把文件上传路径指定到然后用当前日期和文件名命名上传过来的文件。后端利用建立服务器，利用中间件指定文件路径。利用这个前端和后端技术，我们基本上就可以做出一个图片上传存储的基本网站核心。前几天看了腾讯云社区的一个文件上传的文章文件上传那些事儿，大体上讲了以下h5中图片上传的几个核心原理，但是没有后端接受的服务器代码，没法做测试。也没有具体的一个实例都是一些基本的原理片段，并且ui界面也不...

Darkgel 2019-08-20 16:21 评论0 收藏0
js 判断是否网络断了

摘要：方法二轮询你懂的方法三利用的事件通过轮询生成通过的事件判断是否断网此方法弱点就是耗流量一像素的空轮询一次手机上用那就蛋疼了这个样子就会偷偷跑流量。 showImg(https://img.shields.io/github/issues/jaywcjlove/onlinenetwork.svg); showImg(https://img.shields.io/github/forks/...

aervon 2019-08-21 10:26 评论0 收藏0
CSS选择器

摘要：优先级相同，与元素近的选择器生效。使用建议建议说明避免将通用选择器作为通用选择器。避免选择器用标签。避免使用子选择器。后代选择器是开销最最最最大的。看了一下最近写的css代码,发现基本只用到了id选择器(js里)、后代选择器和类选择器(因为听大牛推荐使用类选择器,然后就开始大篇幅使用。。。)。所以想深入学习一下css选择器和css的效率优化,先记录所学的一部分,以备后续补充。选择器...

qpwoeiru96 2019-08-30 15:55 评论0 收藏0
前端（三）之选择器高级与盒模型

摘要：内容不会被修剪，会呈现在元素框之外。内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。值描述内联块级内联块前端之 CSS 选择器高级与盒模型前言先回顾昨日的内容，昨天讲了 w3c 的整个架构，由结构层>布局层>内容层三部分组成，了解了 CSS 的三种引入方式，行间式最简单直接；内联式解耦合，可读性强；外联式适合团队高效开发，耦合性低，复用性强，了解了三种选择器，并且 id 选择器>...

番茄西红柿 2019-04-23 13:08 评论0 收藏0
CSS 小结笔记之选择器

摘要：例如对于上面的伪元素选择器，想要改变第一个字母的颜色大小则需要增加一个标签层叠样式表英文全称是一种用来表现标准通用标记语言的一个应用或标准通用标记语言的一个子集等文件样式的计算机语言。Css选择器主要分为以下几类类选择器 ID选择器通配符选择器标签选择器伪类选择器复合选择器 1、类选择器：通过.classname来选择例如 .color2 { co...

番茄西红柿 2019-04-23 13:30 评论0 收藏0