<!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title></title>

 <style type="text/css">

 * { padding: 0; margin: 0; }

 li { list-style: none; }

 body { background: #f6f9fc; font-family: arial; }

 .calendar { width: 210px; margin: 0 auto; padding: 10px 10px 20px 20px; background: #eae9e9; }

 .calendar ul { width: 210px; overflow: hidden; padding-bottom: 10px; }

 .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; }

 .calendar li h2 { font-size: 20px; padding-top: 5px; }

 .calendar li p { font-size: 14px; }

 .calendar .active { border: 1px solid #424242; background: #fff; color: #e84a7e; }

 .calendar .active p { font-weight: bold; }

 .calendar .text { width: 178px; padding: 0 10px 10px; border: 1px solid #fff; padding-top: 10px; background: #f1f1f1; color: #555; }

 .calendar .text h2 {font-size: 14px; margin-bottom: 10px; }

 .calendar .text p { font-size: 12px; line-height: 18px; }

 </style>

 <script type="text/javascript">

 arr=['1快过年了，大家可以商量着去哪玩吧～','2大家好好学习吧222222~~~','3大家好好学习吧222222333~~~','4大家好好学习吧222444222~~~','5大家好好学习555吧222222~~~','6大家好好学习吧666222222~~~','7大家好好学习吧227772222~~~','8大家好好学习吧28888822222~~~','9大家好好学习吧99999222222~~~','10大家好好学习10000000吧222222~~~','11大家好好学习吧111111222222~~~','12大家好好学习吧22222200000000000~~~']

 var aDay, oTxt;

 window.onload=function(){

     aDay=document.getElementById('ul').getElementsByTagName('li');

     oTxt=document.getElementById('txt');

     for(var i=0; i<aDay.length; i++){

         aDay[i].index=i;

         aDay[i].onclick=function(){

             for(var j=0; j<aDay.length; j++){

                 aDay[j].className='';

             }

             this.className='active';

             oTxt.innerHTML='<h2>'+(this.index+1)+'月份</h2><p>'+arr[this.index]+'</p>';

         }

     }

 }

 </script>

 </head>

 <body>

 <div id="tab" class="calendar">

     <ul id="ul">

         <li class="active"><h2>1</h2><p>JAN</p></li>

         <li><h2>2</h2><p>FER</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="txt">

         <h2>1月活动</h2>

         <p>1快过年了，大家可以商量着去哪玩吧～</p>

     </div>

 </div>

 </body>

 </html>

简单日历，纯js的更多相关文章

  1. 简单的纯js三级联动

    参考这个  日尼禾尔  二级联动 写了三级联动 <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  2. vue日历(纯 js,没用任何插件和组件)

    效果图: 代码:   <template> <div class="calender"> <div class="top"> ...

  3. 纯js轮播图练习-1

    偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...

  4. js编写当天简单日历

    之前一直很想用javascript写一个日历,但是因为完全没有好的思路, 所以迟迟没有尝试.最近在网上刚好看到用javascript编写的简单日历的例子,代码量虽然不大, 但是我觉得很好地阐述了js日 ...

  5. js超简单日历

    用原生js写了一个超级简单的日历.当做是练习js中的Date类型. 思路: 获取某个日期,根据年份计算出每个月的天数. 利用Date中的getDay()知道该月份的第一天为星期几. 循环创建表格,显示 ...

  6. JS写一个简单日历

    JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  7. 纯JS实现俄罗斯方块，打造属于你的游戏帝国

    纯JS俄罗斯方块,打造属于你的游戏帝国. 本文原始作者博客 http://www.cnblogs.com/toutou 俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏 ...

  8. F2工作流引擎之-纯JS Web在线可拖拽的流程设计器（八）

          Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员 ...

  9. [分享黑科技]纯js突破localstorage存储上线，远程抓取图片，并转码base64保存本地，最终实现整个网站所有静态资源离线到用户手机效果却不依赖浏览器的缓存机制，单页应用最新黑科技

    好久没有写博客了,想到2年前答应要放出源代码的也没放出来,最近终于有空先把纯js实现无限空间大小的本地存储的功能开源了,项目地址https://github.com/xueduany/localsto ...

  10. 纯js实现复制到剪贴板功能

    在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了,甚至被屏蔽.本文介绍的一款JS插件,实现了纯J ...

随机推荐

  1. 防暴力破解 Fail2Ban之python

    fai2ban的介绍 fail2ban可以监视你的系统日志,然后匹配日志的错误信息(正则式匹配)执行相应的屏蔽动作(一般情况下是调用防火墙屏蔽),如:当有人在试探你的SSH.SMTP.FTP密码,只要 ...

  2. spring memcache 缓存

    application-cache.xml的配置 在web.xml中引入了这个配置文件 <context-param> <param-name>contextConfigLoc ...

  3. for、while循环的洪荒之力

    在python里,如果说print语句是用得最多的话,那么,要我说,除了for语句,谁都不敢认老二. 下面,让我们来看看for语句能搞出什么花样 1. 计时(无限次数) 说到计时,我们先来试下显示当前 ...

  4. C - 哗啦啦村的扩建

    C - 哗啦啦村的扩建 Time Limit: 2000/1000MS (Java/Others)    Memory Limit: 512000/256000KB (Java/Others) Sub ...

  5. Python 学习笔记9

    梦想和我只有一层纸的距离. 接着看Python类:http://www.pythondoc.com/pythontutorial3/classes.html

  6. 基于 twemproxy 搭建 redis 集群

    概述 由于单台redis服务器的内存管理能力有限,使用过大内存redis服务器的性能急剧下降,且服务器发生故障将直接影响大面积业务.为了获取更好的缓存性能及扩展型,我们将需要搭建redis集群来满足需 ...

  7. 注册表被篡改，请重新安装应用程序 acdphotoEdit

    破解之后,运行程序,提示“注册表被篡改,请重新安装应用程序”,反复重装,重启,都不行,删除注册表,重新安装后运行一次ACDSee,绿化,也不行,最后发现设置属性以管理员权限运行,ok,解决了

  8. 移动端日历控件 mobiscroll 的简单使用、参数设置

    mobiscroll 在性能方面比较好,可选用多种效果,滑动效果也比较顺畅.   提供样式文件和js文件,直接点击下载,该版本是 mobiscroll 2.13的 官方地址 :https://docs ...

  9. C++中的向上类型转换和向下类型转换

    在c++的世界中有这样两个概念,向上类型转换,向下类型转换,分别描述的是子类向基类,和基类向子类的强制类型转换. 向上强制类型转换 切割:覆盖方法和子类数据丢失的现象生成切割(slice) class ...

  10. CSS 各类 块级元素 行级元素 水平 垂直 居中问题

    元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 行级元素 一块级元素 1 水平居中: ( ...