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. 理解SQL Server中的权限体系(下)----安全对象和权限

    原文:http://www.cnblogs.com/CareySon/archive/2012/04/12/SQL-Security-SecurableAndPermission.html 在开始阅读 ...

  2. [转]hadoop hdfs常用命令

    FROM : http://www.2cto.com/database/201303/198460.html hadoop hdfs常用命令   hadoop常用命令:  hadoop fs  查看H ...

  3. [转]C# WinForm treeview checkbox----递归算法利用

    在平常开发中,treeview的节点显示checkbox,若节点存在几级时,往往希望,选中父节点后,其子节点都要选中,如何实现勒,请看 using System; using System.Colle ...

  4. JAVA中获取当前系统时间

    一. 获取当前系统时间和日期并格式化输出: import java.util.Date;import java.text.SimpleDateFormat; public class NowStrin ...

  5. 【MPI学习4】MPI并行程序设计模式：非阻塞通信MPI程序设计

    这一章讲了MPI非阻塞通信的原理和一些函数接口,最后再用非阻塞通信方式实现Jacobi迭代,记录学习中的一些知识. (1)阻塞通信与非阻塞通信 阻塞通信调用时,整个程序只能执行通信相关的内容,而无法执 ...

  6. 程序员"青春饭"问题之我见

      程序员"青春饭"问题之我见 声明:转载请注明出处.http://www.cnblogs.com/hzg1981/ 1. 问题描述 问题1: 什么是程序员? 在本文中程序员的定义 ...

  7. Thinkphp 边学边用-验证码无意间犯的错

    先看代码: $(".verify_img").click(function(){ var timenow = new Date().getTime(); var url =&quo ...

  8. 模态窗口插件之Jbox

    $.jBox.tip("报损数量不能大于库存数!", 'error'); $.jBox.tip("请选择要报损的产品", "warn"); ...

  9. css翻页样式

    /*=======================翻页样式===========================*/.pages { width: 660px; text-align: center; ...

  10. [BZOJ1801][AHOI2009]中国象棋（递推）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1801 分析: 只会50的状态压缩…… 然后搜了下题解,发现是dp 首先易得每行每列至多 ...