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

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

<head>

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

<title></title>

<link href="miaov_style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

var aInnerText=

[

"快过年了，大家可以商量着去哪玩吧～",

"精通JavaScript开发课程 - 结课标准 - 有十条标准可让大家修练成JS高手……",

"妙味茶馆(bbs.miaov.com)，正式开张，它看起来是论坛，其实是个技术驿站，分成了五个版块：视频教程、妙味生活秀、特效兜儿、技术交流、妙味聊吧",

"精通各种DOM类应用，熟练掌握面向对象编程思想（OOP）、熟悉JS面向对象开发方式 - 妙味课堂 - www.miaov.com",

"熟练掌握AJAX技术及相关应用（例如：新浪微博级应用） - 妙味课堂 - www.miaov.com",

"可以独立写出类似jQuery的小型库（支持各类选择符、事件类、DOM、自定义动画animate、AJAX……） - 妙味课堂 - www.miaov.com",

"精通JS运动特效技术，能完整实现各类网站所有动画特效，如 妙味课堂 官网 - 妙味课堂 - www.miaov.com",

"掌握JS调试及优化技术、能兼容所有浏览器 - 妙味课堂 - www.miaov.com",

"精通JS事件对象及事件的工作机制，并能完成各类跨平台应用模块的开发 - 妙味课堂 - www.miaov.com",

"能独立开发表现和性能都很优秀的RIA应用 - 妙味课堂 - www.miaov.com",

"了解后台编程的相关知识，能够和后台工程师配合完成大型交互应用 - 妙味课堂 - www.miaov.com",

"熟悉正则表达式的编写、应用及高级表单验证技术 - 妙味课堂 - www.miaov.com"

];

window.onload=function(){

var Otab = document.getElementById('tab');

var Odiv = Otab.getElementsByTagName('div')[0];

var Oul = Otab.getElementsByTagName('ul')[0];

var Oli = Otab.getElementsByTagName('li');

for(var i =0;i<Oli.length;i++){

Oli[i].index=i;

Oli[i].onmouseover=function(){

for(var i =0;i<Oli.length;i++){

Oli[i].className='';

}

this.className='active';

Odiv.innerHTML= "<h2>" + (this.index+1) + "月活动</h2>"+"<p>" + aInnerText[this.index] + "</p>";

}

}

}

</script>

</head>

<body>

<div id="tab" class="calendar">

<ul>

<li class="active"><h2>1</h2><p>JAN</p></li>

<li><h2>2</h2><p>FER</p></li>

<li><h2>3</h2><p>MAR</p></li>

<li><h2>4</h2><p>APR</p></li>

<li><h2>5</h2><p>MAY</p></li>

<li><h2>6</h2><p>JUN</p></li>

<li><h2>7</h2><p>JUL</p></li>

<li><h2>8</h2><p>AUG</p></li>

<li><h2>9</h2><p>SEP</p></li>

<li><h2>10</h2><p>OCT</p></li>

<li><h2>11</h2><p>NOV</p></li>

<li><h2>12</h2><p>DEC</p></li>

</ul>

<div class="text">

<h2>1月活动</h2>

<p>快过年了，大家可以商量着去哪玩吧～</p>

</div>

</div>

</body>

</html>

JavaScript简易日历的更多相关文章

  1. javascript简易日历制作

    学习记录 01.练习数组的用法 02.理解this.index的用法 03.绑定事件深入练习理解 html代码 <div id="date"> <ul id=&q ...

  2. 原生Js_制作简易日历

    javascript制作简易日历,月份信息已经放在一个数组中,在<script>...</script>中编写代码实现其功能 实现步骤 a) 获取需要操作的dom对象 b) 在 ...

  3. javascript中Date对象的应用——简易日历的实现

    × 目录 [1]效果 [2]HTML [3]CSS[4]JS 前面的话 简易日历作为javascript中Date对象的常见应用,用途较广泛.本文将详细说明简易日历的实现思路 效果演示 HTML说明 ...

  4. 利用JavaScript制作简易日历

    <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <met ...

  5. js基础练习二之简易日历

    今天学到了js基础教程3,昨天的课后练习还没来的及做,这个是类似简易日历的小案例,视频还没听完,今晚继续...... 先看效果图: 其实做过前面的Tab选项卡,这个就很好理解了,通过鼠标放在不同月份月 ...

  6. js简易日历

    js简易日历中设计的知识点:选项卡切换   数组    innerHTML  连接符 与选项卡的区别:div的个数不同 连接符中需要注意的:(优先级) "abc"+12+3+&qu ...

  7. avalon.js实现一个简易日历

    使用MVVM框架avalon.js实现一个简易日历   最近在做公司内部的运营管理系统,因为与日历密切相关,同时无需触发条件直接显示在页面上,所以针对这样的功能场景,我就用avalon快速实现了一个简 ...

  8. 使用MVVM框架avalon.js实现一个简易日历

    最近在做公司内部的运营管理系统,因为与日历密切相关,同时无需触发条件直接显示在页面上,所以针对这样的功能场景,我就用avalon快速实现了一个简易日历,毕竟也是第一次造日历这种轮子,所以这里记录下我当 ...

  9. c语言的简易日历

    用c语言编写的简易日历,代码如下: #include <stdio.h> int main(int argc, const char * argv[]) { // insert code ...

随机推荐

  1. java 、Android 提交参数转码问题

    1.解决Android.JAVA.ajax提交中文.URL中文参数传递后的乱码问题的解决办法  2.JAVA 中URL链接中文参数乱码的处理方法  3.JAVA URL中带有中文时的处理 在提交参数的 ...

  2. Shared and Exclusive Locks 共享和排它锁

    14.5 InnoDB Locking and Transaction Model InnoDB 锁和事务模型 14.5.1 InnoDB Locking 14.5.2 InnoDB Transact ...

  3. 【HDOJ】1561 The more, The Better

    树状DP. /* 1561 */ #include <iostream> #include <cstdio> #include <cstring> #include ...

  4. loadrunner11 录制脚步不成功，在录制概要出现“No Events were detected”，浮动窗口总是显示“0 Events”,解决办法

    打开ie浏览器,菜单栏上的工具----Internet选项---高级选项卡,去掉勾选“启用第三方浏览器扩展”,重启ie即可,重新录制脚本就可以成功. 刚刚开始以为自己解决不了这个问题,还想怎么办呢?一 ...

  5. Java学习日记-3 Character和字符串

    (先说几个小问题 1.在main方法中调用主类的其他方法时,必须先生成主类的对象 2.String s = new String("Hello") 生成了两个对象 3.熟用布尔+f ...

  6. Unity中OnGUI绘制贪吃蛇

    Square.cs : public class Square : MonoBehaviour { public int row, col; public Rect rect; public Text ...

  7. poj1190 生日蛋糕 dfs

    题意:生日蛋糕有m层,总体积是V.从下向上,每一层的半径r和高度h都是递减的. 给m.v,求最小的表面积s.(不算底面接地的面积) 题目链接:poj1190 剪枝都还没加..样例输出都是错的...还没 ...

  8. tomcat : Error configuring application listener of class org.springframework.web.context.ContextLoaderListener java.lang.ClassNotFoundException:

    错误 严重: Error configuring application listener of class org.springframework.web.context.ContextLoader ...

  9. 从APP消息推送所理解的观察者模式

    #1.什么是观察者模式? 观察者模式=(出版者+订阅者)模式,观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状态发生变化时,会通知所有观察者对象,使它们能 ...

  10. 斐波那契数列 51nod

    1242 斐波那契数列的第N项 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 斐波那契数列的定义如下:   F(0) = 0 F(1) = 1 F(n) ...