<!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. MVC3+EF4.1学习系列(八)-----利用Repository and Unit of Work重构项目

    项目最基础的东西已经结束了,但是现在我们的项目还不健全  不利于测试 重复性代码多   层与层之间耦合性高  不利于扩展等问题.今天的这章 主要就是解决这些问题的.再解决这些问题时,自己也产生了很多疑 ...

  2. CevaEclipse - 编译器attribute扩展

    1.函数与变量的 Section Attribute void foobar (void) __attribute__ ((section (".CSECT mmm"))); vo ...

  3. c题 Registration system

    Description A new e-mail service "Berlandesk" is going to be opened in Berland in the near ...

  4. CentOS安装配置Tomcat7

    1.下载apache-tomcat-7.0.62.tar.gz 2.解压:tar -zxvf apache-tomcat-7.0.62.tar.gz 3.配置环境变量: 进入安装目录:(/usr/lo ...

  5. IOS 第三方库之-MBProgressHUD的使用详解

    转自作者: weidfyr  http://www.aiuxian.com/article/p-3121607.html 1,MBProgressHUD常用属性和用法Demo - (void)test ...

  6. iOS开发 自定义UIAlertController的样式

    引言: 关于提示框, 系统自带的提示框有时可能满足不了我们的需求, 比如一个提示框的取消按钮我需要灰色字体显示, 这时候就需要自定义提示框的样式了. 示例图 苹果自iOS8开始,就已经废弃了之前用于界 ...

  7. java 文件的基本操作

    1 /** * java 文件操作 * 2016/5/10 **/ package cn.Java_7; import java.io.*; import java.util.Scanner; imp ...

  8. 转载 deep learning：八（SparseCoding稀疏编码）

    转载 http://blog.sina.com.cn/s/blog_4a1853330102v0mr.html Sparse coding: 本节将简单介绍下sparse coding(稀疏编码),因 ...

  9. python 字符转换

    我们所看到的“明文字符串”,都是经过编码(比如ASCII.Uncoded.UTF-8.GB-2312等)后呈现在我们面前的. 文本中“3082”想要“所见到所得”到内存中处理,必须decode('he ...

  10. android通过代码判断手机是否root

    只要/system/bin/su./system/xbin/su这两个文件中有一个存在,就表明已经具有ROOT权限,如果两个都不存在,则不具有ROOT权限. // 判断是否具有ROOT权限 publi ...