`
javatim
  • 浏览: 69947 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

精美日历控件[转]

QQASPJ#HTML 
阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script>
/* alin */
/* Email:caoailin111@sohu.com */
/* QQ:38062022 */
/* Creation date: 2004-6-13 */
var myC_x,myC_y;
var myC_timeset=null,myC_timeset1=null;
var divObj=null;
var inputName;
function myCalendar() //构建对象
{
var myDate = new Date();
this.year = myDate.getFullYear();
this.month = myDate.getMonth()+1;
this.date = myDate.getDate();
this.format="yyyy-mm-dd";
this.style = myStyle(1);　
this.show = createCalendar;
this.input = createInput;
}
function myStyle(num) //设置样式
{
if(!num||isNaN(num)){alert('参数不对,采用默认样式！');num=1;}
　var style = new Array();
style[1]=".week{background-color:#DfDfff;font-size:12px;width:140px;}"
+".ds{width:140px;font-size:12px;cursor:hand}"
+".mover{border:1px solid black;background-color:#f4f4f4;}"
+".move1{border:1px solid #5d5d5d;background-color:#f4f4f4;color:#909eff;font-size:12px}"
+".tit{background-color:#909EFF;width:140px;font-size:12px;color:white;cursor:default}"
+".cs{position:absolute;border:1px solid #909eff;width:142px;left:0px;top:0px;z-index:9999;}"
+".shadow{position:absolute;left:0px;top:0px;font-family: Arial Black;font-size:50px;color:#d4d4d4;z-index:1;text-align:center;}";
document.write("<style type='text/css'>");
document.write(style[num]);
document.write("</style>");
}
function createCalendar()
{
var week = new Array('日','一','二','三','四','五','六');
document.write("<div class='cs' onselectstart='return false' oncontextmenu='return false' onmousedown='if(event.button==2)this.style.display=\"none\"' id='myC_div'><div class='shadow'></div><div style='position:absolute;left:0px;top:0px;z-index:1'>");
//创建头部
document.write("<table class='tit' id='myC_Top' onmousedown='myC_x=event.x-parentNode.parentNode.style.pixelLeft;myC_y=event.y-parentNode.parentNode.style.pixelTop;setCapture()' onmouseup='releaseCapture();' onmousemove='myCMove(this.parentElement.parentElement);'><tr><td width=10 onmouseover='this.style.color=\"black\"' onmouseout='this.style.color=\"\"' onclick='cutYear()' style='font-family: Webdings;cursor:hand;' title='减少年份'>7</td><td title='减少月份' onmouseover='this.style.color=\"black\"' onclick='cutMonth()' onmouseout='this.style.color=\"\"' width=10 style='font-family: Webdings;cursor:hand;'>3</td><td align=center onmouseover=this.className='move1'; onmouseout=this.className='';divHidden(myC.parentElement.nextSibling); onclick='createyear("+this.year+",this);divShow(myC.parentElement.nextSibling);'></td><td align=center onclick='createmonth("+this.month+",this);divShow(myC.parentElement.nextSibling)' onmouseover=this.className='move1'; onmouseout=this.className='';divHidden(myC.parentElement.nextSibling);></td><td width=10 onmouseover='this.style.color=\"black\"' onmouseout='this.style.color=\"\"' onclick='addMonth()' style='font-family: Webdings;cursor:hand;' title='增加月份'>4</td><td width=10 style='font-family: Webdings;cursor:hand;' onmouseover='this.style.color=\"black\"' onmouseout='this.style.color=\"\"' onclick='addYear()' title='增加年份'>8</td></tr></table>");
//创建星期条目
document.write("<table class='week'><tr>");
for(i=0;i<7;i++)
document.write("<td align=center>"+week[i]+"</td>");
document.write("</tr></table>");
//创建日期条目
document.write("<table class='ds' id='myC' cellspacing=2 cellpadding=0>");
for(i=0;i<6;i++)
{
document.write("<tr>");
for(j=0;j<7;j++)
document.write("<td width=10% height=16 align=center onmouseover='mOver(this)' onmouseout='mOut(this)' onclick='if(this.innerText!=\"\")getValue(inputName,this.innerText);myC_div.style.display=\"none\"'></td>");
document.write("</tr>");
}
document.write("</table>");
//建建水印
document.write("</div>");
//创建选择图层
document.write("<div style='position:absolute;left:0px;top:0px;z-index:3' onmouseover=divShow(this) onmouseout=divHidden(this)></div>");
document.write("</div>");
//显示日期
showDate(this.year,this.month);
myC_div.style.display='none';
}
function getValue(obj,value)
{
eval(obj).value=parseInt(myC_Top.cells[2].innerText)+"-"+parseInt(myC_Top.cells[3].innerText)+"-"+value;
}
function showDate(year,month)
{
var myDate = new Date(year,month-1,1);
var today = new Date();
var day = myDate.getDay();
var length = new Array(31,30,31,30,31,30,31,31,30,31,30,31);
length[1] = ((year%4==0)&&(year%100!=0)||(year%400==0))?29:28;
for(i=0;i<myC.cells.length;i++)myC.cells[i].innerHTML = "";
for(i=0;i<length[month-1];i++)
{
myC.cells[i+day].innerHTML = (i+1);
if(new Date(year,month-1,i+1).getDay()==6||new Date(year,month-1,i+1).getDay()==0){myC.cells[i+day].style.color='red';}
}
myC_Top.cells[2].innerText=year+"年";
myC_Top.cells[3].innerText=month+"月";
with(myC.parentNode.previousSibling.style)
{
pixelLeft=myC.offsetLeft;
pixelTop=myC.offsetTop;
height = myC.clientHeight;
width = myC.clientWidth;
}
myC.parentElement.parentElement.style.height=myC.parentElement.offsetHeight;
myC.parentElement.previousSibling.innerHTML=year;
}
//一些附加函数--------------------
//---------Begin-------------------
function mOver(obj){obj.className = 'mover';}
function mOut(obj){if(obj.className=='mover')obj.className = '';}
function addYear(){var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText); year++;showDate(year,month);}
function addMonth(){var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText);month++;if(month>12){month=1;year++;}showDate(year,month);}
function cutYear(){var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText);year--;showDate(year,month);}
function cutMonth(){var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText);month--;if(month<1){month=12;year--;}showDate(year,month);}
function divS(obj)
{
if(obj!=divObj)
{
obj.style.backgroundColor="#909eff";
obj.style.color='black';
}
if(divObj!=null)
{
divObj.style.backgroundColor='';
divObj.style.color='';
}
divObj = obj;
}
function divShow(obj)
{ if (myC_timeset!=null) clearTimeout(myC_timeset);
obj.style.display='block';
}
function divHidden(obj){myC_timeset=window.setTimeout(function(){obj.style.display='none'},500);}
function createyear(year,obj)//创建年份选择
{
var ystr;
var oDiv;
ystr="<table class='move1' cellspacing=0 cellpadding=2 width="+obj.offsetWidth+">";
ystr+="<tr><td style='cursor:hand' onclick='createyear("+(year-20)+",myC_Top.cells[2])' align=center>上翻</td></tr>";
for(i=year-10;i<year+10;i++)
if(year==i)
ystr+="<tr style='background-color:#909eff'><td style='color:black;height:16px;cursor:hand' align=center onclick='myC_Top.cells[2].innerText=this.innerText;showDate("+i+",parseInt(myC_Top.cells[3].innerText));myC.parentElement.nextSibling.innerHTML=\"\"'>"+i+"年</td></tr>";
else
ystr+="<tr><td align=center style='cursor:hand' onmouseover=divS(this) onclick='myC_Top.cells[2].innerText=this.innerText;showDate("+i+",parseInt(myC_Top.cells[3].innerText));myC.parentElement.nextSibling.innerHTML=\"\"'>"+i+"年</td></tr>";
ystr+="<tr><td style='cursor:hand' onclick='createyear("+(year+20)+",myC_Top.cells[2])' align=center>下翻</td></tr>";
ystr+="</table>";
oDiv = myC.parentElement.nextSibling;
oDiv.innerHTML='';
oDiv.innerHTML = ystr;
showDiv(oDiv,obj.offsetTop+obj.offsetHeight,obj.offsetLeft);
}
function createmonth(month,obj)//创建月份选择
{
var mstr;
var oDiv;
mstr="<table class='move1' cellspacing=0 cellpadding=2 width="+(obj.offsetWidth+5)+">";
for(i=1;i<13;i++)
if (month==i)
mstr+="<tr style='background-color:#909eff'><td style='color:black;height:16px;cursor:hand' align=center onclick='myC_Top.cells[3].innerText=this.innerText;showDate(parseInt(myC_Top.cells[2].innerText),"+i+");myC.parentElement.nextSibling.innerHTML=\"\"'>"+i+"月</td></tr>";
else
mstr+="<tr><td align=center style='cursor:hand' onmouseover='divS(this)' onclick='myC_Top.cells[3].innerText=this.innerText;showDate(parseInt(myC_Top.cells[2].innerText),"+i+");myC.parentElement.nextSibling.innerHTML=\"\"'>"+i+"月</td></tr>";
mstr+="</table>";
oDiv = myC.parentElement.nextSibling;
oDiv.innerHTML='';
oDiv.innerHTML = mstr;
showDiv(oDiv,obj.offsetTop+obj.offsetHeight,obj.offsetLeft);
}
function showDiv(obj,top,left)
{
obj.style.pixelTop=top;
obj.style.pixelLeft=left;
}
function myCMove(obj)
{
if(event.button==1)
{
var X = obj.clientLeft;
var Y = obj.clientTop;
obj.style.pixelLeft= X+(event.x-myC_x);
obj.style.pixelTop= Y+(event.y-myC_y);
window.status=myC_y;
}
}
function showDiv2(obj)
{
inputName=obj.name;
var e=obj;
var ot = obj.offsetTop;
var ol=obj.offsetLeft;
while(obj=obj.parentElement){ot+=obj.offsetTop;ol+=obj.offsetLeft;}
myC_div.style.pixelTop=ot+e.offsetHeight;
myC_div.style.pixelLeft=ol;
myC_div.style.display="block";
}
function createInput(name)
{myC_div.style.display='none';
document.write("<input type='text' name='"+name+"' size=20 onfocus='showDiv2(this)'>");
}
// --------------End ---------------------
</script>
<script>
var myCalendar=new myCalendar;
myCalendar.year=2006;
myCalendar.show();
myCalendar.input("txt1");
</script>

</head>
<body>
<input type="text" name="test" onfocus="showDiv2(this)" readonly=true>
</body>
</html>


//http://jiee.cn/show.asp?id=63
分享到：
| 用setInterval来做图片切换最简单源码
评论
发表评论

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

相关推荐

    时间控件之JS 精美日历控件

    本文将围绕“JS精美日历控件”这一主题，详细介绍如何利用JavaScript实现一个功能丰富的日历插件，以My97DatePicker为例进行深入探讨。 My97DatePicker是一款广泛使用的JavaScript日历插件，它具有良好的兼容性，...

    MFC 自制精美日历控件

    MFC 自制精美日历控件是指开发者利用MFC框架，而非使用MFC库中内置的标准控件，自行设计和实现的一个具有美观界面的日历组件。这种自定义控件通常需要对Windows API、图形设备接口(GDI)或Direct2D等有深入理解，以便...

    net自定义精美日历控件合集

    本合集聚焦于自定义且精美的日历控件，旨在为.NET开发提供更丰富的用户界面体验。自定义日历控件不仅能够满足基本的日期选择功能，还可以通过自定义样式、交互效果以及功能扩展，使得日期选择过程更加美观和易用。 ...

    android精美的日历控件

    本篇将围绕"android精美的日历控件"这一主题，深入探讨如何自定义Android日历视图，并从给定的压缩包文件中获取相关资源进行实践。 首先，我们来理解“日历 Calendar View android”这一标签。这表明我们要创建的是...

    Qt之自绘制日历控件(三)

    在本文中，我们将深入探讨如何在Qt环境中创建一个自定义的日历控件，特别是通过“Qt之自绘制日历控件(三)”的实例来学习。这个控件不仅完全自绘，而且具备了月份切换和记录当前选中日期的功能，这使得它在实际应用中...

    Web 漂亮的日历控件

    在 Web 开发中，日历控件是一种常见的交互元素，用于选择日期或安排日程。一个优秀的日历控件不仅需要提供基本的功能，还需要具备良好的用户体验和视觉吸引力。"Web 漂亮的日历控件"是专为满足这一需求而设计的组件...

    Java日历控件,精美之极

    Java swing日历控件，界面精美，使用方便，能用于个人作品 首先，声明一点，这个控件是我从一套据说价值九百多美元的swing类包中提取出来， 并加以修改的，所以： 一， 你不能把该控件用于任何商业产品中。 二，...

    超级漂亮的日历控件

    "超级漂亮的日历控件"通常指的是那些设计精美、用户体验优秀的日历组件，它们不仅可以提供基本的日历功能，还可能包含一些高级特性，如自定义样式、多语言支持、事件标记等。以下将详细介绍这类控件的关键知识点： ...

    精美的XP风格的VB日历控件

    【标题】：“精美的XP风格的VB日历控件”是指一种在Visual Basic（VB）环境中设计的日历用户界面组件，它采用了微软Windows XP的视觉样式，为用户提供了一个直观、美观的日历选择功能。该控件能够帮助开发者轻松地在...

    一个精美的JS做的日历控件

    在本主题中，我们关注的是一个利用JS实现的日历控件。这个控件不仅美观，而且功能实用，是提升用户体验的绝佳工具。 日历控件在网页中的应用非常广泛，例如用于日期选择、事件安排、预约系统等。JS日历控件通过动态...

    多个精美的PB日历控件

    本资源提供的是多个精美的PB日历控件，这将极大提升应用程序的用户体验和视觉吸引力。 在PowerBuilder中，日历控件的使用通常涉及到以下几个方面： 1. **安装与导入**：首先，你需要将提供的日历控件资源解压，并...

    三款漂亮的JS日历控件

    在这个主题中，我们将探讨三款极具吸引力的JS日历控件，这些控件可以为网站增添实用性和美观性。通过阅读下方的内容，你将了解到如何利用这些控件来提升用户界面的体验。 首先，让我们来看一下标题中的“JS日历控件...

    android 日历精美控件

    在Android开发中，日历控件是不可或缺的一部分，它能够帮助用户直观地查看和管理日期相关的数据。"android 日历精美控件"通常指的是那些设计美观、功能丰富的第三方日历组件，它们可以增强应用程序的用户体验。...

    精美的日历控件代码，各种各样的

    这个压缩包中的“精美的日历控件代码”提供了多种不同设计风格和功能的日历组件，对于开发者来说，无论是进行Web开发还是桌面应用开发，都是一份非常宝贵的资源。 首先，我们来探讨一下日历控件的基本概念。日历...

    超精美的js日历控件

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

    JavaSwing日历控件宝典.doc

    JavaSwing日历控件宝典 JavaSwing日历控件宝典是Java Swing编程中一个非常实用的控件，旨在提供一个美观易用的日期选择器控件。下面是关于该控件的详细说明。 控件概述 JavaSwing日历控件是一个继承自JComponent...

    精美的一款日历控件，好学，易用，简单，快捷！

    总的来说，My97DatePicker凭借其精美的设计、易用的交互和强大的自定义能力，成为了许多开发者在创建Web应用时首选的日历控件。无论你是初学者还是经验丰富的开发者，这款控件都能帮助你快速构建具有专业日历功能的...

    不可多得的精美的js日历控件

    在本资源中，我们探讨的是一个名为"不可多得的精美的js日历控件"，这是一款专为前端开发者设计的高效、功能丰富的日历组件。 日历控件是网页或应用程序中常见的一种用户界面元素，它允许用户以直观的方式选择日期。...

    精美实用的js日历控件

    本资源提供了一款“精美实用的js日历控件”，它具有良好的用户界面和易用性，能够帮助开发者快速集成到自己的项目中。 日历控件的基本功能通常包括：显示当前日期，允许用户选择单个日期或日期范围，展示节假日，...

    日历控件（精美+提示+提醒的功能）

    本文将深入探讨标题为“日历控件（精美+提示+提醒的功能）”的相关知识点，主要关注其美观性、提示功能以及提醒机制。 首先，我们来看“精美”这一特点。在现代UI设计中，用户界面的美观性和用户体验息息相关。一个...

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