js简易日历中设计的知识点:选项卡切换   数组    innerHTML  连接符

与选项卡的区别:div的个数不同

连接符中需要注意的:(优先级)

"abc"+12+3+"def"               结果:abc123def

"abc"+(12+3)+"def"            结果:abc15def

html代码:

  1. <body>
  2. <div class="contain">
  3. <ul id="tab" class="clearFix">
  4. <li>1月</li>
  5. <li>2月</li>
  6. <li>3月</li>
  7. <li>4月</li>
  8. <li>5月</li>
  9. <li>6月</li>
  10. <li>7月</li>
  11. <li>8月</li>
  12. <li>9月</li>
  13. <li>10月</li>
  14. <li>11月</li>
  15. <li>12月</li>
  16. </ul>
  17. <div id="content">
  18. <h2>1月活动</h2>
  19. <p>去滑雪啦,哈哈</p>
  20. </div>
  21. </div>
  22. </body>

css代码:

  1. <link rel="stylesheet" type="text/css" href="css/public.css"/>
  2. <style type="text/css">
  3. .contain{width: 240px;margin: 0 auto;margin-top: 100px;}
  4. #tab{width: 240px;}
  5. #tab li{float: left;width: 40px;height: 60px;line-height:60px;margin: 10px;text-align:center;background: #dbdbdb;cursor: pointer;}
  6. #tab li.active{background: #f60;color: #fff;}
  7. #content{margin: 10px;width: 200px;min-height: 100px;padding:10px;background: #999;}
  8. </style>

js代码:

  1. <script type="text/javascript">
  2. window.onload=function(){
  3. var oTab=document.getElementById("tab");
  4. var aLi=oTab.getElementsByTagName("li");
  5. var oDiv=document.getElementById("content");
  6. var arr=['去滑雪啦,哈哈','222','333','444','555','666','777','888','999','100','101','102'];
  7. for(var i=0;i<aLi.length;i++){
  8. aLi[i].index=i;
  9. aLi[i].onmouseover=function(){
  10. for(var i=0;i<aLi.length;i++){
  11. aLi[i].className="";
  12. }
  13. this.className="active";
  14. oDiv.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';
  15. }
  16. }
  17. }
  18. </script>

效果如下:

js简易日历的更多相关文章

  1. 原生js简易日历效果实现

    这里我们将用原生js实现简易的日历,原理和之前的原生js选项卡差不多,不过也有些区别: 首先html代码: <div class="container"> <di ...

  2. js基础练习二之简易日历

    今天学到了js基础教程3,昨天的课后练习还没来的及做,这个是类似简易日历的小案例,视频还没听完,今晚继续...... 先看效果图: 其实做过前面的Tab选项卡,这个就很好理解了,通过鼠标放在不同月份月 ...

  3. avalon.js实现一个简易日历

    使用MVVM框架avalon.js实现一个简易日历   最近在做公司内部的运营管理系统,因为与日历密切相关,同时无需触发条件直接显示在页面上,所以针对这样的功能场景,我就用avalon快速实现了一个简 ...

  4. 使用MVVM框架avalon.js实现一个简易日历

    最近在做公司内部的运营管理系统,因为与日历密切相关,同时无需触发条件直接显示在页面上,所以针对这样的功能场景,我就用avalon快速实现了一个简易日历,毕竟也是第一次造日历这种轮子,所以这里记录下我当 ...

  5. javascript中Date对象的应用——简易日历的实现

    × 目录 [1]效果 [2]HTML [3]CSS[4]JS 前面的话 简易日历作为javascript中Date对象的常见应用,用途较广泛.本文将详细说明简易日历的实现思路 效果演示 HTML说明 ...

  6. 原生Js_制作简易日历

    javascript制作简易日历,月份信息已经放在一个数组中,在<script>...</script>中编写代码实现其功能 实现步骤 a) 获取需要操作的dom对象 b) 在 ...

  7. [JS,Canvas]日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  8. marked.js简易手册

    marked.js简易手册 本文介绍的是marked.js.秉持"来之即用"的原则,对它进行简要的翻译和归纳, 安装 在网上引用或者是引用本地文件即可.要么就用命令行: npm i ...

  9. c语言的简易日历

    用c语言编写的简易日历,代码如下: #include <stdio.h> int main(int argc, const char * argv[]) { // insert code ...

随机推荐

  1. [转]CISP(注册信息安全专业人员)认证(12天)

    本文转自:http://www.topsec.com.cn/shpx/rzpx/pxkc/cisp/index.htm CISP(注册信息安全专业人员)认证(11天) 中国信息安全产品测评认证中心(C ...

  2. [转]KendoUI系列:Grid

    本文转自:http://www.cnblogs.com/libingql/p/3774879.html 1.基本使用 <div id="grid"></div&g ...

  3. [转]在ASP.NET开发中容易忽略的2个小问题 Cookie乱码存取异常 和 iframe弹框的login跳转

    本文转自:http://www.cnblogs.com/outtamyhead/p/3642729.html 本文地址:http://www.cnblogs.com/outtamyhead/p/364 ...

  4. Codeforces Round #286 Div.1 A Mr. Kitayuta, the Treasure Hunter --DP

    题意:0~30000有30001个地方,每个地方有一个或多个金币,第一步走到了d,步长为d,以后走的步长可以是上次步长+1,-1或不变,走到某个地方可以收集那个地方的财富,现在问走出去(>300 ...

  5. Codeforces 500B. New Year Permutation[连通性]

    B. New Year Permutation time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  6. openjudge2989糖果[DP 01背包可行性]

    openjudge2989糖果 总时间限制:  1000ms 内存限制:  65536kB 描述 由于在维护世界和平的事务中做出巨大贡献,Dzx被赠予糖果公司2010年5月23日当天无限量糖果免费优惠 ...

  7. ConcurrentHashMap是如何提高并发时的吞吐性能

    为并发吞吐性能所做的优化 ConcurrentHashMap使用了一些技巧来获取高的并发性能,同时避免了锁.这些技巧包括: 为不同的Hash bucket(所谓hash bucket即不同范围的key ...

  8. C#的一维数组和二维数组定义方式:

    一维数组: //一维数组定义与初始化 ,, };//第一种方式 , , }; //第二种方式 int[] one3; //第三种方式 one3=,,}; 二维数组: //二维数组定义与初始化 //不规 ...

  9. 在ASP.NET中如何运行后台任务

    from:https://blogs.msdn.microsoft.com/scott_hanselman/2014/12/21/asp-net/ [原文发表地址] How to run Backgr ...

  10. Web安全测试之跨站请求伪造(CSRF)篇

    跨站请求伪造(即CSRF)被Web安全界称为诸多漏洞中“沉睡的巨人”,其威胁程度由此“美誉”便可见一斑.本文将简单介绍该漏洞,并详细说明造成这种漏洞的原因所在,以及针对该漏洞的黑盒测试与灰盒子测试具体 ...