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. high三个晚上这样好么-JSON&PHP

    hi 昨晚上吃火锅去了,对,你没猜错,我就是在成都 今晚有师兄请客,明天有基友请吃火锅,本来该忙忙哒的这一周要连续high三个晚上么(单身研究生狗就是这么容易满足).所以只好不务正业写写写了(写不动了 ...

  2. 时光煮雨 Unity3D实现2D人物移动-总结篇

    系列目录 [Unity3D基础]让物体动起来①--基于UGUI的鼠标点击移动 [Unity3D基础]让物体动起来②--UGUI鼠标点击逐帧移动 时光煮雨 Unity3D让物体动起来③—UGUI DoT ...

  3. NOIP 2008提高组第三题题解by rLq

    啊啊啊啊啊啊今天已经星期三了吗 那么,来一波题解吧 本题地址http://www.luogu.org/problem/show?pid=1006 传纸条 题目描述 小渊和小轩是好朋友也是同班同学,他们 ...

  4. java utf-8文件处理bom头

    UTF? UTF,是UnicodeTransformationFormat的缩写,意为Unicode转换格式. 即怎样将Unicode定义的数字转换成程序数据.utf是对Unicode的一种编码格式化 ...

  5. Flappy Bird （Java实现）

    运行效果: 代码: package bird; import java.awt.Graphics; import java.awt.Image; import java.awt.Toolkit; im ...

  6. 拓扑排序 POJ2367Genealogical tree[topo-sort]

    ---恢复内容开始--- Genealogical tree Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4875   A ...

  7. SpringMVC讲解

    2．1.Spring Web MVC是什么 Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职 ...

  8. c#匿名类,匿名对象

    何谓匿名类,其实本质和普通定义的类一样,只不过是由系统的编译器来完成的,首先举个例子. 一般情况 //声明一个类,包含贴别多的字段 public class Person() { public str ...

  9. O(1) 查询gcd

    我们来安利一个黑科技.(其实是Claris安利来的 比如我现在有一坨询问,每次询问两个不超过n的数的gcd. n大概1kw,询问大概300w(怎么输入就不是我的事了,大不了交互库 http://mim ...

  10. Oracle 11g XE release2安装与指导

    今天上午我安装了Oracle 11g企业版,发现太占内存了,考虑到MS SQL有express版本,所以寻思着尝试尝试Oracle 11g的express版本,就是EX版本.下面是具体的安装步骤. 1 ...