纯js实现时间控件（年⽉⽇ 时分秒）
最近⼀个需求需要实现年⽉⽇ 时分秒的时间控件，jquery⾃带的有datepicker/timepicker，但是总感觉不太好看，于是在⽹上搜了很多，偶然见到⼀个，很好很强⼤，⽤纯js来实现，共享⼀下哈
js
---------------------------------------------------------------------------------------
var bMoveable = true;
var strFrame;
document.writeln('<iframe id=endDateLayer frameborder=0 width=162 height=211 ></iframe>');
strFrame = '<style>';
strFrame += 'INPUT.button{BORDER-RIGHT: #63A3E9 1px solid;BORDER-TOP: #63A3E9 1px solid;BORDER-LEFT:
#63A3E9 1px solid;';
strFrame += 'BORDER-BOTTOM: #63A3E9 1px solid;BACKGROUND-COLOR: #63A3E9;font-family：宋体;}';
strFrame += 'TD{FONT-SIZE: 9pt;font-family：宋体;}';
strFrame += '</style>';
strFrame += '<scr' + 'ipt>';
strFrame += 'var datelayerx,datelayery;';
strFrame += 'var bDrag;';
strFrame += 'usemove()';
strFrame += '{if(bDrag && window.event.button==1)';
strFrame += ' {var DateLayer=parent.dDateLayer.style;';
strFrame += ' DateLayer.posLeft += window.event.clientX-datelayerx;';
strFrame += ' DateLayer.posTop += window.event.clientY-datelayery;}}';
strFrame += 'function DragStart()';
strFrame += '{var DateLayer=parent.dDateLayer.style;';
strFrame += ' datelayerx=window.event.clientX;';
strFrame += ' datelayery=window.event.clientY;';
strFrame += ' bDrag=true;}';
strFrame += 'function DragEnd(){';
strFrame += ' bDrag=false;}';
strFrame += '</scr' + 'ipt>';
strFrame += '<div onselectstart="return false">';
strFrame += '<span id=tmpSelectYearLayer style="z-index: 9999;position: absolute;top: 3; left: 19;di
splay: none"></span>'; strFrame += '<span id=tmpSelectMonthLayer ></span>'; strFrame += '<span id=tmpSelectHourLayer >
</span>';
strFrame += '<span id=tmpSelectMinuteLayer >
</span>';
strFrame += '<span id=tmpSelectSecondLayer >
</span>';
strFrame += '<table border=1 cellspacing=0 cellpadding=0 width=142 height=160 bordercolor=#63A3E9
bgcolor=#63A3E9 >';
strFrame += ' <tr><td width=142 height=23 bgcolor=#FFFFFF>';
strFrame += ' <table border=0 cellspacing=1 cellpadding=0 width=158 height=23>';
strFrame += ' <tr align=center >';
strFrame += ' <td width=16 align=center bgcolor=#63A3E9 '; strFrame += ' οnclick="izzPrevM()" title="向前翻 1 ⽉" ><b ><</b></td>';
strFrame += ' <td width=60 align="center" bgcolor="#63A3E9" ';
strFrame += ' οnmοuseοver="style.backgroundColor=\'#aaccf3\'"';
strFrame += ' οnmοuseοut="style.backgroundColor=\'#63A3E9\'" ';
strFrame += ' οnclick="pSelectYearInnerHTML(this.innerText.substring(0,4))" ';
strFrame += ' title="点击这⾥选择年份"><span id=meizzYearHead></span></td>';
strFrame += ' <td width=48 align="center" ';
strFrame += ' bgcolor="#63A3E9" οnmοuseοver="style.backgroundColor=\'#aaccf3\'" ';
strFrame += ' οnmοuseοut="style.backgroundColor=\'#63A3E9\'" ';
strFrame += ' οnclick="pSelectMonthInnerHTML (this.innerText.length==3?
this.innerText.substring(0,1):this.innerText.substring(0,2))"';
strFrame += ' title="点击这⾥选择⽉份"><span id=meizzMonthHead ></span></td>';
strFrame += ' <td width=16 bgcolor=#63A3E9 align=center '; strFrame += ' οnclick="izzNextM()" title="向后翻 1 ⽉" ><b >></b></td>';
strFrame += ' </tr>';
strFrame += ' </table></td></tr>';
strFrame += ' <tr><td width=142 height=18 >';
strFrame += ' <table border=0 cellspacing=0 cellpadding=2 bgcolor=#63A3E9 ' + (bMoveable ?
'οnmοusedοwn="DragStart()" οnmοuseup="DragEnd()"': '');
strFrame += ' BORDERCOLORLIGHT=#63A3E9 BORDERCOLORDARK=#FFFFFF width=140 height=20 >';
strFrame += ' <tr><td width=20> ⽇</td>';
strFrame += '<td > ⼀</td><td > ⼆
</td>';
strFrame += '<td > ；三</td><td > ；四</td>';
strFrame += '<td > ；五</td><td > ；六</td></tr>';
strFrame += '</table></td></tr>';
strFrame += ' <tr ><td width=142 height=120 >';
strFrame += ' <table border=1 cellspacing=2 cellpadding=2 BORDERCOLORLIGHT=#63A3E9
BORDERCOLORDARK=#FFFFFF bgcolor=#fff8ec width=140 height=120 >';
var n = 0;
for (j = 0; j < 5; j++) {
strFrame += ' <tr align=center >';
for (i = 0; i < 7; i++) {
strFrame += '<td width=20 height=20 id=meizzDay' + n + '
οizzDayClick(this.innerText,0)></td>';
n++;
}
strFrame += '</tr>';
}
strFrame += ' <tr align=center >';
for (i = 35; i < 37; i++) strFrame += '<td width=20 height=20 id=meizzDay' + i + '
οnclick="izzDayClick(this.innerText,0)"></td>';
strFrame += ' <td colspan=5 align=right ><span οnclick="parent.setNull()" ';
strFrame += ' οnmοuseοver="lor=\'#ff0000\'" οnmοuseοut="lor=\'#1478eb\'" title="将⽇期置空">置空</span> <span οnclick="izzToday()" ';
strFrame += ' οnmοuseοver="lor=\'#ff0000\'" οnmοuseοut="lor=\'#1478eb\'" title="当前⽇期时间">当前</span> <span id=evaAllOK οnmοuseοver="lor=\'#ff0000\'"
οnmοuseοut="lor=\'#1478eb\'" οnclick="parent.closeLayer()" title="关闭⽇历">关闭 </span></td></tr>'; strFrame += ' </table></td></tr><tr ><td >';
strFrame += ' <table border=0 cellspacing=1 cellpadding=0 width=100% bgcolor=#FFFFFF height=22 >';
strFrame += ' <tr bgcolor="#63A3E9"><td id=bUseTimeLayer width=30 title="点击这⾥启⽤/禁⽤时间"';
strFrame += ' οnmοuseοver="style.backgroundColor=\'#aaccf3\'" align=center
οnmοuseοut="style.backgroundColor=\'#63A3E9\'"';
strFrame += ' οnclick="parent.UseTime(this)">';
strFrame += ' <span></span></td>';
strFrame += ' <td οnclick="pSelectHourInnerHTML(this.innerText.length==3?
this.innerText.substring(0,1):this.innerText.substring(0,2))"';
strFrame += ' οnmοuseοver="style.backgroundColor=\'#aaccf3\'" οnmοuseοut="style.backgroundColor=\'#63A3E9\'"'; strFrame += ' title="点击这⾥选择时间" align=center width=42>';
strFrame += ' <span id=meizzHourHead></span></td>';
strFrame += ' <td οnclick="pSelectMinuteInnerHTML(this.innerText.length==3?
this.innerText.substring(0,1):this.innerText.substring(0,2))"';
strFrame += ' οnmοuseοver="style.backgroundColor=\'#aaccf3\'" οnmοuseοut="style.backgroundColor=\'#63A3E9\'"'; strFrame += ' title="点击这⾥选择时间" align=center width=42>';
strFrame += ' <span id=meizzMinuteHead></span></td>';
strFrame += ' <td οnclick="pSelectSecondInnerHTML(this.innerText.length==3?
this.innerText.substring(0,1):this.innerText.substring(0,2))"';
strFrame += ' οnmοuseοver="style.backgroundColor=\'#aaccf3\'" οnmοuseοut="style.backgroundColor=\'#63A3E9\'"'; strFrame += ' title="点击这⾥选择时间" align=center width=42>';
strFrame += ' <span id=meizzSecondHead></span></td>';
strFrame += ' </tr></table></td></tr></table></div>';
dDateLayer.document.writeln(strFrame);
dDateLayer.document.close(); // 解决ie进度条不结束的问题
// ==================================================== WEB 页⾯显⽰部分
======================================================
var outObject;
var outButton; // 点击的按钮
var outDate = ""; // 存放对象的⽇期
var bUseTime = true; // 是否使⽤时间
var odatelayer = dDateLayer.document.all; // 存放⽇历对象
var odatelayer = dDateLayer.document.all;
// odatelayer.bUseTimeLayer.innerText="NO";
bImgSwitch();
odatelayer.bUseTimeLayer.innerHTML = bImg;
function setday(tt, obj) // 主调函数
{
if (arguments.length > 2) {
alert("对不起！傳⼊本控件的参数太多！");
return;
}
if (arguments.length == 0) {
alert("对不起！您沒有傳回本控件任何参数");
return;
}
var dads = dDateLayer.style;
var th = tt;
var ttop = tt.offsetTop; // TT控件的定位点⾼
var thei = tt.clientHeight; // TT控件本⾝的⾼
var tleft = tt.offsetLeft; // TT控件的定位点宽
var ttyp = tt.type; // TT控件的类型
while (tt = tt.offsetParent) {
ttop += tt.offsetTop;
tleft += tt.offsetLeft;
}
dads.left = tleft;
outObject = (arguments.length == 1) ? th: obj;
outButton = (arguments.length == 1) ? null: th; // 设定外部点击的按钮
/
/ 根据当前输⼊框的⽇期显⽰⽇历的年⽉
var reg = /^(\d+)-(\d{1,2})-(\d{1,2})/; // 不含时间
var r = outObject.value.match(reg);
if (r != null) {
r[2] = r[2] - 1;
var d = new Date(r[1], r[2], r[3]);
if (d.getFullYear() == r[1] && d.getMonth() == r[2] && d.getDate() == r[3]) { outDate = d;
} else {
outDate = "";
}
meizzSetDay(r[1], r[2] + 1);
} else {
outDate = "";
meizzSetDay(new Date().getFullYear(), new Date().getMonth() + 1);
}
dads.display = '';
// 判断初始化时是否使⽤时间,⾮严格验证
if (outObject.value.length > 10) {
bUseTime = true;
bImgSwitch();
odatelayer.bUseTimeLayer.innerHTML = bImg;
meizzWriteHead(meizzTheYear, meizzTheMonth);
} else {
bUseTime = false;
bImgSwitch();
odatelayer.bUseTimeLayer.innerHTML = bImg;
meizzWriteHead(meizzTheYear, meizzTheMonth);
js arguments}
try {
} catch(e) {
// 此处排除错误，错误原因暂未到。
}
}
var MonHead = new Array(12); // 定义阳历中每个⽉的最⼤天数
MonHead[0] = 31;
MonHead[1] = 28;
MonHead[2] = 31;
MonHead[3] = 30;
MonHead[4] = 31;
MonHead[5] = 30;
MonHead[6] = 31;
MonHead[7] = 31;
MonHead[8] = 30;
MonHead[9] = 31;
MonHead[10] = 30;
MonHead[11] = 31;
var meizzTheYear = new Date().getFullYear(); // 定义年的变量的初始值
var meizzTheMonth = new Date().getMonth() + 1; // 定义⽉的变量的初始值
var meizzTheDate = new Date().getDate(); // 定义⽇的变量的初始值
var meizzTheHour = new Date().getHours(); // 定义⼩时变量的初始值
var meizzTheMinute = new Date().getMinutes(); // 定义分钟变量的初始值
var meizzTheSecond = new Date().getSeconds(); // 定义秒变量的初始值
var meizzWDay = new Array(37); // 定义写⽇期的数组
with(window.event) {
if (srcElement != outObject && srcElement != outButton) closeLayer();
}
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论