<!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. linux上发布网站遇到的问题

    在linux上部署mono之后,就自己使用vs写了个简单的网站上传到linux下的apache目录下的htdocs下,就使用主机的浏览器访问地址,但是很残酷的报错了!百思不得其解.搞了半天才想到是因为 ...

  2. 小心DLL链接静态库时的内存错误

    本文转自http://www.bennychen.cn/2010/09/%E5%B0%8F%E5%BF%83dll%E9%93%BE%E6%8E%A5%E9%9D%99%E6%80%81%E5%BA% ...

  3. chapter 13_1 算术类的元方法

    假设用table来表示集合,用function去计算集合的交集.并集. 为了保持名称空间的整齐,将这些函数存入一个名为Set的table中. 现在,假设用“+”来计算两个集合的并集,那么就要让所有用于 ...

  4. maven入门（上）

    Apache Maven 入门篇 ( 上 ) 作者:George Ma 写这个 maven 的入门篇是因为之前在一个开发者会的动手实验中发现挺多人对于 maven 不是那么了解,所以就有了这个想法.这 ...

  5. 2015 ACM/ICPC Asia Regional Shanghai Online

    1001 Puzzled Elena 1002 Antonidas 1003 Typewriter 1004 Count the Grid 1005 Code Formatting 1006 Ther ...

  6. 34．编写2个接口：InterfaceA和InterfaceB；在接口InterfaceA中有个方法void printCapitalLetter()；在接口InterfaceB中有个方法void printLowercaseLetter()；然 后写一个类Print实现接口InterfaceA和InterfaceB，要求printCapitalLetter()方法 实现输出大写英文字母表的功能，

    //接口InterfaceA package jieKou; public interface IInterfaceA { void printCapitalLetter(); } //接口Inter ...

  7. 怎么取消ie浏览器body与html的间隙

    在css文件第一行定义全局样式,可以消除html标签默认间隙*{margin:0;padding:0;}

  8. [WPF] 浏览百度地图并获取经纬度地址信息

    项目中需要利用登记的区域和地址在百度地图上定位,并获取该地址的经纬度. 本次功能对我来说主要难点如下:1.百度地图API的基本使用方法,请首选使用百度地图的JavaScript大众版(PS:之前使用W ...

  9. VBS基础篇 - VBScript过程

    VBS基础篇 - VBScript过程   在 VBScript 中,过程被分为两类:Sub 过程和 Function 过程. Sub过程 Sub 过程是包含在 Sub 和 End Sub 语句之间的 ...

  10. HttpWatch工具简介及使用技巧（转载）

    一 概述: HttpWatch强大的网页数据分析工具.集成在Internet Explorer工具栏.包括网页摘要.Cookies管理.缓存管理.消息头发送/接受.字符查询.POST 数据和目录管理功 ...