<!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. amazeui tab 监听当前选项

    $('#contenttab').find('a').on('opened.tabs.amui', function(e) { if(e.target.pathname.indexOf("[ ...

  2. spring memcache 缓存

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

  3. CURL访问url显示响应时间

    curl -o /dev/null -s -w %{time_connect}:%{time_starttransfer}:%{time_total} http://www.baidu.com 时间指 ...

  4. 小菜鸟安装CocoaPods

    刚来到公司,以前没有用过CocoaPods. 参考的以下两篇文章,都是转载的. 第一篇比较偏技术性,叫做<Mac下CocoaPods安装步骤> http://blog.csdn.net/a ...

  5. 基于 twemproxy 搭建 redis 集群

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

  6. 【实验室笔记】C#上位机学习笔记

    用C#编写上位机,基本流程是[1]串口配置,[2]串口发送数据,[3]串口接收数据. [1]串口配置 串口的属性配置包括: No.1串口端口号 No.2串口波特率 No.3串口数据位 No.4串口停止 ...

  7. NSData与UIImage互相转换

    1.//NSData转换为UIImage NSData *imageData = [NSData dataWithContentsOfFile: imagePath]; UIImage *image ...

  8. Centos6.6升级python版本

    centos原生python为2.6.6,可以通过下面的命令查看 #python -V Python 注:在安装新版本前,请先安装zlib\openssl组件,如果你确认你用不到这个,也可以不装 需要 ...

  9. 《剑指Offer》算法题——二维数组查找

    题目:在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. class Solutio ...

  10. IoC容器Autofac正篇之解析获取(六)

    解析获取的方式有如下几种: Resolve class Program { static void Main(string[] args) { var builder = new ContainerB ...