初探JavaScript魅力(五)

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>

时间: 2024-10-27 11:19:49

初探JavaScript魅力(五)的相关文章

01 - 初探JavaScript魅力

网页特效原理 用JavaScript修改样式 编写JS的流程 布局:HTML+CSS 属性:确定要修改哪些属性 事件:确定用户做哪些操作(产品设计) 编写JS:在事件中,用JS来修改页面元素的样式 鼠标移入移出效果 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1 {width:

初探JavaScript魅力(二)

行为,样式,结构三者分离(javascript, css, html),不要在行间加行为,样式 样式优先级:*<标签<class<ID<行间 style与className,如果先给了style行间样式,再给className不会有效果 <title>无标题文档</title> <style> #div1{width:200px;height:200px;border:1px solid #000;} .box{background:#F00;}

初探JavaScript魅力(四)

选项卡 <title>无标题文档</title> <style> #div1 .active{background:#FF0;} #div1 div{width:200px; height:200px; background:#666; border:1px solid #999; display:none;} </style> <script> window.onload=function (){ var oDiv=document.getEl

初探JavaScript魅力(三)

复选框的全选.反选和不选 <title>无标题文档</title> <style> body{background:#666;} </style> <script> window.onload=function (){ var oBtn1=document.getElementById('btn1'); var oBtn2=document.getElementById('btn2'); var oBtn3=document.getElement

初探JavaScript(四)——JS另类的作用域和声明提前

前言:最近恰逢毕业季,千千万万的学生党开始步入社会,告别象牙塔似的学校生活.往往在人生的各个拐点的时候,情感丰富,感触颇深,各种对过去的美好的总结,对未来的展望.与此同时,也让诸多的老“园”工看完这些小年轻的文章后感触良多,不禁也要写上几笔,所以就出来了很多类似“毕业两年小记”.“毕业五年有感”…… 可能就是某篇博文的一句话,某碗心灵鸡汤就拨动了你心里的那根尘封已久的弦,让你情不自禁的点了个赞,还忍不住的要在下面评论区留下自己此刻心潮澎湃的印记. 我今天不是来送鸡汤的,鸡汤虽好,可不要贪杯哦.

L2-初探JavaScript魅力(1)

getElementById 在JavaScript中,不得不说的是查找元素,然后再进行对其操作.getElementById(Id)是我们第一个js兼容问题,也是常用的方法.在火狐浏览器下直接使用ID是会存在问题的,要解决这个问题,就需要引入document.getElementById(Id).document.getElementById在任何浏览器下均可使用. 案例:网页换肤 html <!DOCTYPE html><html lang="en"><

初探JavaScript(二)——JS如何动态操控HTML

除去五一三天,我已经和<JavaScript Dom编程艺术>磨合了六天,第一印象很好.慢慢的,我发现这是一块排骨,除了肉还有骨头.遇到不解的地方就会多看几遍,实在不懂的先跳过,毕竟,初次接触JS,没有必要花费过多时间去钻死胡同,先混个脸熟,以后再来拜访也未尝不可嘛.就这样,踉踉跄跄.囫囵吞枣似的已经过五关斩六将,到达第十一章. 书中有几个章节并没有从语法.技术等层面介绍JavaScript,而是站在一个全局的角度,立足编程原则和习惯道破了我们该如何看待和使用这门语言,主要有以下几点: Jav

初探JavaScript(一)——也谈元素节点、属性节点、文本节点

Javascript大行其道的时候,怎么能少了我来凑凑热闹^_^ 基本上自己对于js的知识储备很少,先前有用过JQuery实现一些简单功能,要论起JS的前世今生,来龙去脉,我就一小白.抱起一本<Javascript Dom编程艺术>,开始慢慢走近JS,与它套近乎,今天是第三天了,从目前来看,比较好相处.就此动笔,是一个回忆复习的过程,权当是自己的一份读书笔记. JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,已经被广泛用于Web应用开发,常用来为网

初探JavaScript(三)——JS带我碰壁带我飞

已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScript Dom 编程艺术>(ps:看过书评,网友对其褒贬不一,个人感觉还是不错的,适合初学者.不是每本书都能得到所有读者的认可,只能让部分适合的读者对其称赞,而我,就是其中一个). 前面介绍了JavaScript的一些常用方法,如何与DOM.HTML配合完成一些交互.今天主要介绍JavaScript在动画效