Html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<link rel="stylesheet"  href="日历样式.css"  type="text/css" />

<script  src="日历Js.js"  type="text/javascript"></script>

</head>

<body>

 <div id="table">

        <ul>

             <li  class="active"><h2></h2><P>JAN</P></li>

             <li><h2></h2><P>FER</P></li>

             <li><h2></h2><P>MAR</P></li>

             <li><h2></h2><P>APR</P></li>

             <li><h2></h2><P>MAY</P></li>

             <li><h2></h2><P>JUN</P></li>

             <li><h2></h2><P>JUL</P></li>

             <li><h2></h2><P>AUG</P></li>

             <li><h2></h2><P>SEP</P></li>

             <li><h2></h2><P>OCT</P></li>

             <li><h2></h2><P>NOV</P></li>

             <li><h2></h2><P>DEC</P></li>

        </ul>

             <div class="div1">

                   <h2>一月活动</h2>

                   <p>快过年了，大家商量着去哪玩啊</p>

             </div>

 </div>

</body>

</html>

css

@charset "utf-8";

/* CSS Document */

#table{

     width:300px;

     height:700px;

     background-color:#CCC;

     text-align:center;

     position:absolute;

     margin:  600px  500px;

    }

#table ul{

       line-height:10px;

    }

#table ul li{

     float:left;

     padding:20px;

     list-style-type:none;

    }

#table .div1{

     width:300px;

     height:200px;

     background:red;

      position:absolute;

     bottom:0px;

    }

#table ul h2 {

      color:#FFF;

    }

#table ul p {

      color:#FFF;

    }

.active{

      background-color:black;

    }

Js

// JavaScript Document

window.onload=function()

{

     var arr=[

           ' 一月',

           '二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月',

     ]

     var  aTal=document.getElementById('table');

     var  aLi=aTal.getElementsByTagName('li');

     var  aDiv1=aTal.getElementsByTagName('div')[];

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

     {

            aLi[i].index=i;

            aLi[i].onmouseover=function()

            {

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

                {

                    aLi[i].className="";

                    }

                 this.className="active";

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

            }

    }

js中日历的代码的更多相关文章

  1. 在js中嵌套java代码

    jsp中有时候在js中操作某些java后台传递过来的数据逻辑比较复杂,比如list内容的遍历,可以直接在页面上添加java脚本来执行内容,代码如下: //在js中插入java代码操作 <% // ...

  2. 分享一个自定义的 console 类，让你不再纠结JS中的调试代码的兼容

    问题的产生 在写JS的过程中,为了调试我们常常会写很多 console.log.console.info.console.group.console.warn.console.error代码来查看JS ...

  3. js中拼接html代码时onclick参数问题

    一.如果是int类型.可以直接传参 二.如果是字符串类型.需要加上引号 1.使用转义符号\转义引号: (\''+strings+'\') 2.使用"  .比如: ("'+strin ...

  4. js相对路径相关（比如：js中的路径依赖导入该js文件的路径）

    问题描述: 前几天调用同事的js接口文件,在他自己的html测试页面ok,在我这边调用时出现问题. debug过程中,将该测试html移到其他位置都不行,放到原html测试页面同层次路径下是OK的. ...

  5. js中的异步与同步，解决由异步引起的问题

    之前在项目中遇到过好多次因为异步引起的变量没有值,所以意识到了认识js中同步与异步机制的重要性 在单线程的js中,异步代码会被放入一个事件队列,等到所有其他代码执行后再执行,而不会阻塞线程. 下面是j ...

  6. 项目日志的管理和应用 log4js－Node.js中的日志管理模块使用与封装

    开发过程中,日志记录是必不可少的事情,尤其是生产系统中经常无法调试,因此日志就成了重要的调试信息来源. Node.js,已经有现成的开源日志模块,就是log4js,源码地址:点击打开链接 项目引用方法 ...

  7. log4js－Node.js中的日志管理模块使用与封装

    开发过程中,日志记录是不可缺少的事情.尤其是生产系统中常常无法调试,因此日志就成了重要的调试信息来源. Node.js,已经有现成的开源日志模块,就是log4js,源代码地址:点击打开链接 项目引用方 ...

  8. js中“使用”el表达式

    在说相关内容前,一定要先熟悉jsp运行原理: http://blog.csdn.net/lmsnju/article/details/4813488 http://hi.baidu.com/mingf ...

  9. 遍历js中的数组

    可以使用js中的for循环,或者forEach方法:也可以使用Ext中的方法遍历js中的数组 代码如下: /** * 遍历数组 */ var arr = ['越南', '新加坡', '美国', '俄罗 ...

随机推荐

  1. C语言 三级指针的应用

    //三级指针的使用 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #includ ...

  2. CSS 实现加载动画之七-彩环旋转

    今天整理的这个动画估计大家都不会陌生,彩环旋转,看过之后是不是觉得很熟悉,对,这个就是优酷视频APP里面的加载动画.本人空余时间喜欢看些视频,留意到这个动画后就想用代码实现出来,今天整理了下,跟大家分 ...

  3. 从0开始学Java——JSP和Servlet——jsp转servlet出错的三个典型场景

    由于jsp终究是要转换为servlet的java文件,然后再编译为.class文件,最后才执行,那么在这过程的任何一个步骤都可能有问题,主要包括三个方面,下面逐一分析: 一.JSP转换为Servlet ...

  4. java加解密操作过程中的中文乱码问题

    import javax.crypto.Cipher; import javax.crypto.KeyGenerator; import javax.crypto.SecretKey; import ...

  5. [CareerCup] 1.4 Replace Spaces 替换空格

    1.4 Write a method to replace all spaces in a string with '%20'. You may assume that the string has ...

  6. [CareerCup] 2.1 Remove Duplicates from Unsorted List 移除无序链表中的重复项

    2.1 Write code to remove duplicates from an unsorted linked list.FOLLOW UPHow would you solve this p ...

  7. IOS开发之——类似微信摇一摇的功能实现

    首先,一直以为摇一摇的功能实现好高大上,结果百度了.我自己也模仿写了一个demo.主要代码如下: 新建一个项目,名字为AnimationShake. 主要代码: - (void)motionBegan ...

  8. JPush (极光推送) For Xamarin.Android

    官方教程上讲的是 GCM (Google Cloud Messaging) , 不过 GFW 是 GCM 过不去的坎. 极光推送 JPush 是国内的一个不错的替代方案. JPush 提供的 API ...

  9. [网站公告]23:00-05:00阿里云SLB升级会造成4-8次每次10秒的闪断

    大家好,阿里云将于今天夜里(7月29日23:00-7月30日05:00)对负载均衡服务(SLB)进行升级操作,升级期间我们使用的SLB实例会有4-8次的闪断,每次闪断时间10秒左右.闪断期间会造成网站 ...

  10. 使用git提交本地代码到github

    1. 客户端选择 git在本地,有多种客户端可供选择,比如eclipse的插件EGit,还有git的官方客户端: Git  Bash, Git CMD, Git GUI等. 推荐使用官方的Git Ba ...