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. 深入JVM锁机制1-synchronized

    目前在Java中存在两种锁机制:synchronized和Lock,Lock接口及其实现类是JDK5增加的内容,其作者是大名鼎鼎的并发专家Doug Lea.本文并不比较synchronized与Loc ...

  2. Java ZIP打包

    File zipFile = IOUtil.createTempFile("zip"); ZipOutputStream zipout = new ZipOutputStream( ...

  3. ubuntu下安装UltraEdit

    在windows下常年使用UltraEdit来查看log,现在突然切换到ubuntu下,系统自带的Text Editor相当不适应:只有自己安装了. 首先,需要下载安装包,可以去:http://www ...

  4. linux服务器的操作禁忌

    1.linux系统是否支持开启SELINUX服务 我方linux系统的服务器不支持开启Selinux服务,如果开启了selinux服务,会导致系统异常并无法启动. 2.linux系统下能否开启NetW ...

  5. robotium和appium的一些区别

    Appium是基于UIAutomator框架实现的.Appium测试进程与目标应用进程是分开的,所以Appium不能直接访问目标应用的各种element属性进行copy&paste,而只能模拟 ...

  6. javascript焦点图左右按钮简单自动轮播

    这里把css和html合在一块写了,这块代码只是布局和样式不是重点 <!DOCTYPE html> <html> <head> <meta charset=& ...

  7. 使用纯css3实现图片轮播

    <!DOCTYPE html> <html> <head> <title> 飛天网事--纯CSS代码实现图片轮播 </title> < ...

  8. Confluence搭建

    参见 https://confluence.atlassian.com/display/CONF54/Installing+the+Confluence+EAR-WAR+Edition 下载5.4.4 ...

  9. sql server显示某一列中有重复值的行

    sql server查询一张表 ,显示某一列中有重复值的行,可以这样写: Select * From 表名 where 列名 in(Select 列名 From Table group by 列名 h ...

  10. Centos 6.5升级到Git2.1.2的步骤

    Centos 6.5升级到Git2.1.2的步骤 Centos 6.5升级到Git2.1.2其实是非常的简单,因这款版本控制程序非常的好用,所以小编自己也是使用它了,下面一起来看看Centos 6.5 ...