<!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. digitalocean教程：你应该知道的10件事

    DigitalOcean VPS性价比高,全球拥有多处机房,无须备案,非常适合守规矩的中国用户使用.digitalocean优惠码.digitalocean速度.digitalocean评测是网友关心 ...

  2. sqlite 学习

    到谷歌上搜sqlite,第一项便是官方网站:www.sqlite.org.进去后,先了解一下大体,感觉还不错. 进入Document页面,大标题SQLite Programming Interface ...

  3. poj2140（奇因数的个数）

    #include<stdio.h>int main(){ int n,s=0; scanf("%d",&n); for(int i=1;i<=n;i++) ...

  4. 修改textField的placeholder的字体和颜色

    textField.placeholder = @"username is in here!"; [textField setValue:[UIColor redColor] fo ...

  5. python3 随机数

    random库 random.random()返回n,则 0 <= n < 1的小数. random.uniform(a,b)    返回n ,则 a <= n <= b的浮点 ...

  6. 杭电15题 The Cow Lexicon

    Problem Description Few know that the cows have their own dictionary with W (1 ≤ W ≤ 600) words, eac ...

  7. 表单属性问题readonly、disabled、checked，prop的使用

    获取在匹配的元素集中的第一个元素的属性值. 随着一些内置属性的DOM元素或window对象,如果试图将删除该属性,浏览器可能会产生错误.jQuery第一次分配undefined值的属性,而忽略了浏览器 ...

  8. JavaScript（6）——事件1.0

    ---恢复内容开始--- 事件 好不容易回到正轨,好好学习,天天向上.今天写的是事件,感觉内容蛮多的,所以分了两篇写,主要写了事件流.事件处理程序.事件对象.恩,明天还会再有一篇,哈哈哈.我努力的!我 ...

  9. FTP、TFTP

      FTP 文件传送协议  (File Transfer Protocol) FTP是因特网上使用得最广泛的文件传送协议. 文件传送协议 FTP (File Transfer Protocol) 是因 ...

  10. js解析php返回的json数据无法获取length的问题分析

    1.问题出现的过程,js解析php json_encode 的数据,无法获取长度信息,提示undefined   debug:       首先打印查看了php encode后的数据,返现最外层是一个 ...