`

js时间获取插件

 
阅读更多
Calendar.js: 
/**
 *本日历选择控件由tiannet根据前人经验完善而得。大部分代码来自meizz的日历控件。
 *tiannet添加了时间选择功能、select,object标签隐藏功能，还有其它小功能。
 *使用方法：
 * (1)只选择日期   
 * (2)选择日期和小时  
 * (3)选择日期和小时及分钟 
 *设置参数的方法
 * (1)设置日期分隔符    setDateSplit(strSplit);默认为"-"
 * (2)设置日期与时间之间的分隔符  setDateTimeSplit(strSplit);默认为" "
 * (3)设置时间分隔符    setTimeSplit(strSplit);默认为":"
 * (4)设置(1),(2),(3)中的分隔符  setSplit(strDateSplit,strDateTimeSplit,strTimeSplit);
 * (5)设置开始和结束年份    setYearPeriod(intDateBeg,intDateEnd)
 *说明：
 * 默认返回的日期时间格式如同：2005-02-02 08:08
 */
//------------------ 样式定义 ---------------------------//
//功能按钮同样样式
var s_tiannet_turn_base = "height:16px;font-size:9pt;color:white;border:0 solid #CCCCCC;cursor:hand;background-color:#2650A6;";
//翻年、月等的按钮
var s_tiannet_turn = "width:28px;" + s_tiannet_turn_base;
//关闭、清空等按钮样式
var s_tiannet_turn2 = "width:22px;" + s_tiannet_turn_base;
//年选择下拉框
var s_tiannet_select = "width:64px;display:none;";
//月、时、分选择下拉框
var s_tiannet_select2 = "width:46px;display:none;";
//日期选择控件体的样式
var s_tiannet_body = "width:150;background-color:#2650A6;display:none;z-index:9998;position:absolute;" +
  "border-left:1 solid #CCCCCC;border-top:1 solid #CCCCCC;border-right:1 solid #999999;border-bottom:1 solid #999999;";
//显示日的td的样式
var s_tiannet_day = "width:21px;height:20px;background-color:#D8F0FC;font-size:10pt;";
//字体样式
var s_tiannet_font = "color:#FFCC00;font-size:9pt;cursor:hand;";
//链接的样式
var s_tiannet_link = "text-decoration:none;font-size:9pt;color:#2650A6;";
//横线
var s_tiannet_line = "border-bottom:1 solid #6699CC";
//------------------ 变量定义 ---------------------------//
var tiannetYearSt = 1950;//可选择的开始年份
var tiannetYearEnd = 2010;//可选择的结束年份
var tiannetDateNow = new Date();
var tiannetYear = tiannetDateNow.getFullYear(); //定义年的变量的初始值
var tiannetMonth = tiannetDateNow.getMonth()+1; //定义月的变量的初始值
var tiannetDay = tiannetDateNow.getDate();
var tiannetHour = 8;//tiannetDateNow.getHours();
var tiannetMinute = 0;//tiannetDateNow.getMinutes();
var tiannetArrDay=new Array(42);          //定义写日期的数组
var tiannetDateSplit = "-";     //日期的分隔符号
var tiannetDateTimeSplit = " ";    //日期与时间之间的分隔符
var tiannetTimeSplit = ":";     //时间的分隔符号
var tiannetOutObject;      //接收日期时间的对象
var arrTiannetHide = new Array();//被强制隐藏的标签
var m_bolShowHour = false;//是否显示小时
var m_bolShowMinute = false;//是否显示分钟

var m_aMonHead = new Array(12);         //定义阳历中每个月的最大天数
    m_aMonHead[0] = 31; m_aMonHead[1] = 28; m_aMonHead[2] = 31; m_aMonHead[3] = 30; m_aMonHead[4]  = 31; m_aMonHead[5]  = 30;
    m_aMonHead[6] = 31; m_aMonHead[7] = 31; m_aMonHead[8] = 30; m_aMonHead[9] = 31; m_aMonHead[10] = 30; m_aMonHead[11] = 31;
// ---------------------- 用户可调用的函数 -----------------------------//
//用户主调函数－只选择日期
function setDay(obj){
 tiannetOutObject = obj;
 //如果标签中有值，则将日期初始化为当前值
 var strValue = tiannetTrim(tiannetOutObject.value);
 if( strValue != "" ){
  tiannetInitDate(strValue);
 }
 tiannetPopCalendar();
}
//用户主调函数－选择日期和小时
function setDayH(obj){
 tiannetOutObject = obj;
 m_bolShowHour = true;
 //如果标签中有值，则将日期和小时初始化为当前值
 var strValue = tiannetTrim(tiannetOutObject.value);
 if( strValue != "" ){
  tiannetInitDate(strValue.substring(0,10));
  var hour = strValue.substring(11,13);
  if( hour ');
document.write('');
document.write(' 年');
document.write('');
for(var i=tiannetYearSt;i ' + i + '年');
}
document.write('');
document.write('  月');
document.write('');
for(var i=1;i ' + i + '月');
}
document.write('');
//document.write('');
//document.write('');
document.write(' 时');
document.write('');
for(var i=0;i ' + i + '时');
}
document.write('');
document.write('  分');
document.write('');
for(var i=0;i ' + i + '分');
}
document.write('');
document.write('');
//输出一条横线
document.write('');
document.write('');
document.write('');
document.write(' ');
document.write('');
document.write('');
document.write('');
//输出一条横线
document.write('');
document.write('');
document.write(' ');
for(var i =0;i ' + weekName[i] + '');
}
document.write(' ');
document.write('');
//输出天的选择
document.write('');
var n = 0;
for (var i=0;i');
 for (var j=0;j ');
  n ++;
 }
 document.write (' ');
}
document.write (' ');
document.write(' ');
document.write(' ');
document.write('清空'+
    ' 关闭' +
    ' 确定 ' +
    '');
document.write (' ');
document.write('');
document.write('');
//------------------ end 页面显示部分 ---------------------------//
//------------------ 显示日期时间的span标签响应事件 ---------------------------//
//单击年份span标签响应
function spanYearCEvent(){
 hideElementsById(new Array("selTianYear","tiannetMonthHead"),false);
 if(m_bolShowHour) hideElementsById(new Array("tiannetHourHead"),false);
 if(m_bolShowMinute) hideElementsById(new Array("tiannetMinuteHead"),false);
 hideElementsById(new Array("tiannetYearHead","selTianMonth","selTianHour","selTianMinute"),true);
}
//单击月份span标签响应
function spanMonthCEvent(){
 hideElementsById(new Array("selTianMonth","tiannetYearHead"),false);
 if(m_bolShowHour) hideElementsById(new Array("tiannetHourHead"),false);
 if(m_bolShowMinute) hideElementsById(new Array("tiannetMinuteHead"),false);
 hideElementsById(new Array("tiannetMonthHead","selTianYear","selTianHour","selTianMinute"),true);
}
//单击小时span标签响应
function spanHourCEvent(){
 hideElementsById(new Array("tiannetYearHead","tiannetMonthHead"),false);
 if(m_bolShowHour) hideElementsById(new Array("selTianHour"),false);
 if(m_bolShowMinute) hideElementsById(new Array("tiannetMinuteHead"),false);
 hideElementsById(new Array("tiannetHourHead","selTianYear","selTianMonth","selTianMinute"),true);
}
//单击分钟span标签响应
function spanMinuteCEvent(){
 hideElementsById(new Array("tiannetYearHead","tiannetMonthHead"),false);
 if(m_bolShowHour) hideElementsById(new Array("tiannetHourHead"),false);
 if(m_bolShowMinute) hideElementsById(new Array("selTianMinute"),false);
 hideElementsById(new Array("tiannetMinuteHead","selTianYear","selTianMonth","selTianHour"),true);
}
//根据标签id隐藏或显示标签
function hideElementsById(arrId,bolHide){
 var strDisplay = "";
 if(bolHide) strDisplay = "none";
 for(var i = 0;i  getMonthCount(tiannetYear,tiannetMonth) ) {
  //如果当前的日大于当月的最大日，则取当月最大日
  tiannetDay = getMonthCount(tiannetYear,tiannetMonth);
 }
}
//在个位数前加零
function addZero(value){
 if(value  999 && tiannetYear  999 && tiannetYear  tiannetYearEnd ) {
  tiannetYearEnd = tiannetYear;
  createOption(document.all.selTianYear,tiannetYear,tiannetYear + "年");
 }
 checkSelect(document.all.selTianYear,tiannetYear);
 tiannetWriteHead();
}
//选择今天
function tiannetToday() {
 tiannetYear = tiannetDateNow.getFullYear();
 tiannetMonth = tiannetDateNow.getMonth()+1;
 tiannetDay = tiannetDateNow.getDate();
 tiannetSetValue(true);
 //tiannetSetDay(tiannetYear,tiannetMonth);
 //selectObject();
}
//往前翻月份
function tiannetPrevMonth() {
 if(tiannetMonth>1){tiannetMonth--}else{tiannetYear--;tiannetMonth=12;}
 tiannetSetDay(tiannetYear,tiannetMonth);
 checkSelect(document.all.selTianMonth,tiannetMonth);
 tiannetWriteHead();
}
//往后翻月份
function tiannetNextMonth() {
 if(tiannetMonth==12){tiannetYear++;tiannetMonth=1}else{tiannetMonth++}
 tiannetSetDay(tiannetYear,tiannetMonth);
 checkSelect(document.all.selTianMonth,tiannetMonth);
 tiannetWriteHead();
}
//向span标签中写入年、月、时、分等数据
function tiannetWriteHead(){
 document.all.tiannetYearHead.innerText = tiannetYear + "年";
 document.all.tiannetMonthHead.innerText = tiannetMonth + "月";
 if( m_bolShowHour )  document.all.tiannetHourHead.innerText = " "+tiannetHour + "时";
 if( m_bolShowMinute ) document.all.tiannetMinuteHead.innerText = tiannetMinute + "分";
 tiannetSetValue(false);//给文本框赋值，但不隐藏本控件
}
//设置显示天
function tiannetSetDay(yy,mm) {
  
 setRealDayCount();//设置当月真实的日
 tiannetWriteHead();
 var strDateFont1 = "", strDateFont2 = "" //处理日期显示的风格
 for (var i = 0; i "
   strDateFont2 = ""
   } else {
    strDateFont1 = "";
    strDateFont2 = ""
   }
   da.innerHTML = strDateFont1 + tiannetArrDay[i] + strDateFont2;
   //如果是当前选择的天，则改变颜色
   if(tiannetArrDay[i] == tiannetDay ) {
    da.style.backgroundColor = "#CCCCCC";
   } else {
    da.style.backgroundColor = "#EFEFEF";
   }
   da.style.cursor="hand"
  } else {
   da.innerHTML="";da.style.backgroundColor="";da.style.cursor="default"
  }
 }//end for
 tiannetSetValue(false);//给文本框赋值，但不隐藏本控件
}//end function tiannetSetDay
//根据option的值选中option
function checkSelect(objSelect,selectValue) {
 var count = parseInt(objSelect.length);
 if( selectValue  tiannetYearEnd ) {
  for( var i = tiannetYearEnd+1;i  document.body.offsetWidth - 10    )
  iX = window.event.x - h - 5 ;
 else
  iX = window.event.x + 5;  
 if (iX  document.body.offsetHeight - 10   )
  iY = document.body.scrollTop + document.body.offsetHeight - w - 5 ;
 else
  iY = document.body.scrollTop +window.event.y + 5;  
 if (iY  x && (y + h + 20) > objTop && (objTop+objHeight) >  y && objLeft


a.html: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
        <meta name="ProgId" content="VisualStudio.HTML">
        <meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
        <script src="./Calendar.js"></script>
    </head>
    <body>
        (1)只选择日期   <input type="text" name="date"   readOnly onClick="setDay(this);"><br/>
(2)选择日期和小时  <input type="text" name="dateh"  readOnly onClick="setDayH(this);"><br/>
(3)选择日期和小时及分钟 <input type="text" name="datehm" readOnly onClick="setDayHM(this);">

    </body>
</html>
分享到：
| 删除文件目录
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js 时间插件（带时分秒）

    JavaScript时间插件是一种用于网页应用中的工具，它能够帮助开发者创建和管理与时间相关的功能，如显示当前时间、倒计时、计时器等。在网页设计中，尤其是在需要实时更新时间或者创建交互式时间元素的场景下，这类...

    JS 时间插件集合，收集一些比较好的时间插件

    JS时间插件可以帮助开发者更便捷、高效地处理日期和时间展示，提高用户体验。本资源集合包含了多种高质量的时间插件，适用于不同的场景需求，如显示年月日、小时分钟、分钟秒等格式。下面将详细介绍这些插件及其可能...

    js 时间插件

    JavaScript时间插件是一种在网页应用中用于处理时间显示、计算和交互的工具，它使得开发者能够轻松地在前端实现各种时间相关的功能。在JavaScript中，虽然内置了Date对象来处理日期和时间，但有时需要更复杂的操作...

    js原生时间插件（带时分秒）

    总的来说，这个"js原生时间插件（带时分秒）"项目涵盖了JavaScript的基本知识，如DOM操作、事件处理、日期对象的使用，以及CSS样式和布局的设计。通过实践这样的项目，开发者可以深化对JavaScript的理解，提高创建...

    Eclipse的JavaScript插件 JSEditor

    JSEditor是Eclipse中的一个JavaScript开发插件，旨在提升JavaScript开发者的工作效率和代码质量。这个插件提供了丰富的功能，包括语法高亮、自动完成、错误检查和调试工具等。 1. **语法高亮**：JSEditor为...

    js实现移动端时间轴插件

    本文将深入探讨如何使用JavaScript实现一个适用于移动端的时间轴插件，并结合提供的压缩包资源，帮助开发者快速理解和应用。 首先，时间轴插件的核心功能包括：创建时间轴容器、设置时间轴样式、添加时间轴项、处理...

    js时间拾取插件

    JavaScript时间拾取插件是一种常见的前端开发工具，用于在网页上提供用户友好的时间选择界面。这类插件通常包括小时、分钟和秒的选取，并可能包含AM/PM切换，以支持12小时制和24小时制的时间格式。在描述中提到的...

    一款精简实用的时间轴插件一timeline

    在集成和使用这款插件时，开发者需要将jQuery库和插件的JS及CSS文件添加到项目中，并在HTML结构中创建一个容器来承载时间轴。然后，通过JavaScript代码设置时间轴的参数，如时间点、事件描述和时间间隔等，最后调用...

    原生js 时间插件（带时分秒）

    原生JS时间插件，不依赖任何外部库如jQuery，完全基于JavaScript的核心功能实现，为开发者提供了灵活、高效的方式来操作时间。本插件尤其注重精确到时分秒的显示，这对于实时更新或者时间追踪的应用场景非常有用。 ...

    JS获取时间差插件源码.zip

    JS获取时间差插件，显示为几分钟前、几小时前等。 JS获取时间差插件，显示为几分钟前、几小时前等。 JS获取时间差插件，显示为几分钟前、几小时前等。 JS获取时间差插件，显示...

    js仿萤石云的视频回放插件拖动效果-时间标尺timeRuler

    "js仿萤石云的视频回放插件拖动效果-时间标尺timeRuler"是一个专门针对视频播放控件进行优化的JavaScript实现，它旨在提供类似萤石云平台的时间标尺功能，使用户可以更直观地控制和浏览视频内容。这个功能允许用户...

    jQuery刻度尺风格横向时间轴插件timeline.zip

    3. **js**：包含处理时间轴逻辑的JavaScript文件，如主插件脚本、可能的辅助函数等。 4. **dist**：发布目录，通常包含经过压缩和优化的JavaScript文件，适用于生产环境。 5. **img**：存放插件所需的图片资源，如...

    jsDate插件，时间格式插件

    JavaScript Date（简称jsDate）是一种常见的前端插件，专门用于处理和显示时间，特别是在需要动态更新和自定义格式化的时间展示场景中。这个插件极大地丰富了JavaScript原生Date对象的功能，提供了更多便利的API来...

    JS在线签名插件.zip

    **JS在线签名插件**是一种基于JavaScript技术实现的交互式签名工具，主要用于网页上实现用户的手写签名功能。这种插件通常使用HTML5的Canvas元素作为绘图基础，结合JavaScript库来提供签名交互和数据存储。在现代...

    原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    在JavaScript编程中，日期时间插件是用于处理和展示日期及时间的一种常见工具。原生JavaScript日期时间插件，不依赖任何外部库如jQuery，它提供了用户友好的交互方式，例如当用户点击文本框时，会弹出一个表格让用户...

    jQuery-Paging动态分页数据获取插件

    最后，`js`目录下则是jQuery-Paging的JavaScript源代码和可能的依赖文件，如jQuery库本身。 总的来说，jQuery-Paging插件为开发者提供了一种便捷的方式来实现动态分页和数据加载，它的易用性和丰富的定制选项使得在...

    JS选择日期时间插件

    JS选择日期时间插件通常是基于JavaScript构建的，它通过监听用户的输入事件，提供一个直观的用户界面（UI）以选择日期和时间。这些插件通常包含一个日历视图和时间选择器，用户可以通过点击或滚动来选取所需的时间戳...

    微信端的一个很好的时间插件

    `js`文件夹则包含了JavaScript代码，这是插件的核心部分，实现了时间插件的逻辑功能。这部分代码可能会处理用户的交互事件，如点击、滑动等，以及与服务器的通信，获取或更新时间数据。此外，JavaScript还可能封装了...

    jQuery日期时间范围选择插件.zip

    这个插件名为daterangepicker.js，它的主要目标是提供一个直观且易于使用的界面，让用户可以方便地选择一个起始日期和结束日期，甚至还可以包括起始和结束时间。daterangepicker.js通常会与HTML元素（如输入框）关联...

Magicbox
Global site tag (gtag.js) - Google Analytics