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. aspnet5备忘

    1. 在Windows下面运行cmd,然后执行下面的命令 @powershell -NoProfile -ExecutionPolicy unrestricted -Command "&am ...

  2. linode digitalocean哪个更好

    大多数人纠结的品牌是Linode和DigitalOcean.我有幸使用过两者的产品,从2011年起,我就在用Linode VPS套餐,2013年开始,我订购了一批DigitalOcean产品,下面说下 ...

  3. sql优化原则

    尽量使用性能高的比如left join等,尽量减少数据查询的column,尽量不要查询冗余数据,like的话“%%”是没有 办法使用索引的,但是“%”是可以使用索引的 having以前一直不知道到底真 ...

  4. sql分页比较简单快捷的方法

    SELECT TOP 显示数量* FROM 表 WHERE (主键id>(SELECT MAX(主键id) FROM(SELECT TOP 页码数*显示数量 主键id FROM 表 ORDER ...

  5. 让ECSHOP模板支持转smarty时间戳

    找到includes/cls_template.php 在大约640行,加入: case 'time': $p = 'date("Y-m-d H:i:s",' . $p . ')' ...

  6. opencv使用convexityDefects计算轮廓凸缺陷

    引自:http://www.xuebuyuan.com/1684976.html http://blog.csdn.net/lichengyu/article/details/38392473 htt ...

  7. 计算机网络 NAT

    NAT(Network Address Translation,网络地址转换)是1994年提出的.当在专用网内部的一些主机本来已经分配到了本地IP地址(即仅在本专用网内使用的专用地址),但现在又想和因 ...

  8. ValueStack背后的OGNL表达式

    原文地址:http://blog.csdn.net/li_tengfei/archive/2010/12/25/6098134.aspx 前言: Strut2的Action类通过属性可以获得所有相关的 ...

  9. Flask -- 入门

    安装virtualenv 作用:可以为一个项目单独提供一份Python的安装,安全  pip install virtualenv 使用virtualenv为MyProject项目安装Python,并 ...

  10. Chapter 2 Open Book——18

    "Wow," Mike said. "It's snowing."I looked at the little cotton fluffs that were ...