首页 > 代码库 > 简单的日历
简单的日历
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>JavaScript简易日历</title> 6 <style> 7 * { padding: 0; margin: 0; } 8 li { list-style: none; } 9 body { background: #f6f9fc; font-family: arial; }10 .calendar { width: 210px; margin: 50px auto 0; padding: 10px 10px 20px 20px; background: #eae9e9; }11 .calendar ul { width: 210px; overflow: hidden; padding-bottom: 10px; }12 .calendar li { float: left; width: 58px; height: 54px; margin: 10px 10px 0 0; border: 1px solid #fff; background: #424242; color: #fff; text-align: center; cursor: pointer; }13 .calendar li h2 { font-size: 20px; padding-top: 5px; }14 .calendar li p { font-size: 14px; }15 .calendar .active { border: 1px solid #424242; background: #fff; color: #e84a7e; }16 .calendar .active p { font-weight: bold;}17 .calendar .text { width: 178px; padding: 0 10px 10px; border: 1px solid #fff; padding-top: 10px; background: #f1f1f1; color: #555; }18 .calendar .text h2 {font-size: 14px; margin-bottom: 10px; }19 .calendar .text p { font-size: 14px; line-height: 18px; }20 </style>21 </head>22 23 <body>24 <div id="tab" class="calendar">25 <ul>26 <li class="active"><h2>1</h2><p>JAN</p></li>27 <li><h2>2</h2><p>FER</p></li>28 <li><h2>3</h2><p>MAR</p></li>29 <li><h2>4</h2><p>APR</p></li>30 <li><h2>5</h2><p>MAY</p></li>31 <li><h2>6</h2><p>JUN</p></li>32 <li><h2>7</h2><p>JUL</p></li>33 <li><h2>8</h2><p>AUG</p></li>34 <li><h2>9</h2><p>SEP</p></li>35 <li><h2>10</h2><p>OCT</p></li>36 <li><h2>11</h2><p>NOV</p></li>37 <li><h2>12</h2><p>DEC</p></li>38 </ul>39 <div class="text">40 <h2>1月活动</h2>41 <p>春游踏青活动</p>42 </div>43 </div>44 </body>45 <script>46 var arr=[‘春游踏青活动‘,‘野外露营活动‘,‘西藏自驾游‘,‘海南三亚洗白白‘,‘泰国看人妖‘,‘韩国整容‘,‘非洲阳光浴‘,‘登钓鱼岛钓鱼‘,‘帝都体验雾霾‘,‘长城体验人挤人‘,‘陪你去东北看雪‘,‘生蛋生蛋快乐‘];47 var oTab=document.getElementById("tab");48 var aLi=oTab.getElementsByTagName("li");49 var oDiv=oTab.getElementsByTagName("div")[0];50 for (var i=0; i<aLi.length; i++){51 aLi[i].onmouseover=function (){52 for (var i=0; i<aLi.length; i++){53 if (this==aLi[i]){54 aLi[i].className="active";55 oDiv.innerHTML=‘<h2>‘+(i+1)+‘月活动</h2><p>‘+arr[i]+‘</p>‘;56 }else{57 aLi[i].className="";58 59 }60 }61 }62 }63 64 </script>65 </html>
简单的日历
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。