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

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

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

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

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

html代码：

<body>

        <div class="contain">

            <ul id="tab" class="clearFix">

                <li>1月</li>

                <li>2月</li>

                <li>3月</li>

                <li>4月</li>

                <li>5月</li>

                <li>6月</li>

                <li>7月</li>

                <li>8月</li>

                <li>9月</li>

                <li>10月</li>

                <li>11月</li>

                <li>12月</li>

            </ul>

            <div id="content">

                <h2>1月活动</h2>

                <p>去滑雪啦，哈哈</p>

            </div>

        </div>

    </body>

css代码：

<link rel="stylesheet" type="text/css" href="css/public.css"/>

<style type="text/css">

    .contain{width: 240px;margin: 0 auto;margin-top: 100px;}

    #tab{width: 240px;}

    #tab li{float: left;width: 40px;height: 60px;line-height:60px;margin: 10px;text-align:center;background: #dbdbdb;cursor: pointer;}

    #tab li.active{background: #f60;color: #fff;}

    #content{margin: 10px;width: 200px;min-height: 100px;padding:10px;background: #999;}

</style>

js代码：

<script type="text/javascript">

            window.onload=function(){

                var oTab=document.getElementById("tab");

                var aLi=oTab.getElementsByTagName("li");

                var oDiv=document.getElementById("content");

                var arr=['去滑雪啦，哈哈','222','333','444','555','666','777','888','999','100','101','102'];

                for(var i=0;i<aLi.length;i++){

                    aLi[i].index=i;

                    aLi[i].onmouseover=function(){

                        for(var i=0;i<aLi.length;i++){

                            aLi[i].className="";

                        }

                        this.className="active";

                        oDiv.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';

                    }

                }

            }

</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. POJ3666Making the Grade[DP 离散化 LIS相关]

    Making the Grade Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6445   Accepted: 2994 ...

  2. Oracle 行转列，列转行

    一.行转列1.1.初始测试数据表结构:TEST_TB_GRADESql代码:1    create table TEST_TB_GRADE2    (3      ID        NUMBER(1 ...

  3. CentOS 6.6 安装redmine

    Redmine是一个开源的.基于Web的项目管理和缺陷跟踪工具.它用日历和甘特图辅助项目及进度可视化显示.同时它又支持多项目管理.Redmine是一个自由开放源码软件解决方案,它提供集成的项目管理功能 ...

  4. 用django实现一个微信图灵机器人

    微信的post请求格式是xml,所以django需要做的就是将xml请求解析出来,把content发送到图灵机器人接口, 接口返回的json数据把主要内容给解析出来,然后重新封装成xml返回给微信客户 ...

  5. HTML5商城开发四 多图或多商品的水平滚动展示

    一.效果图 二.实现 样式: .horz_scroll { float: left; width: 20px; height: 130px; padding-top: 100px; padding-l ...

  6. .NET Core）的ZooKeeper异步客户端

    支持断线重连.永久watcher.递归操作并且能跨平台(.NET Core)的ZooKeeper异步客户端   阅读目录 什么是ZooKeeper? 项目介绍 提供的功能 使用说明 FAQ 在公司内部 ...

  7. Construct Binary Tree from Preorder and Inorder Traversal

    Construct Binary Tree from Preorder and Inorder Traversal Given preorder and inorder traversal of a ...

  8. codevs 3165 爱改名的小融2

    3149 爱改名的小融 2 http://codevs.cn/problem/3149/ 题目描述 Description Wikioi上有个人叫小融,他喜欢改名.现在他的要求变了,只要是英文字母就是 ...

  9. 跟我学习Storm_Storm主要特点

    Storm拥有低延迟.高性能.分布式.可扩展.容错等特性,可以保证消息不丢失,消息处理严格有序.Storm的主要特点如下所示: 简单的编程模型.类似于MapReduce降低了并行批处理复杂性,Stor ...

  10. 2015-2016-2 《Java程序设计》 学生博客及Git@OSC 链接

    2015-2016-2 <Java程序设计> 学生博客及Git@OSC 链接 博客 1451 20145101王闰开 20145102周正一 20145103冯文华 20145104张家明 ...