运用JS的innerHTML，和for循环实现日历小部件内容和日期的转换。
<!DOCTYPE html> <html> <head> <title>日历小部件</title> <style type="text/css"> *{padding: 0;margin:0;} .tab{width:220px;background: #ccc;height: 400px;margin: 0 auto;padding: 10px;} ul{width:200px;margin: 0 auto;} li{color:#fff;list-style:none;width:50px;height:50px;float: left;background: #444;text-align: center;padding: } .active{background: #fff;color: #f00;} </style> <script type="text/javascript"> var aDatas=['January快过年了，准备抢票喽！','February','March','April','May','June','July','Aguest','September','October','Novermber','December']
//用数组存储日历备忘录的内容 window.onload=function(){ var aLi=document.getElementsByTagName('li'); var oTxt=document.getElementsByClassName('text')[0]; for(var i=0;i<aLi.length;i++){ aLi[i].index=i; //记录当前li的索引值，并赋值给i aLi[i].onmouseover=function(){ for(var i=0;i<aLi.length;i++){ aLi[i].className=""; //鼠标滑过，是li的class为空 } this.className="active"; //并定义当前li的class为active oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+aDatas[this.index]+'</p>'; //给当前的内容标题获取当前“index+1”值 }; } } </script> </head> <body> <div class="tab"> <ul id="clander"> <li class="active"><h2>1</h2></li> <li><h2>2</h2></li> <li><h2>3</h2></li> <li><h2>4</h2></li> <li><h2>5</h2></li> <li><h2>6</h2></li> <li><h2>7</h2></li> <li><h2>8</h2></li> <li><h2>9</h2></li> <li><h2>10</h2></li> <li><h2>11</h2></li> <li><h2>12</h2></li> <div style="clear: both;"></div> </ul> <div class="text"> <h2>1月活动</h2> <p>快过年了，准备抢票喽！</p> </div> </div> </body> </html>
2.利用JS的getHours（）和 getMinutes（）和getSeconds（）获取当前的日期
<!DOCTYPE html> <html> <head> <title>数码时钟</title> </head> <style type="text/css"> *{margin:0;padding: 0;} .alarm{width:500px;margin:0 auto;padding:10px;background: url(images/bg.png)top center no-repeat;height: 600px;color:#fff;font-size: 50px;} </style> <script type="text/javascript"> function toDouble(num){ if(num<10){ return "0"+num; } else{ return ''+num; } } window.onload=function(){ // var oBtn=document.getElementById('btn'); var aImg=document.getElementsByTagName('img'); function updateTime(){ var oDate=new Date(); // var arr=['2','1','3','1','5','3']; var str=toDouble(oDate.getHours())+toDouble(oDate.getMinutes())+toDouble(oDate.getSeconds()); //alert(str); for(var i=0;i<aImg.length;i++){ aImg[i].src='images/'+str.charAt(i)+'.png';//charAt() 方法可返回指定位置的字符。 } } setInterval(updateTime,1000); updateTime(); }; </script> <body> <div class="alarm"> <!-- <input id="btn" type="button" value="更新时间"> --> <div class="time"> <img src="images/0.png"> <img src="images/0.png"> 点 <img src="images/0.png"> <img src="images/0.png"> 分 <img src="images/0.png"> <img src="images/0.png"> 秒 </div> </div> </body> </html>