`
lz1365871801
  • 浏览: 22723 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
最近访客 更多访客>>
melokele
社区版块
存档分类
最新评论

超漂亮的JS日历控件

 
阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>超漂亮的JS日历控件</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
*{
 font:12px;
 letter-spacing:0px;
}
body{
 background-color:#E5E9F2;
 overflow:hidden;
 margin:0;
 border:0px;
}
#titleYear{
 text-align:center;
 padding-top:3px;
 width:120px;
 height:20px;
 border:solid #E5E9F2;
 border-width:0px 1px 1px 0px;
 background-color:#A4B9D7;
 color:#000;
 cursor:default;
}
#weekNameBox{
 width:282px;
 border-bottom:0;
}
.weekName{
 text-align:center;
 padding-top:4px;
 width:40px;
 height:20px;
 border:solid #E5E9F2;
 border-width:0px 1px 1px 0px;
 background-color:#C0D0E8;
 color:#243F65;
 cursor:default;
}
.controlButton{
 font-family: Webdings;
 font:9px;
 text-align:center;
 padding-top:2px;
 width:40px;
 height:20px;
 border:solid #E5E9F2;
 border-width:0px 1px 1px 0px;
 background-color:#A4B9D7;
 color:#243F65;
 cursor:default;
}
.Ctable{
 width:282px;
 margin-bottom:20px;
}
.Ctable span{
 font:9px verdana;
 font-weight:bold;
 color:#243F65;
 text-align:center;
 padding-top:4px;
 width:40px;
 height:26px;
 border:solid #C0D0E8;
 border-width:0px 1px 1px 0px;
 cursor:default;
}
.Cdate{
 background-color:#E5E9F2;
}
.Ctable span.OtherMonthDate{
 color:#999;
 background-color:#f6f6f6;
}
.selectBox{
 cursor:hand;
 font:9px verdana;
 width:80px;
 position:absolute;
 border:1px solid #425E87;
 overflow-y:scroll;
 overflow-x:hidden;
 background-color:#fff;
 FILTER:progid:DXImageTransform.Microsoft.Shadow(Color=#999999,offX=10,offY=10,direction=120,Strength=5);
 SCROLLBAR-FACE-COLOR: #E5E9F2;
 SCROLLBAR-HIGHLIGHT-COLOR: #E5E9F2;
 SCROLLBAR-SHADOW-COLOR: #A4B9D7;
 SCROLLBAR-3DLIGHT-COLOR: #A4B9D7;
 SCROLLBAR-ARROW-COLOR:  #000000;
 SCROLLBAR-TRACK-COLOR: #eeeee6;
 SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
}
.selectBox nobr{
 padding:0px 0px 2px 5px;
 width:100%;
 color:#000;
 letter-spacing:2px;
 text-decoration:none;
}
</style>
<script language="javascript">
// cody by [STAR].sjz 2003-10-31
// 说明：返回值为 一个字符串
// 格式如下：
// 使用方法：
// var dataString = showModalDialog("calendar.htm", "dd日mm月yyyy年", "dialogWidth:286px;dialogHeight:221px;status:no;help:no;");
var userFormatString;
if(window.dialogArguments ==null)
{
 userFormatString = "yyyy-mm--dd";
}
else
{
 userFormatString = window.dialogArguments;
}
with(new Date()){
 var Nyear = getYear();
 var Nmonth =  getMonth() +1;
 var Ndate =  getDate();
}
window.returnValue = new dataObj(Nyear,Nmonth,Ndate ).getDateString(userFormatString);
window.document.onclick = function(){
 var obj = window.event.srcElement;
 if(obj.tagName.toLowerCase() == "span"   &&   obj.parentNode.className.replace(/Ctable/ig,"star") == "star" )
 {
  try{
   window.currentActiveItem.runtimeStyle.cssText = "";
  }
  catch(e){ }
  Nyear = obj.id.split("-")[0];
  Nmonth = obj.id.split("-")[1];
  Ndate = obj.id.split("-")[2];
  window.currentActiveItem = obj;
  window.currentSelectDate = window.currentActiveItem.id;
  window.currentActiveItem.runtimeStyle.cssText = "background:url(/jscss/demoimg/201002/right.gif) no-repeat 12px 6px;color:#000;padding-top:1px;font-weight:bold";
 }
}
 function dataObj(year,month,date) 
{
 this.year  = year
 this.month = month
 this.date  =  date
 this.getDateString =
  function(formatString)
  {
   return formatString.replace(/yyyy/ig , this.year).replace(/mm/ig , this.month).replace(/dd/ig , this.date)
  }
}
window.onload = function(){
 window.document.attachEvent("onclick" , doCmd);
 window.document.attachEvent("onmouseover" , buttonOver);
 window.document.attachEvent("onmouseout" , buttonOut);
 window.document.attachEvent("onmousedown" , buttonDown);
 window.document.attachEvent("onmouseup" , buttonUp);
 window.document.attachEvent("ondblclick" ,
   function()
   {
     var obj = window.event.srcElement;
     if(obj.tagName.toLowerCase() == "span"   &&   obj.parentNode.className.replace(/Ctable/ig,"star") == "star" )
     {
      var mydate = new dataObj(obj.id.split("-")[0] ,  obj.id.split("-")[1] ,  obj.id.split("-")[2] );
      window.returnValue = mydate.getDateString(userFormatString)
      window.close();
     }
   }
 );
 document.all.titleYear.innerHTML=TranYearMonthTitle(Nyear,Nmonth);
 document.all.weekNameBox.insertAdjacentHTML("afterBegin",makeWeekNameHtmlStr());
 document.all.calendarBox.innerHTML=makeCalendarHtmlStr(Nyear,Nmonth);
 window.currentSelectDate = starCaTran(Nyear,Nmonth,Ndate);
 window.document.all.calendarBox.show = show;
 window.currentActiveItem = window.document.getElementById(currentSelectDate);
 if( window.currentActiveItem )
  window.currentActiveItem.click();
 window.document.all.calendarBox.show();
}
function starCalendar(year,month){
 this.year = year;
 this.month = month;
 this.monthTable = function(){
    var aMonth=new Array();
    for(i=1;i<7;i++)aMonth[i]=new Array(i);
    var dCalDate=new Date(this.year, this.month-1, 1);
    var iDayOfFirst=dCalDate.getDay();
    var iDaysInMonth=new Date(this.year, this.month, 0).getDate();
    var iOffsetLast=new Date(this.year, this.month-1, 0).getDate()-iDayOfFirst+1;
    var iDate = 1;
    var iNext = 1;
    for (d = 0; d < 7; d++)
    aMonth[1][d] = (d<iDayOfFirst)?(-iDayOfFirst+d+1):iDate++;
    for (w = 2; w < 7; w++)
   for (d = 0; d < 7; d++)
    aMonth[w][d] = iDate++;
    return aMonth;
 }
}
function makeWeekNameHtmlStr(){
 var tmpStr="";
 var weekName = ["日","一","二","三","四","五","六"];
 for(var i=0;i<7;i++)tmpStr+="<span class=weekName>"+weekName[i]+"</span>";
 return tmpStr;
}
function makeCalendarHtmlStr(year,month){
 window.theCalendar = new starCalendar(year,month);
 var theCaArr = theCalendar.monthTable();
 var theDaysInMonth = new Date(year, month, 0).getDate();
 var theCaHtml = "<div class=Ctable>";
 for(var i=1;i<7;i++)
  for(var j=0;j<7;j++)
   theCaHtml = theCaHtml+"<span class="+( (theCaArr[i][j]<1 || theCaArr[i][j]>theDaysInMonth)?"OtherMonthDate":"Cdate")+" id="+starCaTran(year,month,theCaArr[i][j])+">"+starCaTran(year,month,theCaArr[i][j]).split("-")[2]+"</span>";
 return theCaHtml+"</div>";
}
function starCaTran(year,month,date){
 with(new Date(year,month-1,date))
  return getYear() + "-" +(getMonth()+1) + "-" + getDate();
}
function TranYearMonthTitle(year,month){
 with(new Date(year,month-1,1))
  return "<span style='text-decoration:underline;cursor:hand;font-weight:bold;padding:1 2 0 1;width:40px;' onclick=showMore(1940,2050,this.innerHTML) onmouseover=\"this.runtimeStyle.cssText='color:#fff;'\" onmouseout=\"this.runtimeStyle.cssText=''\" onpropertychange=showC()>" + getYear() + "</span>" + "年" + "<span style='text-decoration:underline;cursor:hand;font-weight:bold;padding:1 2 0 1;width:20px;' onclick=showMore(1,12,this.innerHTML) onmouseover=\"this.runtimeStyle.cssText='color:#fff;'\" onmouseout=\"this.runtimeStyle.cssText=''\" onpropertychange=showC()>" + (getMonth()+1) + "</span>" + "月" ;
}
function showC(){
   if(event.propertyName != "innerHTML")return;
   window.theCalendar.year = new Number(document.all.titleYear.getElementsByTagName("span")[0].innerHTML);
   window.theCalendar.month =  new Number(document.all.titleYear.getElementsByTagName("span")[1].innerHTML);
   window.document.all.calendarBox.innerHTML=makeCalendarHtmlStr(window.theCalendar.year,window.theCalendar.month);
   window.document.all.calendarBox.show = show;window.document.all.calendarBox.show();
}
function showMore(starNum,endNum,selectedValue){
 var obj = window.event.srcElement;
 var selectedIndex = selectedValue - starNum;
 if(obj.selectBox){
  obj.selectBox.selectedIndex = selectedIndex;
  return obj.selectBox.show(document.all.calendarBox.offsetHeight + document.all.weekNameBox.offsetHeight );
 }
 var selectBox = window.document.createElement("div");
 selectBox.className = "selectBox";
 selectBox.style.height = 0;
 selectBox.style.top = window.event.clientY - window.event.offsetY + window.event.srcElement.offsetHeight;
 selectBox.style.left = window.event.clientX - window.event.offsetX ;
 selectBox.show  = showBox;
 selectBox.selectedIndex = selectedIndex;
 selectBox.onclick = function(){
  var selectedObj = window.event.srcElement;
  if( "nobr" == selectedObj.tagName.toLowerCase()  &&  selectBox.contains(selectedObj))
  {
   if(obj.innerHTML != selectedObj.innerHTML)obj.innerHTML = selectedObj.innerHTML;
  }
 }
 selectBox.onlosecapture = alert
 var iString = "";
 for(var i=starNum;i<=endNum;i++){
  iString += "<nobr  onmouseover=\"this.parentNode.getElementsByTagName('nobr')[this.parentNode.selectedIndex].style.cssText='';this.style.cssText='background-color:#00006C;color:#fff;'\"  onmouseout=this.style.cssText=''>"+i+"</nobr><br>"
 }
 selectBox.insertAdjacentHTML ("afterBegin",iString);
 window.document.body.appendChild(selectBox);
 obj.selectBox = selectBox;
 obj.selectBox.show(document.all.calendarBox.offsetHeight + document.all.weekNameBox.offsetHeight );
 
}
function showBox(iHeight)
{
 var box = this;
 box.style.height =1;
 box.style.display = "block";
 window.clearInterval(box.timeHandle);
 box.timeHandle = window.setInterval(interValHandle,1);
 var s = 0,t =1 ;
 function interValHandle()
 {
  box.scrollTop=1000000;
  s = s + t*t;
  t += 0.5;
  box.style.height = parseInt(box.style.height) + Math.floor(s);
  box.style.width = 65 / iHeight * box.offsetHeight;
  if( box.offsetHeight > iHeight )
  {
    window.clearInterval(box.timeHandle);
    box.style.height = iHeight;
    box.scrollTop = box.childNodes[0].offsetHeight*box.selectedIndex;
    box.getElementsByTagName("nobr")[box.selectedIndex].style.cssText='background-color:#00006C;color:#fff;';
    window.document.attachEvent("onclick",
       box.hide=function()
       {
        box.style.display = "none";
        window.document.detachEvent("onclick",box.hide)
       }
    );
  }
 }
}
</script>
<script language="javascript">
function buttonOver(){
 var obj = window.event.srcElement;
 if(obj.tagName.toLowerCase() == "span"   &&   obj.className.replace(/controlButton/ig,"star") == "star" )
 {
  obj.runtimeStyle.cssText="border-color:#fff #606060 #808080 #fff;padding:3 0 0 0 ";
 }
 if(obj.tagName.toLowerCase() == "span"   &&   obj.parentNode.className.replace(/Ctable/ig,"star") == "star" )
 {
  obj.style.backgroundColor = "#fff";
 }
}
function buttonOut(){
 var obj = window.event.srcElement;
 if(obj.tagName.toLowerCase() == "span"   &&   obj.className.replace(/controlButton/ig,"star") == "star" )
 {
  obj.runtimeStyle.cssText = "";
 }
 if(obj.tagName.toLowerCase() == "span"   &&   obj.parentNode.className.replace(/Ctable/ig,"star") == "star" )
 {
  window.setTimeout(function(){obj.style.backgroundColor = ""; },300);
 }
}
function buttonDown(){
 var obj = window.event.srcElement;
 if(obj.tagName.toLowerCase() == "span"   &&   obj.className.replace(/controlButton/ig,"star") == "star" )
 {
  obj.setCapture();
  obj.runtimeStyle.borderColor="#808080 #fefefe #fefefe #808080";
 }
}
function buttonUp(){
 var obj = window.event.srcElement;
 if(obj.tagName.toLowerCase() == "span"   &&  obj.className.replace(/controlButton/ig,"star") == "star" )
 {
  obj.releaseCapture();
  obj.runtimeStyle.cssText ="";
 }
}
function doCmd(){
 var obj = window.event.srcElement;
 if(obj.tagName.toLowerCase() == "span"   &&  obj.className.replace(/controlButton/ig,"star") == "star" )
 {
   switch(obj.getAttribute("cmd"))
   {
    case "py":
     window.document.all.titleYear.innerHTML=window.TranYearMonthTitle(window.theCalendar.year-1,window.theCalendar.month);
     window.document.all.calendarBox.innerHTML=makeCalendarHtmlStr(window.theCalendar.year-1,window.theCalendar.month);
     break;
    case "pm":
     window.document.all.titleYear.innerHTML=window.TranYearMonthTitle(window.theCalendar.year,window.theCalendar.month-1);
     window.document.all.calendarBox.innerHTML=makeCalendarHtmlStr(window.theCalendar.year,window.theCalendar.month-1);
     break;
    case "nm":
     window.document.all.titleYear.innerHTML=window.TranYearMonthTitle(window.theCalendar.year,window.theCalendar.month+1);
     window.document.all.calendarBox.innerHTML=makeCalendarHtmlStr(window.theCalendar.year,window.theCalendar.month+1);
     break;
    case "ny":
     window.document.all.titleYear.innerHTML=window.TranYearMonthTitle(window.theCalendar.year+1,window.theCalendar.month);
     window.document.all.calendarBox.innerHTML=makeCalendarHtmlStr(window.theCalendar.year+1,window.theCalendar.month);
     break;
   }
   window.document.all.calendarBox.show();
   window.currentSelectDate = starCaTran(Nyear,Nmonth,Ndate);
   window.currentActiveItem = window.document.getElementById(currentSelectDate);
   if( window.currentActiveItem )window.currentActiveItem.runtimeStyle.cssText = "background:url(choiceit.gif) no-repeat 12px 6px;color:#000;padding-top:1px;font-weight:bold";
 }
}
function show()
{
 var box = this;
 window.clearTimeout(box.timeHandle);
 var CdateBoxs = this.getElementsByTagName("span");
 for(var i=0;i<CdateBoxs.length;i++)
 {
  CdateBoxs[i].defaultValue = new Number( CdateBoxs[i].innerHTML );
  CdateBoxs[i].innerHTML = 0;
 }
 showDate();
 function showDate(){
  for(var i=0;i<CdateBoxs.length;i++){
   if( new Number( CdateBoxs[i].innerHTML ) + 1 <= new Number( CdateBoxs[i].defaultValue ) )
    CdateBoxs[i].innerHTML = new Number( CdateBoxs[i].innerHTML ) + 1
  }
  box.timeHandle = window.setTimeout(showDate,1);
 }
this.show = show1
}
function show1()
{
 var box = this;
 window.clearTimeout(box.timeHandle);
 var CdateBoxs = this.getElementsByTagName("span");
 for(var i=0;i<CdateBoxs.length;i++)CdateBoxs[i].style.display = "none";
 showDate(CdateBoxs[0]);
 function showDate(obj){
  if( !obj )return;
  obj.style.display = "inline";
  box.timeHandle = window.setTimeout(function(){showDate(obj.nextSibling);},1);
 }
this.show = show
}
/*
function show()
{
}
*/
</script>
</head>
<body onselectstart="return false">
<div style="margin:0 0 0 0;">
  <div id="controlBar"><span class="controlButton" cmd="py" title="上一年">33</span><span class="controlButton" cmd="pm" title="上一月">3</span><span id="titleYear"></span><span class="controlButton" cmd="nm" title="下一月">4</span><span class="controlButton" cmd="ny" title="下一年">44</span></div>
  <div id="weekNameBox"></div>
  <div id="calendarBox"></div>
</div>
</body>
</html>

  • 大小: 15.8 KB
分享到：
| 设置html页面不让浏览器缓存的方法
评论
发表评论

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

相关推荐

    超漂亮的JS日历控件 超漂亮的JS日历控件，代码有些复杂。

    从给定的文件信息来看，我们正在探讨一个被称为“超漂亮的JS日历控件”的前端组件。这个控件被设计得十分美观，但其代码结构较为复杂，这可能意味着它包含了许多高级的功能和定制选项，同时也对开发者的技能水平提出...

    js日历控件[超酷超漂亮]

    根据提供的信息，我们可以总结出以下关于“js日历控件[超酷超漂亮]”的知识点： ### 一、概述 此控件是一款基于JavaScript的日历插件，它具有非常美观且酷炫的界面设计。从标题和描述来看，这款日历控件的设计风格...

    超级好的js日历控件

    JavaScript日历控件可以在浏览器端运行，无需服务器端支持，从而减少了服务器负载并提高了响应速度。 在实际应用中，js日历控件可以与各种前端框架如jQuery、React、Vue等兼容，提供更强大的功能和更好的性能。例如...

    计算机软件-商业源码-超级漂亮的日历控件源码.zip

    "计算机软件-商业源码-超级漂亮的日历控件源码.zip" 这个标题表明我们正在讨论一个与计算机软件相关的资源，具体来说是一个商业用途的源码包。"超级漂亮的日历控件"部分揭示了这个源码是用于创建一个美观的日历界面...

    超酷的js日历控件

    综上所述，“超酷的js日历控件”是一个融合了JavaScript技术、农历黄历知识以及前端设计艺术的综合性项目，开发者在实现过程中会涉及到诸多方面的技能和知识，同时也为用户带来了便捷且富有特色的日历使用体验。

    超精美的js日历控件

    JS日历控件是一种基于JavaScript编程语言实现的交互式日历组件，它能够为网页添加美观且实用的日历功能。在网页设计中，这种控件常常用于日期选择、事件安排或者时间管理等场景。本文将深入探讨JS日历控件的实现原理...

    超漂亮的日历控件代码

    在“超漂亮的日历控件代码”这个主题中，我们主要讨论的是一段实现美观且功能完善的日历组件的源代码。这个控件能够极大地提升用户的交互体验，减少输入错误，并为应用程序增添视觉吸引力。 首先，我们要理解日历...

    超好用的js日历控件

    **JavaScript日历控件详解** JavaScript日历控件是一种在网页上实现日期选择功能的交互元素，它使得用户能够方便地在网页上选取日期，常用于表单输入、事件安排等场景。本篇将深入探讨如何创建和使用一个“超好用的...

    日历控件常用注册表单

    创建一个JavaScript日历控件通常包括以下步骤： 1. 在HTML页面中定义一个用于显示日历的元素，如`&lt;input type="text"&gt;`，并为其设置ID以便于JavaScript访问。 2. 引入JavaScript文件，这可能是一个外部文件（例如`...

    超级漂亮的js日历控件参考.pdf

    该文档提供了一个基于JavaScript的日历控件的实现代码，它具有良好的视觉效果和交互性。以下是对这个JS日历控件的关键知识点的详细说明： 1. **HTML结构**： - 文档使用HTML 4.0过渡版进行编写，这是一种早期的...

    html_日历控件_js日历

    HTML（超文本标记语言）是用来构建网页内容的基础，而我们的日历控件通常会嵌入到一个输入字段或按钮附近。例如，我们可以在HTML中创建一个`&lt;input&gt;`元素，类型设为`text`，并添加一个`id`以便于JS操作： ```html ...

    超好用的JS日历控件,支持时分秒

    超好用的JS日历控件,支持时分秒 调用方法： 1、传入对象：SelectDate(this,'yyyy 年') 2、传入 ID：SelectDateById('Txt_CreateDateST01','yyyy 年') 3、参数 SelectDate(this,'yyyy 年',0,-150) 格式...

    非常简洁好用的日历控件

    在网页开发中，日历控件通常由JavaScript（JS）编写，以提供动态交互功能。在这个主题中，我们将深入探讨"非常简洁好用的日历控件"的相关知识点。 首先，" dynCalendar.css "是样式表文件，用于定义日历控件的视觉...

    js超酷超漂亮日历控件

    一款日历控件,超酷超漂亮,下载后可以随处使用,颜色柔和,功能完整,超级值得拥有,很人性化的设计,让你爱不释手,让你的开发更刺激,让你的网页更绚丽.

    1个很牛的JS日历控件

    从给定的文件信息来看，我们正在探讨一个非常强大的JavaScript日历控件。这个日历控件不仅仅是一个简单的日期选择器，它包含了丰富的功能和定制选项，使其在众多JavaScript日历插件中脱颖而出。下面我们将深入分析这...

    一款超级好看的日历控件

    本项目名为"一款超级好看的日历控件"，显然着重于提供一个既美观又易于使用的日历功能。这款控件的特点在于其设计美学和易用性，能够为网页或应用程序增添视觉吸引力，同时提升用户体验。 描述中提到，该控件的使用...

    java日历控件

    JavaScript日历控件通常由HTML（超文本标记语言）、CSS（层叠样式表）和JavaScript三部分组成。在给定的文件名中，我们可以看到`calendar.htm`是HTML文件，它定义了页面的结构和内容；`calendar.css`是CSS文件，用于...

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