运用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的索引值,并赋值给iaLi[i].onmouseover=function(){for(var i=0;i<aLi.length;i++){aLi[i].className=""; //鼠标滑过,是li的class为空 }this.className="active"; //并定义当前li的class为activeoTxt.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>