時間選擇器用JS來實現(xiàn)

3403771864 發(fā)布于2022-10-27 22:42 / 338人閱讀

　　本文主主要講時間選擇器用JS來實現(xiàn)，具體內容如下

　　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) {
　　// 返回默認顯示的數(shù)組和聯(lián)動數(shù)組的聲明
　　var dateTime = [], dateTimeArray = [[], [], [], [], [], []];
　　var start = startYear || 1978;
　　var end = endYear || 2100;
　　// 默認開始顯示數(shù)據(jù)
　　var defaultDate = date ? [...date.split(' ')[0].split('-'), ...date.split(' ')[1].split(':')] : getNewDateArry();
　　// 處理聯(lián)動列表數(shù)據(jù)
　　/*年月日 時分秒*/
　　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
　　}
　　}

　　實現(xiàn)實例　

　<!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>

　　詳細代碼內容已敘述完，歡迎大家實踐運用，后續(xù)關注我們更多精彩內容。

GPU云服務器云服務器 js實現(xiàn)上下鍵選擇 js導出來的數(shù)據(jù) 線性時間選擇 jsp實現(xiàn)選擇

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/128228.html

一步一步搭建一個圖片上傳網站（后臺服務器用nodejs）

摘要：把文件上傳路徑指定到然后用當前日期和文件名命名上傳過來的文件。后端利用建立服務器，利用中間件指定文件路徑。利用這個前端和后端技術，我們基本上就可以做出一個圖片上傳存儲的基本網站核心。前幾天看了騰訊云社區(qū)的一個文件上傳的文章文件上傳那些事兒，大體上講了以下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選擇器

摘要：優(yōu)先級相同，與元素近的選擇器生效。使用建議建議說明避免將通用選擇器作為通用選擇器。避免選擇器用標簽。避免使用子選擇器。后代選擇器是開銷最最最最大的。看了一下最近寫的css代碼,發(fā)現(xiàn)基本只用到了id選擇器(js里)、后代選擇器和類選擇器(因為聽大牛推薦使用類選擇器,然后就開始大篇幅使用。。。)。所以想深入學習一下css選擇器和css的效率優(yōu)化,先記錄所學的一部分,以備后續(xù)補充。選擇器...

qpwoeiru96 2019-08-30 15:55 評論0 收藏0
前端（三）之選擇器高級與盒模型

摘要：內容不會被修剪，會呈現(xiàn)在元素框之外。內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。值描述內聯(lián)塊級內聯(lián)塊前端之 CSS 選擇器高級與盒模型前言先回顧昨日的內容，昨天講了 w3c 的整個架構，由結構層>布局層>內容層三部分組成，了解了 CSS 的三種引入方式，行間式最簡單直接；內聯(lián)式解耦合，可讀性強；外聯(lián)式適合團隊高效開發(fā)，耦合性低，復用性強，了解了三種選擇器，并且 id 選擇器>...

番茄西紅柿 2019-04-23 13:08 評論0 收藏0
CSS 小結筆記之選擇器

摘要：例如對于上面的偽元素選擇器，想要改變第一個字母的顏色大小則需要增加一個標簽層疊樣式表英文全稱是一種用來表現(xiàn)標準通用標記語言的一個應用或標準通用標記語言的一個子集等文件樣式的計算機語言。Css選擇器主要分為以下幾類類選擇器 ID選擇器通配符選擇器標簽選擇器偽類選擇器復合選擇器 1、類選擇器：通過.classname來選擇例如 .color2 { co...

番茄西紅柿 2019-04-23 13:30 評論0 收藏0