JavaScript - 简易年历 -
2017-12-13 08:24
176 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style media="screen"> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td { margin:0; padding:0; } ol,ul { list-style:none; } a { text-decoration: none; } .wrap { width: 480px; overflow: hidden; padding: 40px 30px 0px 30px; box-sizing: border-box; background-color: #eae9e9; margin: 0 auto; } .wrap li { float: left; width: 120px; height: 110px; margin: 0px 10px 20px 10px; border: 2px solid #fff; box-sizing: border-box; font-size: 25px; color: #fff; background-color: #424242; text-align: center; } .wrap li.active { border: 2px solid #424242; background-color: #fff; color: #e64d7e; } .wrap .text { width: 400px; overflow: hidden; margin: 0 auto; padding: 20px; margin-bottom: 40px; border: 2px solid #fff; box-sizing: border-box; background-color: #f1f1f1; } </style> </head> <body> <div class="wrap" id="wrap"> <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 class="text" id="text"> <h2>1月活动</h2> <p>快过年了,大家可以商量着去哪玩吧~</p> </div> </div> <script type="text/javascript"> var arr = [ "快过年了,大家可以商量着去哪玩吧~", "精通JavaScript开发课程 - 结课标准 - 有十条标准可让大家修练成JS高手……", "妙味茶馆(bbs.miaov.com),正式开张,它看起来是论坛,其实是个技术驿站,分成了五个版块:视频教程、妙味生活秀、特效兜儿、技术交流、妙味聊吧", "精通各种DOM类应用,熟练掌握面向对象编程思想(OOP)、熟悉JS面向对象开发方式 - 妙味课堂 - www.miaov.com", "熟练掌握AJAX技术及相关应用(例如:新浪微博级应用) - 妙味课堂 - www.miaov.com", "可以独立写出类似jQuery的小型库(支持各类选择符、事件类、DOM、自定义动画animate、AJAX……) - 妙味课堂 - www.miaov.com", "精通JS运动特效技术,能完整实现各类网站所有动画特效,如 妙味课堂 官网 - 妙味课堂 - www.miaov.com", "掌握JS调试及优化技术、能兼容所有浏览器 - 妙味课堂 - www.miaov.com", "精通JS事件对象及事件的工作机制,并能完成各类跨平台应用模块的开发 - 妙味课堂 - www.miaov.com", "能独立开发表现和性能都很优秀的RIA应用 - 妙味课堂 - www.miaov.com", "了解后台编程的相关知识,能够和后台工程师配合完成大型交互应用 - 妙味课堂 - www.miaov.com", "熟悉正则表达式的编写、应用及高级表单验证技术 - 妙味课堂 - www.miaov.com" ] window.onload = function () { var oWrap = document.getElementById('wrap'); var aLi = document.getElementsByTagName('li'); var oText = document.getElementById('text'); for (var i = 0; i < aLi.length; i++) { aLi[i].index = i; aLi[i].onmouseover = function () { for (var i = 0; i < aLi.length; i++) { aLi[i].className = ''; } this.className = 'active'; oText.innerHTML = '<h2>' + (this.index + 1) + '月活动</h2><p>' + arr[this.index] + '</p>'; } } } </script> </body> </html>
相关文章推荐
- 简易 Javascript 调试包 Debug包
- 简易而又灵活的Javascript拖拽框架(一)
- Javascript项目实战小案例2——简易日历
- 用javaScript制作一个简易的课程表
- JavaScript编写一个简易购物车功能
- html5+javascript制作简易画板附图
- html+css+javascript实现简易轮播图片
- 简易而又灵活的Javascript拖拽框架(五)
- 简易的JavaScript图片分割代码
- Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
- 简易而又灵活的Javascript拖拽框架(二)
- T-SQL 生成一个简易的 公历年历 T-SQL 含日期所在月及
- 原生javascript 简易实现放大镜效果
- 简易javascript框架
- JavaScript实现简易日历效果
- Ajax PHP JavaScript MySQL实现简易的无刷新在线聊天室
- Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
- javascript简易动画类(div渐变)
- 日期控件-1.javascript实现简易日历
- javascript实现的简易的DatePicker日历