IDC资讯中心
使用时请在我的blog中留言！
mask.htc
//©2004 mini corporation. mqk2002@hotmail.com
<public:event name="onerror" id="error"/>
<public:attach event="ondocumentready" handler="doinit"/>
<public:attach event="onmouseover" handler="inputmouseover"/>
<public:attach event="onmouseout" handler="inputmouseout"/>
<script language="jscript">
function click(){
if (!element.document.getelementbyid("odateview")){
inithtml=<table border="0" width="200" cellspacing="0" cellpadding="0" height="145" id="odateview" class="clsdateview" onblur="this.style.display=\none\">;
inithtml+=<tr class="clsdateviewheader">;
inithtml+= <td width="15%" align="middle" height="21" style="cursor: hand;"><<</td>;
inithtml+= <td width="15%" align="middle" height="21" style="cursor: hand;"><</td>;
inithtml+= <td width="14%" align="middle" height="21"></td>;
inithtml+= <td width="14%" align="middle" height="21"></td>;
inithtml+= <td width="14%" align="middle" height="21"></td>;
inithtml+= <td width="14%" align="middle" height="21" style="cursor: hand;">></td>;
inithtml+= <td width="14%" align="middle" height="21" style="cursor: hand;">>></td>;
inithtml+=</tr>;
inithtml+=<tr class="clsdateviewweek">;
inithtml+= <td width="15%" align="middle" height="21">日</td>;
inithtml+= <td width="15%" align="middle" height="21">一</td>;
inithtml+= <td width="14%" align="middle" height="21">二</td>;
inithtml+= <td width="14%" align="middle" height="21">三</td>;
inithtml+= <td width="14%" align="middle" height="21">四</td>;
inithtml+= <td width="14%" align="middle" height="21">五</td>;
inithtml+= <td width="14%" align="middle" height="21">六</td>;
inithtml+=</tr>;
for (i=3;i<9;i++){
inithtml+=<tr class="clsdateviewday">;
inithtml+= <td width="15%" align="middle" height="21" style="cursor: hand;"></td>;
inithtml+= <td width="15%" align="middle" height="21" style="cursor: hand;"></td>;
inithtml+= <td width="14%" align="middle" height="21" style="cursor: hand;"></td>;
inithtml+= <td width="14%" align="middle" height="21" style="cursor: hand;"></td>;
inithtml+= <td width="14%" align="middle" height="21" style="cursor: hand;"></td>;
inithtml+= <td width="14%" align="middle" height="21" style="cursor: hand;"></td>;
inithtml+= <td width="14%" align="middle" height="21" style="cursor: hand;"></td>;
inithtml+=</tr>;
}
inithtml+=</table>;
element.document.body.insertadjacenthtml("beforeend",inithtml);
odateview.attachevent("onclick",dateviewclick);
odateview.attachevent("onmouseover",dateviewmouseover);
odateview.attachevent("onmouseout",dateviewmouseout);
element.document.attachevent("onclick",documentclick);
}
window.activedate=value;
window.activeobj=this;
builddate();
displaydateview();
}
function dateviewclick(){
var e = window.event.srcelement
switch (e.innertext){
case ">>":
changedate(12);
break;
case "<<":
changedate(-12);
break;
case ">":
changedate(1);
break;
case "<":
changedate(-1);
break;
default:
if (e.style.cursor=="hand"){
year=new date(date.parse(e.value)).getfullyear();
month=new date(date.parse(e.value)).getmonth()+1;
day=new date(date.parse(e.value)).getdate();
odateview.style.display="none";
window.activeobj.value=year+"/"+month+"/"+day;
}
}
}
function dateviewmouseover(){
var e = window.event.srcelement
if ((e.style.cursor=="hand")){
e.classname="clsdateviewdayover";
}
}
function dateviewmouseout(){
var e = window.event.srcelement
if ((e.style.cursor=="hand")){
e.classname="";
}
}
function changedate(step){
year=new date(date.parse(window.activedate)).getfullyear();
month=new date(date.parse(window.activedate)).getmonth()+step;
day=new date(date.parse(window.activedate)).getdate();
window.activedate=new date(year,month,day);
builddate();
}
function builddate() {
if (window.activedate==""){
year=new date().getfullyear();
month=new date().getmonth();
day=new date().getdate();
}
else{
year=new date(date.parse(window.activedate)).getfullyear();
month=new date(date.parse(window.activedate)).getmonth();
day=new date(date.parse(window.activedate)).getdate();
}
window.activedate=year+"/"+eval(month+1)+"/"+day;
eval(odateview).rows(0).cells(2).innertext=year;
eval(odateview).rows(0).cells(3).innertext=month+1;
eval(odateview).rows(0).cells(4).innertext=day;
var lastdate=new date(year,month,0);
var date=new date(year,month,1);
var maxday=new date(year,month+1,0).getdate();
for (var i=0;i<7;i++){
var cell=eval(odateview).rows(2).cells(i);
if (i<date.getday()){
cell.innertext=lastdate.getdate()-date.getday()+i+1;
cell.style.color="#999999";
cell.value=new date(year,month-1,(lastdate.getdate()-date.getday()+i+1));
}
else{
cell.innertext=i+1-date.getday();
cell.style.color="#000000";
cell.value=new date(year,month,i+1-date.getday());
}
}
for(i=7;i<42;i++){
day=i+1-date.getday();
var cell=eval(odateview).rows(math.floor(i/7)+2).cells(i%7);
if (day<=maxday){
cell.innerhtml=day;
cell.style.color="#000000";
cell.value=new date(year,month,day);
}
else{
cell.innerhtml=day-maxday;
cell.style.color="#999999";
cell.value=new date(year,month+1,day-maxday);
}
}
}
function displaydateview(){
odateview.style.left=getoffsetleft(element);
odateview.style.top=getoffsettop(element)+element.offsetheight;
if (odateview.style.display="none"){
odateview.style.display="block";
}
else{
odateview.style.display="none";
}
}
function documentclick(){
var e = window.event.srcelement;
if (((e.tagname.tolowercase() != "input")||((e.tagname.tolowercase() == "input")&&(e.preset==null)))&&(!isexists(e,odateview))){
odateview.style.display="none";
}
}
function isexists(src,dst){
if (src.tagname!="body"){
if (src.parentelement==dst) return true;
return isexists(src.parentelement,dst)
}
return false;
}
function getoffsetleft(src){
var set=0;
if(src)
{
if (src.offsetparent)
set+=src.offsetleft+getoffsetleft(src.offsetparent);
if(src.tagname!="body")
{
var x=parseint(src.scrollleft,10);
if(!isnan(x))
set-=x;
}
}
return set;
}
function getoffsettop(src){
var set=0;
if(src)
{
if (src.offsetparent)
set+=src.offsettop+getoffsettop(src.offsetparent);
if(src.tagname!="body")
{
var y=parseint(src.scrolltop,10);
if(!isnan(y))
set-=y;
}
}
return set;
}
//初始化控件
function doinit()
{
var stag = tagname.tolowercase();
if (stag == "input"){
attachevent("onblur", inputblur);
if (this.preset=="date") attachevent("onclick",click);
}
}
//鼠标移动上触发
function inputmouseover(){
element.classname="clsinputmouseover";
}
//鼠标移出触发
function inputmouseout(){
element.classname="clsinput";
}
function inputblur()
{
if (value=="") return;
switch(this.preset)
{
case "date":
if (value=="") return
var reg = /^[1-2]{1,1}[0-9]{3,3}[/]{1,1}[0-9]{1,2}[/]{1,1}[0-9]{1,2}$/;
if (!reg.test(value)){
returnerror("无效的日期格式");
}
break;
case "float":
var reg = /^[0-9]{0,10}[.]{0,1}[0-9]{0,4}$/;
if (!reg.test(value)){
returnerror("无效的数字格式");
}
break;
case "email":
var reg = /^\w+((-\w+)|(\.\w+))*\@\w+((\.|-)\w+)*\.\w+$/;
if (!reg.test(value)){
returnerror("无效的email格式");
}
break;
}
}
function returnerror(smsg)
{
var oevent = createeventobject();
oevent.setattribute("error", smsg);
error.fire(oevent);
element.focus();
alert(smsg);
}
</script>
mask.css
.clsinput
{
border: #999999 1px solid;
background-color:#f5f5f1;
font: 12px 宋体;
width:95%;
behavior: url(mask.htc);
}
.clsinputmouseover
{
border: #000000 1px solid;
background-color:#fffff1;
font: 12px 宋体;
width:95%;
behavior: url(mask.htc);
}
.clsdateview
{
border: #999999 1px solid;
font-size: 12px;
background-color: #ffffcc;
text-align: center;
position: absolute;
left:auto;
top:auto;
width:200;
}
.clsdateviewheader
{
border:1px solid #3399ff; background-color: #990000; color:#ffffcc
}
.clsdateviewweek
{
background-color: #ffcc66;color:#663399
}
.clsdateviewday
{
background-color: #ffffcc;
}
.clsdateviewdayover
{
background-color: #ffcc66;
}
test.htm
<html>
<head>
<meta http-equiv="content-language" content="zh-cn">
<meta name="generator" content="microsoft frontpage 6.0">
<meta name="progid" content="frontpage.editor.document">
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
<link href="mask.css" type="text/css" rel="stylesheet">
</head>
<body>
<input type="text" class="clsinput" preset="date">
<input type="text" class="clsinput" preset="float">
<input type="text" class="clsinput" >
</body>
</html>
图例演示
不知为什么不能上传图片了？？
