本文给大家分享的是使用JS实现日历制作,非常的详细,也很实用,适合初学者,有需要的小伙伴参考下。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="./系统CSS初始化.css"> <style> li{ width: 50px; height: 50px; background: black; color: white; margin: 5px; float: left; text-align: center; line-height: 23px; } #time{ position: relative; top: 150px; width: 180px; height: 300px; background: #686868; margin: 0 auto; } #action{ clear: both; width: 160px; height: 50px; position: relative; left: 10px; background: snow; } li:hover{ background: orange; color: black; } </style> <script> window.onload=function (ev) { var sz=[1,2,3,4,5,6,7,8,9,10,11,12]; var op=document.getElementById("time"); var aLI=op.getElementsByTagName("li"); var op1=document.getElementById("action"); for(var i=0;i<aLI.length;i++) { aLI[i].index=i; aLI[i].onmousemove=function(){ op1.innerHTML=sz[this.index]+"月活动,大家快来玩吧"; } } } </script> </head> <body> <p id="time"> <ul> <li>1月<p>Jan</p></li> <li>2月<p>Feb</p></li> <li>3月<p>Mar</p></li> <li>4月<p>Apr</p></li> <li>5月<p>May</p></li> <li>6月<P>Jun</P></li> <li>7月<p>Jul</p></li> <li>8月<p>Aug</p></li> <li>9月<p>Sep</p></li> <li>10月<p>Oct</p></li> <li>11月<p>Nov</p></li> <li>12月<p>Dec</p></li> </ul> <p id="action"></p> </p> </body> </html>
相关推荐:
以上是JS实现日历制作的详细内容。更多信息请关注PHP中文网其他相关文章!