The calendar demo can be dynamically switched, and the calendar demo can be dynamically switched.
Demo address: http://codepen.io/tianzi77/pen/vOQbPY
Look at other people's demo. I also tried to write it myself; small calendar.
Structure:
<Div id = "calendar" name = "calendar"> <ul> <li class = "current"> <strong> 1 </strong> JAN </li> <li class = ""> <strong> 2 </strong> FER </li> <li class = ""> <strong> 3 </strong> MAR </li> <li class = ""> <strong> 4 </strong> APR </li> <li class = ""> <strong> 5 </strong> MAY </li> <li class = ""> <strong> 6 </strong> JUN </li> <li class = ""> <strong> 7 </strong> JUL </li> <li class = ""> <strong> 8 </strong> AUG </li> <li class = ""> <strong> 9 </strong> SE P </li> <li class = ""> <strong> 10 </strong> OCT </li> <li class = ""> <strong> 11 </strong> NOV </li> <li class = ""> <strong> 12 </strong> DEC </li> </ul> <div id = "message" class = "message ">
Style:
body, ul, li, h2, p { margin: 0; padding: 0; } #calendar { width: 248px; overflow: hidden; background: #abcdef; margin: 10px auto; padding: 0 0 10px 10px; } #calendar ul { overflow: hidden; } #calendar ul li { list-style: none; color: #fff; width: 40px; height: 40px; float: left; border: 1px solid yellow; text-align: center; line-height: 1.3; font-size: 14px; margin: 10px 10px 0 0; background: #424242; padding: 5px; cursor: pointer; } #calendar ul li.current { color: #F69; background: #fff; } #calendar li strong { font-size: 18px; display: block; } #message { color: #666; background: #f1f1f1; border: 1px solid #fff; margin: 10px 10px 0 0; padding: 5px; } #message h2 { font-size: 14px; }
Js performance:
Window. onload = function () {var oLi = document. getElementById ("calendar "). getElementsByTagName ("li"); var oMsg = document. getElementById ("message"); var oP = oMsg. getElementsByTagName ("p") [0]; var oStrong = oMsg. getElementsByTagName ("strong") [0]; var oArray = ["New Year's Day: Three days off on January 1, January 1-3. "," Spring Festival: 7 days off on January 1, February 2-8. "," Women's Day: March 8 Women's Day, it has nothing to do with me. "," Tomb-sweeping Day: Three days off on January 1, April 3-5 "," Labor Day: Three days off from January 2, April 30-5. "," Dragon Boat Festival: October 13, June 4-6 holiday for three days. "," Small Heat: Small Heat in July 7. No holiday. "," Qixi Festival: August 6 Qixi Festival. No holiday. "," Mid-Autumn Festival: Three days off on January 1, September 10-12. "," National Day: 7 days off on January 1, October 1-7. "," Winter: the winter of November 8. No holiday. "," AIDS Day: December 1 <br/> International Day for the Abolition of Slavery: December 2. "]; For (var I = 0; I <oLi. length; I ++) {oLi [I]. index = I; oLi [I]. onmouseover = function () {for (var n = 0; n <oLi. length; n ++) oLi [n]. className = ""; this. className = "current"; oP. innerHTML = oArray [this. index]; oStrong. innerHTML = this. index + 1 ;}}}
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.