JS简易日历    innerHTML

<title>无标题文档</title>

<script>

  var neirong=['一','二','三','四','五','六','七','八','九','十','十一','十二',];

  window.onload=function(){

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

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

     var li=ul.getElementsByTagName('li');

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

     var i=0;

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

       li[i].index=i;

       li[i].onmouseover=function(){

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

             li[i].className='';

          };

          this.className='active';

          div.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+neirong[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>3月活动</h2>

      <p>新学期开始了，大家都拥有个崭新的面貌投入学习吧！</p>

   </div>

</div>

</body>

初探JavaScript魅力（五）的更多相关文章

  1. 【JavaScript从入门到精通】第四课初探JavaScript魅力-04

    第四课初探JavaScript魅力-04 style与className 之前我们已经讲过,style用于在JS里控制元素的样式,通过style可以选中元素的各种css属性.此外,我们也提到过,JS用 ...

  2. 【JavaScript从入门到精通】第三课 初探JavaScript魅力-03

    第三课 初探JavaScript魅力-03 函数传参 上节课的时候我们已经讲了什么是函数,实际上,函数在功能上就类似于css的class一样,将一段代码包裹起来使用.为了让函数的功能更加的丰富和实用, ...

  3. 【JavaScript从入门到精通】第二课 初探JavaScript魅力-02

    第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...

  4. 【JavaScript从入门到精通】第一课 初探JavaScript魅力-01

    第一课 初探JavaScript魅力-01 JavaScript是什么 如今我们打开一个大型的网站,都会有很多JS效果的功能和应用.对于学过CSS+HTML的同学,即使是像淘宝那样的网站,用一两天时间 ...

  5. 01 - 初探JavaScript魅力

    网页特效原理 用JavaScript修改样式 编写JS的流程 布局:HTML+CSS 属性:确定要修改哪些属性 事件:确定用户做哪些操作(产品设计) 编写JS:在事件中,用JS来修改页面元素的样式 鼠 ...

  6. 初探JavaScript魅力（二）

    行为,样式,结构三者分离(javascript, css, html),不要在行间加行为,样式 样式优先级:*<标签<class<ID<行间 style与className,如 ...

  7. 初探Javascript魅力(1)

    转自:CSDN--http://blog.csdn.net/cherry_vicent/article/details/42120149 1.javascript是什么   根据用户的一些操作,然后来 ...

  8. 初探JavaScript魅力（四）

    选项卡 <title>无标题文档</title> <style> #div1 .active{background:#FF0;} #div1 div{width:2 ...

  9. 初探JavaScript魅力（三）

    复选框的全选.反选和不选 <title>无标题文档</title> <style> body{background:#666;} </style> &l ...

随机推荐

  1. 如何使用自定义消息？－－ESFramework 4.0 快速上手（04）

    在ESFramework 4.0 快速上手一文中,我们讲述了如何使用Rapid引擎可以快速地上手ESFramework开发,文中介绍了使用ESPlus.Application.CustomizeInf ...

  2. ftp资源调用迅雷下载

    <script src='http://pstatic.xunlei.com/js/webThunderDetect.js'></script> <script src= ...

  3. NOIP2011-普及组复赛-第一题-数字反转

    题目描述 Description 给定一个整数,请将该数各个位上数字反转得到一个新数.新数也应满足整数的常见形式,即除非给定的原数为零,否则反转后得到的新数的最高位数字不应为零(参见样例2).  输入 ...

  4. Threading

    new System.Threading.Thread(new System.Threading.ThreadStart(ReadState)).Start();

  5. The type java.util.Map$Entry cannot be resolved. It is indirectly referenced from required .class files

    JDK版本的问题. 解决方法: 原来jdk1.8不向下兼容,用回1.6的就可以了. 下图有三个jdk,前两个自己装的,第三个MyEclipse自带的.

  6. Oracle SQL 内置函数大全

    SQL中的单记录函数 1.ASCII 返回与指定的字符对应的十进制数;SQL> select ascii('A') A,ascii('a') a,ascii('0') zero,ascii(' ...

  7. Linux下wps字体问题

    1.安装symbol-fonts_1.2_all.deb,自行搜索 2.卸载xfonts-mathml字体 sudo apt-get remove xfonts-mathml

  8. Google 怎么搜索

    著作权归作者所有. 商业转载请联系作者获得授权,非商业转载请注明出处. 作者:崔凯 链接:http://www.zhihu.com/question/20161362/answer/14180620 ...

  9. HDU 5804 Price List

    只需和总和比较即可. #pragma comment(linker, "/STACK:1024000000,1024000000") #include<cstdio> ...

  10. MFC下DLL编程(图解)

    MFC下DLL编程(图解) DLL(Dynamic Link Library,动态链接库)是微软公司为Windows和OS/2操作系统设计一种供应用程序在运行时调用的共享函数库.DLL是应用程序的一种 ...