js简单日历效果代码实例
分类:实例代码
分享一段代码实例,它实现了简单的日历效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } .calendar > h2 { color: #333; } .swapper { width: 240px; margin: 100px auto; background: #CCC; padding: 20px 30px 30px; } .calendar ul li { float: left; width: 60px; text-align: center; padding: 5px 0; cursor: pointer; background: #333; margin: 10px; color: #fff; } .calendar ul:after { display: block; clear: both; content: ""; } .calendar ul li.active { background: #fff; color: #E95345; } .content { margin-top: 10px; padding: 20px 10px; background: #fff; } .content p { margin-top: 10px; } </style> <script> window.onload = function() { var lis = document.getElementById('calender').getElementsByTagName('li'); var content = document.getElementById('content'); var con_arr = [ '元旦(3天),春节(7天)', '元宵节,情人节,', '妇女节,植树节', '愚人节,清明节(3天)', '劳动节(3天),端午节(3天),青年节', '儿童节,父亲节', '建党节', '建军节,七夕', '教师节', '国庆节,中秋节(总共8天)', '感恩节', '平安夜,圣诞节' ]; //console.log(lis.length); for (var i = 0; i < lis.length; i++) { lis[i].index = i; //console.log(i); lis[i].onclick = function() { //console.log(12322); for (var i = 0; i < lis.length; i++) { lis[i].className = ""; //content.innerHTML=""; } this.className = "active"; //console.log(content[this.index]); content.innerHTML = '<h2 style="color:#E95345">' + (this.index + 1) + '月节假日</h2>' + '<p style="color:#666">' + con_arr[this.index] + '</p>'; console.log(content.innerHTML); } } } </script> </head> <body> <div class="swapper"> <div class="calendar" id="calender"> <h2>2017节日一览表</h2> <ul> <li class="active"> <h2>1月</h2> <p>Jan</p> </li> <li> <h2>2月</h2> <p>Feb</p> </li> <li> <h2>3月</h2> <p>Mar</p> </li> <li> <h2>4月</h2> <p>Apr</p> </li> <li> <h2>5月</h2> <p>May</p> </li> <li> <h2>6月</h2> <p>Jun</p> </li> <li> <h2>7月</h2> <p>Jul</p> </li> <li> <h2>8月</h2> <p>Aug</p> </li> <li> <h2>9月</h2> <p>Sep</p> </li> <li> <h2>10月</h2> <p>Oct</p> </li> <li> <h2>11月</h2> <p>Nov</p> </li> <li> <h2>12月</h2> <p>Dec</p> </li> </ul> </div> <div class="content" id="content"> <h2 style="color:#E95345">1月节假日</h2> <p style="color:#666">元旦(3天),春节(7天)</p> </div> </div> </body> </html>
js简单日历效果代码实例,这样的场景在实际项目中还是用的比较多的,关于js简单日历效果代码实例就介绍到这了。
js简单日历效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。