您正在使用IPV4(35.168.110.128)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】多款云产品1折起,买云服务器送免费机器,最长免费续3个月      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 中秋节 21
2022年 国庆节 42
2023年 元 旦 134
2023年 春 节 155
 
本类新增
本类热门文章
您现在的位置:首页 >> 脚本程序 >> 内容
JS实现时间选择器
内容摘要: dateTime.jsfunctionwithData(param){returnparam10?'0'+param:''+param;}functiongetLoopArray(start,end){varstart=start||0;varend=end||1;vararray=[];for(vari=start;i=end;i++){array.pus......
dateTime.js

functionwithData(param){

returnparam<10?'0'+param:''+param;

}

functiongetLoopArray(start,end){

varstart=start||0;

varend=end||1;

vararray=[];

for(vari=start;i<=end;i++){

array.push(withData(i));

}

returnarray;

}

functiongetMonthDay(year,month){

varflag=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='月份格式不正确,请重新输入!'

}

returnarray;

}

functiongetNewDateArry(){

//当前时间的处理

varnewDate=newDate();

varyear=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];

}

functiondateTimePicker(startYear,endYear,date){

//返回默认显示的数组和联动数组的声明

vardateTime=[],dateTimeArray=[[],[],[],[],[],[]];

varstart=startYear||1978;

varend=endYear||2100;

//默认开始显示数据

vardefaultDate=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

}

}

实现实例

<!DOCTYPEhtml>

<html>

<head>

<metaname="viewport"content="width=device-width"/>

<title>Index</title>

<!--引用dateTimePicker.js-->

<scriptsrc="~/Scripts/dateTime.js"></script>

<script>

window.onload=function(){

varstryear=2000;//设置开始时间2000年

varendyear=2060;//设置结束时间2060年

vardate=dateTimePicker(stryear,endyear);//调用dateTimePicker方法获取时间(开始时间,结束时间)

//定义日期时间

varyear=date.dateTimeArray[0];//年

varmonth=date.dateTimeArray[1];//月

varday=date.dateTimeArray[2];//日

vartime=date.dateTimeArray[3];//时

varminute=date.dateTimeArray[4];//分

varsecond=date.dateTimeArray[5];//秒

//将日期时间放入对应的select中

varyearInner="";

varmonthInner="";

vardayInner="";

vartimeInner="";

varminuteInner="";

varsecondInner="";

//年

for(vari=0;i<year.length;i++){

yearInner+='<option>'+year[i]+'</option>'

}

document.getElementById("yearSelect").innerHTML=yearInner;

//月

for(vari=0;i<month.length;i++){

monthInner+='<option>'+month[i]+'</option>'

}

document.getElementById("monthSelect").innerHTML=monthInner;

//日

for(vari=0;i<day.length;i++){

dayInner+='<option>'+day[i]+'</option>'

}

document.getElementById("daySelect").innerHTML=dayInner;

//时

for(vari=0;i<time.length;i++){

timeInner+='<option>'+time[i]+'</option>'

}

document.getElementById("timeSelect").innerHTML=timeInner;

//分

for(vari=0;i<minute.length;i++){

minuteInner+='<option>'+minute[i]+'</option>'

}

document.getElementById("minuteSelect").innerHTML=minuteInner;

//秒

for(vari=0;i<second.length;i++){

secondInner+='<option>'+second[i]+'</option>'

}

document.getElementById("secondSelect").innerHTML=secondInner;

}

</script>

</head>

<body>

<div>

<selectid="yearSelect"></select>

<span>-</span>

<selectid="monthSelect"></select>

<span>-</span>

<selectid="daySelect"></select>

<br/>

<selectid="timeSelect"></select>

<span>:</span>

<selectid="minuteSelect"></select>

<span>:</span>

<selectid="secondSelect"></select>

</div>

</body>

</html>

上一篇:JavaScript实现无缝轮播图的示例 下一篇:使用JS实现简单的图片切换功能
发布日期:2022/7/11
手机扫二维码直达本页
发布时间:19:01:15
点击:107
录入:壹家怡园
相关文章
Baidu

YiJiaCMS 6.3.1.220701(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2022