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. Go Walk教程 － 流程控制（ switch）

    Go的 switch 非常灵活,表达式不必是常量或整数,执行的过程从上至下,直到找到匹配项,不要break: var score ＝98 var result string switch score/ ...

  2. Table AdvanceTable针对表内行禁用multipleSelection , singleSelection

    OATableBean table = (OATableBean)webBean.findChildRecursive("LineTable"); table.setInserta ...

  3. mvc4中的 webapi 的使用方式

    目录 一:简单介绍什么是Web api 二:怎么定义的 Post Get Put 和 Delete 三:简单使用,直接从前台传递一个类到后台接收 四:其他获取值的方式 一:简单介绍什么是Web api ...

  4. 设计模式——1.概述&UML类图和时序图

    声明:本博客设计模式相关文章均整理和修改自网络,原文地址:图说设计模式 学习设计模式的3个层次—— 1.熟悉所有设计模式: 2.能够用代码实现: 3.运用到工作的项目中. 设计模式指导软件开发,学习设 ...

  5. ios 解析html

    xml,json都有大量的库来解析,我们如何解析html呢? TFHpple是一个小型的封装,可以用来解析html,它是对libxml的封装,语法是xpath.今天我看到一个直接用libxml来解析h ...

  6. 你所不知道的Python奇技淫巧

    有时候你会看到很Cool的Python代码,你惊讶于它的简洁,它的优雅,你不由自主地赞叹:竟然还能这样写.其实,这些优雅的代码都要归功于Python的特性,只要你能掌握这些Pythonic的技巧,你一 ...

  7. 『片段』C# DateTime 时间相减 和 时区的关系

    本文只是基础代码片段,直接先写 结论: C# DateTime 时间相减 —— 和 时区无关,只和时间值有关. 运行结果: 测试代码: using System; using System.Colle ...

  8. So... what's up?

    So... testing markdown editor what to learn in May? html5 canvas api codeigniter framework var test ...

  9. C#爬页面总结

    错误的思路是这样的:发送一个访问页面的请求过去,得到一个html页面,然后我要的数据全都在这上面.后来发现不是这样的,也猜到可能是页面加载之后还有js代码的ajax的异步加载,那么问题来了?我是不是要 ...

  10. 类似IOS的滑动返回上一级，SwipeBackLayout-android的滑动返回类库

    最近,公司在开发App的需求中增加了一个新的需求,要在android的页面中增加向右滑动的时候返回上一级页面.我刚知道这个需求的时候,感觉有点坑,可能设计那边最近接触到知乎的客户端或者是IOS的滑动可 ...