漂亮的CSS变色日历

那些年吹的牛x

那些年吹的牛x

2016-02-19 21:22

想不想get新技能酷炫一下，今天图老师小编就跟大家分享个简单的漂亮的CSS变色日历教程，一起来看看吧！超容易上手~

style
.cal_0 table{
    border:none;
    font-family:tahoma;
    font-size:9px;
    text-align:center;
    }
.cal_0 th{
    height:17;
    background-image:e­xpression("url("+MyCal.color+"_h.gif)");
    border-bottom:e­xpression("1 solid "+MyCal.ca);
    }
.cal_0{
    background-image:url(shadow.gif);
    width:168;
    height:131;
    cursor:default;
    padding:3 4 5 3;
    position:absolute;
    }
.cal_1{
    border:e­xpression("1 solid "+MyCal.ca);
    width:100%;
    height:100%;
    }
.d1{
    position:absolute;
    color:e­xpression(MyCal.cb);
    font-size:96px;
    font-family:Arial black;
    font-weight:bolder;
    left:0;
    top:-9;
    width:160;
    text-align:center;
    overflow:hidden;
    z-index:-1;
    }
.d5{
    position:absolute;
    left:45;
    top:108;
    width:60;
    height:13;
    }
.d6{
    position:absolute;
    left:108;
    top:108;
    width:48;
    height:13;
    }
.cc{
    border-color:e­xpression(MyCal.ca);
    border-width:1;
    border-style:solid;
    line-height:9px;
    }
.sel{
    position:absolute;
    border-top:none;
    top:121;
    height:135;
    overflow:hidden;
    background-color:white;
    overflow-y:auto;
    display:none;
    }
.selitem{
    font-family:tahoma;
    font-size:9px;
    line-height:11px;
    text-align:left;
    }
.p1{
    padding-left:19;
    }
.p2{
    padding-left:16;
    }
.scroll{
    scrollbar-3dlight-color:e­xpression(MyCal.ca);
    scrollbar-arrow-color:white;
    scrollbar-face-color:white;
    scrollbar-shadow-color:white;
    scrollbar-track-color:white;
    }
/style

（本文来源于图老师网站，更多请访问http://m.tulaoshi.com/webkaifa/）

script
    MyCal.color="green";
    MyCal.ca="#99cc00";
    MyCal.cb="#e5f5e5";
function MyCal(numYear,numMonth,numDate){
    if(typeof(oMain)!='undefined'){
        alert("one instance of MyCal per page only")
        return null;
        }
    var arg=MyCal.arguments;
    if(arg.length==3){
        this.year=arg[0];
        this.month=arg[1];
        this.date=arg[2];
        }
    else{
        var t=new Date();
        this.year=t.getYear();
        this.month=t.getMonth();
        this.date=t.getDate();
        }
    this.green=["#99cc00","#e5f5e5"];
    this.blue=["#00ccff","#e5eff5"];
    this.yellow=["#ffcc00","#ffefef"];
    this.gray=["#999999","#f0f0f0"];
    this.DayName="Sun,Mon,Tue,Wed,Thu,Fri,Sat".split(",");
    this.MonthDay=[[31,28,31,30,31,30,31,31,30,31,30,31],[31,29,31,30,31,30,31,31,30,31,30,31]];
    this.MonthName="Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec".split(",");
    for(var i in this.MonthName)
        this.MonthName[this.MonthName[i]]=i;
    this.setColor=function(str){
        if(typeof(this[str])=="undefined"){
            alert("no such color:"+str);
            return;
            }
        if(typeof(oYear)!="undefined"){
            var t=document.all("imgArr");
            for(var i=0;it.length;i++)
                t[i].src=t[i].src.replace(MyCal.color,str);
            }

（本文来源于图老师网站，更多请访问http://m.tulaoshi.com/webkaifa/）        MyCal.color=str;
        MyCal.ca=this[str][0];
        MyCal.cb=this[str][1];
        }
    this.chgYear=function(d){
        var m=oYear.innerText;
        this.year=parseInt(m)+d;
        this.refresh();
        }
    this.chgMonth=function(d){
        var i=parseInt(this.MonthName[oMonth.innerText])+d;
        if(i==12)
            i=0;
        else if(i==-1)
            i=11;
        this.month=i;
        this.refresh();
        }
    this.chgDate=function(ob){
        if(ob==event.srcElement)
            return;
        var x=event.srcElement.innerText;
        if(x==" ")
            return;
        oDate.cells[this.date+this.day+7].style.fontWeight="normal";
        this.date=parseInt(x);
        event.srcElement.style.fontWeight="bold";
        }
    this.setDate=function(ob){
        var y0=this.year,m0=this.month;
        if(ob==event.srcElement)
            return;
        var t=ob.id.replace("sel","").toLowerCase();
        var x=event.srcElement.innerText;
        this[t]=parseInt(t=="year"？x:this.MonthName[x]);
        ob.style.display="none";
        if(y0!=this.year||m0!=this.month)
            this.refresh();
        }
    this.refresh=function(){
        oMonth.innerText=this.MonthName[this.month];       
        oYear.innerText=this.year;
        oBg.innerText=this.month+1;
        oMain.filters[0].apply();
        oMain.innerHTML=this.drawTable();
        oDate.cells[this.date+this.day+7].style.fontWeight="bold";
        oMain.filters[0].play();
        }
    this.outPut=function(){
        var str='div class="cal_0" id=oCal onselectstart="return false;"'+
        '    div class=d1 id=oBg'+(this.month+1)+'/div'+
        '    table class="cal_1" cellspacing=0 cellpadding=0'+
        '        tr';
                for(var i=0;i7;i++)
                    str+='th'+this.DayName[i]+'/th';
                str+=
        '        /tr'+
        '        trtd colspan=7 align=left id=oMain style="filter:blendtrans(duration=0.5)"'+
                        this.drawTable()+
        '        /tdtr'+
        '        td colspan=7 /td'+
        '        /tr'+
        '    /table'+
        '    div class="d5 cc"'+
        '        table cellpadding=0 cellspacing=0tr'+
        '            tdimg id=imgArr src="'+MyCal.color+'_al0.gif" onclick="CalOb.chgYear(-1)"/td'+
        '            td width=44 class=cc style="border-width:0 1 0 1;cursor:hand" valign=bottom id=oYear'+this.year+'/td'+
        '            tdimg id=imgArr src="'+MyCal.color+'_ar0.gif" onclick="CalOb.chgYear(1)""/td'+
        '        /tr/table'+
        '    /div'+
        '    div class="d6 cc"'+
        '        table cellpadding=0 cellspacing=0tr'+
        '            tdimg id=imgArr src="'+MyCal.color+'_al0.gif" onclick="CalOb.chgMonth(-1)"/td'+
        '            td width=44 class=cc style="border-width:0 1 0 1;cursor:hand" valign=bottom id=oMonth'+this.MonthName[this.month]+'/td'+
        '            tdimg id=imgArr src="'+MyCal.color+'_ar0.gif" onclick="CalOb.chgMonth(1)"/td'+
        '        /tr/table'+
        '    /div'+
        '    div class="sel cc scroll" id=selYear style="left:45;width:60" onclick="CalOb.setDate(this)"';
                for(var i=2001;i2050;i++)
                    str+='div class="selitem p1"'+i+'/div';
                str+=
        '    /div'+
        '    div class="sel cc" id=selMonth style="left:108;width:48" onclick="CalOb.setDate(this)"';
                for(var i=0;i12;i++)
                    str+='div class="selitem p2"'+this.MonthName[i]+'/div';
                str+=
        '    /div'+
        '/div';        document.write(str);
        CalOb=this;
        oDate.cells[this.date+this.day+7].style.fontWeight="bold";
        oDate.cells[this.date+this.day+7].style.fontSize="12px";
        attchEvent();
        }
    this.drawTable=function(){
        var day=new Date(this.year,this.month,1);
        day=day.getDay();
        this.day=day-1;
        var m=this.year%4==0&&this.year%100||this.year%400==0？1:0;
        m=this.MonthDay[m][this.month];   
        var r="table style='table-layout:fixed' cellpadding=0 cellpacing=0 id=oDate onclick='CalOb.chgDate(this)'";
        r+="tr height=3td width=20/tdtd width=23/tdtd width=23/td"+
            "td width=23/tdtd width=20/tdtd/tdtd/td/tr";
        for(var i=0,k=0;i6;i++){
            r+="tr";
            for(var j=0;j7;j++){
                var k=i*7+j+1;
                var ts="td /td"
                if(kday&&k=m+day){
                    ts="td";
                    if(j==0||j==6)
                        ts+=" style='color:red'";
                    ts+=""+(k-day)+"/td";
                    }
                r+=ts;
                }
            r+="/tr";
            }
        r+="/table";
        return r;
        }
    function attchEvent(){
        oYear.onmouseover=function(){
            selYear.style.display="block";
            }
        oYear.onmouseout=function(){
            if(event.offsetY10)
                selYear.style.display="none";
            }
        oMonth.onmouseover=function(){
            selMonth.style.display="block";
            }
        oMonth.onmouseout=function(){
            if(event.offsetY10)
                selMonth.style.display="none";
            }
        selYear.onmouseout=selOut;
        selYear.onmouseover=selOver;
        selMonth.onmouseout=selOut;
        selMonth.onmouseover=selOver;
        var t=document.all.imgArr;
        for(var i=0;it.length;i++){
            t[i].onmousedown=imgDown;
            t[i].onmouseup=imgUp;
            }
        }
    function imgDown(){
        this.src=this.src.replace(/.{5}$/,"1.gif");
        }
    function imgUp(){
        this.src=this.src.replace(/.{5}$/,"0.gif");
        }
    function selOver(){
        var ob=event.srcElement;
        if(ob==this)
            return;
        ob.style.backgroundColor=MyCal.cb;
        }
    function selOut(){
        var ob=event.srcElement;
        if(ob==this)
            this.style.display="none";
        else
            ob.style.backgroundColor="white";
        }
    }
/script

script
var tt=new MyCal();
tt.setColor("blue");//
tt.outPut();

var colortable=["green","blue","yellow","gray"];
var cc=0;
document.body.onclick=function(){
    if(event.srcElement.tagName!=="BODY")
        return;
    tt.setColor(colortable[cc++]);
    if(cc==colortable.length)
        cc=0;
    }
document.body.title="单击页面空白以更换颜色 | http://soft.knowsky.com/"
/script

展开更多 （50%）
分享

猜你喜欢

漂亮的CSS变色日历

Web开发
漂亮的CSS变色日历

(译)用CSS设计日历

Html CSS布局 Div+CSS XHTML
(译)用CSS设计日历

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

css应用：单击table使点击的行变色

Web开发
css应用：单击table使点击的行变色

Photoshop自制漂亮的带相片的日历

电脑网络
Photoshop自制漂亮的带相片的日历

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS教程:CSS制作漂亮的灵活的图表

Web开发
CSS教程:CSS制作漂亮的灵活的图表

几个漂亮的Button的CSS

Html CSS布局 Div+CSS XHTML
几个漂亮的Button的CSS

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

windows7系统任务计划程序绕过UAC管理实现程序的开机自启动

windows7系统任务计划程序绕过UAC管理实现程序的开机自启动

MySQL入门学习(四)学习篇(2)

MySQL入门学习(四)学习篇(2)
下拉加载更多内容 ↓