一个非常漂亮的js日历,可按月变换色彩-JS特效-爱易网页

一个非常漂亮的js日历,可按月变换色彩

日期：2014-05-18　浏览次数：20115 次

css用了expression，若放在有较多内容的页面里，会影响页面加载和运行速度
以下是HTML网页特效代码，点击运行按钮可查看效果：

以下是程序代码

<base href=http://www.aiyiweb.com >
<style>
.cal_0 table{
 border:none;
 font-family:tahoma;
 font-size:9px;
 text-align:center;
 }
.cal_0 th{
 height:17;
 background-image:expression("url("+MyCal.color+"_h.gif)");
 border-bottom:expression("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:expression("1 solid "+MyCal.ca);
 width:100%;
 height:100%;
 }
.d1{
 position:absolute;
 color:expression(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:expression(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:expression(MyCal.ca);
 scrollbar-arrow-color:white;
 scrollbar-face-color:white;
 scrollbar-shadow-color:white;
 scrollbar-track-color:white;
 }
</style>
<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;i<t.length;i++)
    t[i].src=t[i].src.replace(MyCal.color,str);
   }
  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</div></div>

<div class="clearfix"></div>
                    </div>
                    <nav aria-label="...">
                        <ul class="pager">
                            <li class="previous"><a href="4667">上一篇：狡猾的按钮特效</a></li>

<li class="next"><a href="1058">下一篇：实现每天上午10点钟，定时弹出窗口提醒信息</a></li>
                        </ul>
                    </nav>

<div class="alert alert-warning" role="alert">
                        <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
                    </div>

<div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34428' title='喜大普奔：2016年国内乘客有望在飞机上使用手机' target="_blank">
                        喜大普奔：2016年国内乘客有望在飞机上使用手机</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10820' title='从3G牌照发放看中国4G规划效果 ' target="_blank">
                        从3G牌照发放看中国4G规划效果 </a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34227' title='曹国伟：微博将关注Facebook和Twitter' target="_blank">
                        曹国伟：微博将关注Facebook和Twitter</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34340' title='扎克伯格华裔妻子首度亮相电视节目畅谈情史' target="_blank">
                        扎克伯格华裔妻子首度亮相电视节目畅谈情史</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/6907' title='诺基亚培育低端机市场 迂回战术要挟中华酷联' target="_blank">
                        诺基亚培育低端机市场 迂回战术要挟中华酷联</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34122' title='墨迹天气：产品创新以攻为守方能对抗巨头' target="_blank">
                        墨迹天气：产品创新以攻为守方能对抗巨头</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34373' title='网络视频的几大趋势将成视频玩家躲不开的发力点' target="_blank">
                        网络视频的几大趋势将成视频玩家躲不开的发力点</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10837' title='200美元英特尔Android笔记本行将到来' target="_blank">
                        200美元英特尔Android笔记本行将到来</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/6903' title='联想架构调整后：Think品牌或推智能手机' target="_blank">
                        联想架构调整后：Think品牌或推智能手机</a></li></div>
                   
                
        </ol>
    </div>
</div>

</div>

</div>
            </div>
            <div class="clearfix"></div>

<footer class=" footer navbar-bottom">
<em>友情链接：</em>
    
      <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a>            
    
<br />
<script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script>

Copyright © 2013-2025 爱易网页 当前在线：381人　
        网站在2时15分50秒内访问总人数：29973人
    当前 21.41%
　<a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script>

</footer>

</div>
   
</body>
</html>