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. swift 判断输入的字符串是否为数字

    // 判断输入的字符串是否为数字,不含其它字符 func isPurnInt(string: String) -> Bool { let scan: Scanner = Scanner(stri ...

  2. Jdev Run Page 没有反应

    从旧电脑把原有的Jdeveloper完整的拷贝至新电脑,且已完整配置JDEV_USER_HOME,JAVA_HOME等环境变量, Run Page报以下错误. [Starting OC4J using ...

  3. JavaScript及其异步实现

    由于javascript本身是单线程模型,这里主要通过Callbacks,Listeners,Control Flow Libraries ,Promises四种方式来实现异步操作. Referenc ...

  4. GCD工作单元

    #import <UIKit/UIKit.h> @interface ViewController : UIViewController @property (weak,nonatomic ...

  5. 关于使用Css设置Canvas画布大小的问题

    问题分析 我们在调整画布大小时,希望画布中的图形保持不变,只是改变画布本身的大小.但是如果使用Css设置画布大小,则会出现问题. 问题描述 如果使用Css设置Canvas画布的大小,则导致画布按比例缩 ...

  6. CUDA编程学习（四）

    利用Block和Thread进行并行加速 _global_ void add(int *a, int *b, int *c) { int index = threadIdx.x + blockIdx. ...

  7. Xamarin.Forms 现已开启对 UWP 的支持

    Xamarin.Forms 现已升级到 2.0.0.6482 , 正式开启了对 UWP 的支持. 要创建 UWP 项目, 必须是 VS2015, WIN8.1 下也可以, 但是只有 Windows 1 ...

  8. java中的静态代码块、构造代码块、构造方法

    运行下面这段代码,观察其结果: package com.test; public class HelloB extends HelloA { public HelloB() { } { System. ...

  9. [C/C++基础] C语言常用函数strlen的使用方法

    函数声明:extern unsigned int strlen(char *s); 所属函数库:<string.h> 功能:返回s所指的字符串的长度,其中字符串必须以’\0’结尾 参数:s ...

  10. grootJs的属性绑定指令

    index6.html 绑定文本text gt-text="{属性名}" 绑定标签属性attr gt-attr="vm属性名称(标签属性,value表达式)" ...