js簡單日曆效果程式碼例項
分享一段程式碼例項,它實現了簡單的日曆效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <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>
相關文章
- JavaScript簡單的日曆效果程式碼例項JavaScript
- JavaScript日曆效果程式碼例項JavaScript
- js簡單摺紙效果程式碼例項JS
- JavaScript 動畫效果簡單例項程式碼JavaScript動畫單例
- js簡單富文字編輯器效果程式碼例項JS
- 淡入淡出效果簡單程式碼例項
- js選項卡簡單程式碼例項JS
- js map集合簡單程式碼例項JS
- JSON簡單格式程式碼例項JSON
- js簡單的留言功能程式碼例項JS
- html實現簡單ListViews效果的例項程式碼HTMLView
- javascript實現的動畫效果簡單例項程式碼JavaScript動畫單例
- js重力球效果程式碼例項JS
- js煙花效果程式碼例項JS
- js鐘錶效果程式碼例項JS
- js秒錶效果程式碼例項JS
- javascript實現的簡單驗證碼效果程式碼例項JavaScript
- js prototype原型應用簡單例項程式碼JS原型單例
- js解析xml檔案簡單程式碼例項JSXML
- PHP實現的簡單日曆程式碼PHP
- canvas實現的簡單畫板效果程式碼例項Canvas
- Angularjs製作簡單的路由功能簡單程式碼例項AngularJS路由
- js淡入淡出效果例項程式碼JS
- 表單提示美化效果程式碼例項
- node.js [superAgent]請求簡單程式碼例項Node.js
- js不重複抽獎效果程式碼例項JS
- js元素上下移動效果程式碼例項JS
- js table隔行變色效果程式碼例項JS
- js小球拋物線效果程式碼例項JS
- js圖片碎片化效果程式碼例項JS
- js元素的震動效果程式碼例項JS
- js左右滑動選項卡效果程式碼例項JS
- js實現的字串簡單編碼和解碼程式碼例項JS字串
- js微信視窗關閉事件簡單程式碼例項JS事件
- js自定義回撥函式簡單程式碼例項JS函式
- js簡單時間日期格式化程式碼例項JS
- js實現的垂直選項卡效果程式碼例項JS
- js圖片淡入淡出效果程式碼例項JS