简易万年历
简易万年历这个案例是比较有意义的，虽然是个小demo，但涵盖的知识是一点也不少啊！需要静下心来好好理解，完全理解下来，就会觉得也没那么难，理解了这个demo，后续很多东西都知道怎么写了。好啦，先上HTMl部分的代码。
1 <body> 2 <div id="tab" class="calendar"> 3 <ul id="box"> 4 <li class="active"> 5 <h2>1</h2> 6 <p>JAN</p> 7 </li> 8 <li> 9 <h2>2</h2> 10 <p>FER</p> 11 </li> 12 <li> 13 <h2>3</h2> 14 <p>MAR</p> 15 </li> 16 <li> 17 <h2>4</h2> 18 <p>APR</p> 19 </li> 20 <li> 21 <h2>5</h2> 22 <p>MAY</p> 23 </li> 24 <li> 25 <h2>6</h2> 26 <p>JUN</p> 27 </li> 28 <li> 29 <h2>7</h2> 30 <p>JUL</p> 31 </li> 32 <li> 33 <h2>8</h2> 34 <p>AUG</p> 35 </li> 36 <li> 37 <h2>9</h2> 38 <p>SEP</p> 39 </li> 40 <li> 41 <h2>10</h2> 42 <p>OCT</p> 43 </li> 44 <li> 45 <h2>11</h2> 46 <p>NOV</p> 47 </li> 48 <li> 49 <h2>12</h2> 50 <p>DEC</p> 51 </li> 52 </ul> 53 <div class="text" id="txt"> 54 <h2>1月活动</h2> 55 <p>快过年了，大家可以商量着去哪玩吧～</p> 56 </div> 57 </div> 58 </body>
样式可以自己更改哈！
1 <style> 2 * { 3 padding: 0; 4 margin: 0; 5 } 6 7 li { 8 list-style: none; 9 } 10 11 body { 12 background: #f6f9fc; 13 font-family: arial; 14 } 15 16 .calendar { 17 width: 210px; 18 margin: 0 auto; 19 padding: 10px 10px 20px 20px; 20 background: #eae9e9; 21 } 22 23 .calendar ul { 24 width: 210px; 25 overflow: hidden; 26 padding-bottom: 10px; 27 } 28 29 .calendar li { 30 float: left; 31 width: 58px; 32 height: 54px; 33 margin: 10px 10px 0 0; 34 border: 1px solid #fff; 35 background: #424242; 36 color: #fff; 37 text-align: center; 38 cursor: pointer; 39 } 40 41 .calendar li h2 { 42 font-size: 20px; 43 padding-top: 5px; 44 } 45 46 .calendar li p { 47 font-size: 14px; 48 } 49 50 .calendar .active { 51 border: 1px solid #424242; 52 background: #fff; 53 color: #e84a7e; 54 } 55 56 .calendar .active p { 57 font-weight: bold; 58 } 59 60 .calendar .text { 61 width: 178px; 62 padding: 0 10px 10px; 63 border: 1px solid #fff; 64 padding-top: 10px; 65 background: #f1f1f1; 66 color: #555; 67 } 68 69 .calendar .text h2 { 70 font-size: 14px; 71 margin-bottom: 10px; 72 } 73 74 .calendar .text p { 75 font-size: 12px; 76 line-height: 18px; 77 } 78 </style>
下面是javascript的代码，会加上注释，以防小白白看不懂哈！
1 <script> 2 // 模拟后端数据 3 var arr = ['快过年了，大家可以商量着去哪玩吧～', 4 '大家好好学习吧222222~~~', 5 '大家好好学习吧222222333~~~', 6 '大家好好学习吧222444222~~~', 7 '大家好好学习555吧222222~~~', 8 '大家好好学习吧666222222~~~', 9 '大家好好学习吧227772222~~~', 10 '大家好好学习吧28888822222~~~', 11 '大家好好学习吧99999222222~~~', 12 '大家好好学习10000000吧222222~~~', 13 '大家好好学习吧111111222222~~~', 14 '大家好好学习吧22222200000000000~~~']; 15 // 获取所有的li 16 var array = document.querySelectorAll("#tab ul li"); 17 // 获取h2和p标签 18 var h2 = document.querySelector("#txt h2"); 19 var p = document.querySelector("#txt p"); 20 // 遍历数组，所有li绑定点击事件 21 for (var i = 0; i < array.length; i++) { 22 // 定义一个不可见的健（属性），将i的存放好，【提前给每个li都编号（默认没有编号）】 23 array[i].num = i; 24 // 点击事件 25 array[i].onclick = function () { 26 // 遍历数组，因为外面的i在这里是获取不到的，所以要重新遍历 27 for (var j = 0; j < array.length; j++) { 28 // 将所有li的类名都更改为空，即不存在样式 29 array[j].className = ""; 30 } 31 // 被点击的那个对象的类名更改为active 32 this.className="active"; 33 // 同时更改h2和p标签里面的内容 34 h2.innerHTML=this.num+1+"月活动"; 35 p.innerHTML=arr[this.num]; 36 } 37 } 38 </script>
理解下来，还是可以的；第一个难点是给所有li绑定事件的时候，循环是立即执行的，所以事件里面并不能直观的知道点击的是哪个，所以只能通过this关键字来获取；第二个难点是事实上用this我们同样不能知道是那个li，那样怎么更改所对应的信息呢，给编号，在事件发生前，循环内，给li一个不可见的属性（自己定义），存储每个li所对应的的下标。如果还是不能理解，评论留言！
版权声明：本文为ruo-shui-yi-fang原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。