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. Navi.Soft20.WinCE使用手册

    1.概述 1.1应用场景 随着物联网的普及,越来越多的制造商对货品从原料配备,加工生产,销售出库等环节的要求和把控越来越高.在此情况之下,传统的ERP软件已经无法满足现有的流程. 移动设备的应用,在很 ...

  2. C语言 文件操作7--文件错误处理

    //文件错误处理 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #include&l ...

  3. linux实践——内核编程 基础模块

    一.内核模块的概念 Linux模块(module)是一些可以作为独立程序来编译的函数和数据类型的集合.内核模块给我们带来的便利是模块本身并不被编译进内核文件,可在内核运行期间动态的安装或卸载.因为如果 ...

  4. php中的错误级别

    在php编程过程中,大家一定会遇到或多或少的错误提醒,也正是这些错误提示,指引我们编写更加干净的代码,今天先写出我们主要列出的错误类型,先挖坑,写关于php错误与异常的相关知识,慢慢填坑.    De ...

  5. 怎样写 OpenStack Neutron 的 Extension （二）

    接着之前一篇文章,再来谈谈 Extension 的具体实现问题.我使用的是本地数据库加远程API调用的方法,所以先要定义一下数据库中 myextension 如何存储.首先,我们可以在自己的 plug ...

  6. SSRS用自定义对象绑定报表

    有一个报表的数据源是一个对象的List, 这个对象List中还有层级,其中还有其他的对象List,这样的层级有三层.其数据是从数据库中取出来的.其LINQ的操作太多了而且复杂,所以不太可 能从LINQ ...

  7. jsonp的后台怎么返回去数据

  8. 第十六章：脚本化HTTP

    写在本章内容前: 第十五章:事件处理 涉及到到较多的文字篇幅,介于个人精力问题,暂不更新.主要包含的内容有事件类型.注册事件处理程序.事件处理程序的调用.文档加载事件.鼠标事件.鼠标滚轮事件.拖放事件 ...

  9. 2016 版 Laravel 系列入门教程（四）【最适合中国人的 Laravel 教程】

    本教程示例代码见: https://github.com/johnlui/Learn-Laravel-5 在任何地方卡住,最快的办法就是去看示例代码. 本篇文章中,我将跟大家一起实现 Article ...

  10. 每天一个linux命令（13）：tail 命令

    tail 命令从指定点开始将文件写到标准输出.使用tail命令的-f选项可以方便的查阅正在改变的日志文件,tail -f filename会把filename里最尾部的内容显示在屏幕上,并且不但刷新, ...