javascript小实例【第三课时笔记】

  • 关于innerHTML:innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。这个是W3school给的定义,通俗一点就是,innerHTML可以获取你设置的某的元素之间的文本内容。并且可以通过innerHTML添加元素标签,来设置CSS样式,请看下面的例子。
     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
     2 <html xmlns="http://www.w3.org/1999/xhtml">
    
     3 <head>
    
     4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    
     5 <title>innerHTML</title>
    
     6 <style>
    
     7     #div1{width:100px;height:100px;background:#ccc;}
    
     8 </style>
    
     9 <script>
    
    10     window.onload=function(){
    
    11         var otxt=document.getElementById('txt');
    
    12         var obtn=document.getElementById('btn');
    
    13         var odiv=document.getElementById('div1');
    
    14         obtn.onclick=function(){
    
    15             odiv.innerHTML=otxt.value;
    
    16         };
    
    17     };
    
    18 </script>
    
    19 </head>
    
    20 <body>
    
    21     <input     id="txt" type="text" />
    
    22     <input id="btn" type="button" value="显示文字"/>
    
    23     <div id="div1"></div>
    
    24 </body>
    
    25 </html>

    通过在文本框输入相应的东西都可以在div上面显示出来,正是利用了innerHTML的特性。

  • setinterval() / clearinterval()定时器,通过设置时间和对象,来循环执行某一个东西;对应的后者可以清楚定时器,但是要注意()里面的要清楚的对象。

    setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

    setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

     1 <html>
    
     2 <body>
    
     3 <input type="text" id="clock" size="35" />
    
     4 <script language=javascript>
    
     5 var int=self.setInterval("clock()",50)
    
     6 function clock()
    
     7   {
    
     8   var t=new Date()
    
     9   document.getElementById("clock").value=t
    
    10   }
    
    11 </script>
    
    12 </form>
    
    13 <button onclick="int=window.clearInterval(int)">
    
    14 Stop interval</button>
    
    15 </body>
    
    16 </html>

    这个例子是应用的W3school网站的,写法比较新鲜。

  • setTimeout() / clearTimeout()延迟性的定时器,给他一个值,在多少秒以后执行,他仅仅只执行一次。
  • charAt获取在第几个位置的字符;
  • 第三个小实例---数码时钟
      1 var timer=null;
    
      2 var aNow=null;
    
      3 
    
      4 var g_aImg=[];
    
      5 var g_oImgWeek=null;
    
      6 var g_aWeekName=
    
      7 [
    
      8     "one",
    
      9     "two",
    
     10     "three",
    
     11     "four",
    
     12     "five",
    
     13     "six",
    
     14     "seven"
    
     15 ];
    
     16 
    
     17 window.onload=function ()
    
     18 {
    
     19     var oDiv=document.getElementById('clock');
    
     20     var aImg=oDiv.getElementsByTagName('img');
    
     21     var i=0;
    
     22     
    
     23     for(i=0;i<aImg.length;i++)
    
     24     {
    
     25         if(!isNaN(parseInt(aImg[i].alt)))
    
     26         {
    
     27             g_aImg.push(aImg[i]);
    
     28         }
    
     29     }
    
     30     
    
     31     g_aImg.push(aImg[aImg.length-2]);
    
     32     
    
     33     aNow=getTimeArray();
    
     34     
    
     35     for(i=0;i<g_aImg.length;i++)
    
     36     {
    
     37         g_aImg[i].now=-1;
    
     38     }
    
     39     
    
     40     checkSwitch();
    
     41     
    
     42     setInterval(checkSwitch, 1000);
    
     43     checkSwitch();
    
     44 }
    
     45 
    
     46 var g_iImgHeigth=0;
    
     47 var g_iTarget=0;
    
     48 var g_iMax=0;
    
     49 
    
     50 function checkSwitch()
    
     51 {
    
     52     var i=0;
    
     53     
    
     54     aNow=getTimeArray();
    
     55     
    
     56     g_imgHeigth=g_aImg[0].offsetHeight;
    
     57     g_iTarget=-g_imgHeigth;
    
     58     g_iMax=g_imgHeigth;
    
     59     
    
     60     timer=setInterval(doSwitch, 30);
    
     61 }
    
     62 
    
     63 function doSwitch()
    
     64 {
    
     65     var bEnd=false;
    
     66     var i=0;
    
     67     
    
     68     g_imgHeigth-=5;
    
     69     if(g_imgHeigth<=g_iTarget)
    
     70     {
    
     71         g_imgHeigth=g_iTarget;
    
     72         bEnd=true;
    
     73     }
    
     74     
    
     75     for(i=0;i<g_aImg.length;i++)
    
     76     {
    
     77         if(g_aImg[i].now!=aNow[i])
    
     78         {
    
     79             if(g_imgHeigth>0)
    
     80             {
    
     81                 g_aImg[i].style.height=g_imgHeigth+'px';
    
     82                 g_aImg[i].style.top=-(g_iMax-g_imgHeigth)/2+'px';
    
     83             }
    
     84             else
    
     85             {
    
     86                 if(i==g_aImg.length-1)
    
     87                 {
    
     88                     g_aImg[i].src="images/" + g_aWeekName[aNow[i]] + ".png";
    
     89                 }
    
     90                 else
    
     91                 {
    
     92                     g_aImg[i].src="images/" + aNow[i] + ".png";
    
     93                 }
    
     94                 
    
     95                 g_aImg[i].style.height=-g_imgHeigth+'px';
    
     96                 g_aImg[i].style.top=-(g_iMax+g_imgHeigth)/2+'px';
    
     97             }
    
     98         }
    
     99     }
    
    100     
    
    101     if(bEnd)
    
    102     {
    
    103         for(i=0;i<g_aImg.length;i++)
    
    104         {
    
    105             g_aImg[i].now=aNow[i];
    
    106         }
    
    107         
    
    108         clearInterval(timer);
    
    109     }
    
    110 }
    
    111 
    
    112 function toDouble(iNum)
    
    113 {
    
    114     if(iNum<10)
    
    115     {
    
    116         return '0'+iNum;
    
    117     }
    
    118     else
    
    119     {
    
    120         return ''+iNum;
    
    121     }
    
    122 }
    
    123 
    
    124 function getTimeArray()
    
    125 {
    
    126     var oDate=new Date();
    
    127     var aNumber=[];
    
    128     
    
    129     var iYear=oDate.getYear();
    
    130     var iMonth=oDate.getMonth();
    
    131     var iDay=oDate.getDate();
    
    132     var iHour=oDate.getHours();
    
    133     var iMin=oDate.getMinutes();
    
    134     var iSec=oDate.getSeconds();
    
    135     var iWeek=(oDate.getDay()+6)%7;
    
    136     
    
    137     if(iYear<1900)
    
    138     {
    
    139         iYear+=1900;
    
    140     }
    
    141     var str=''+(iYear)+toDouble(iMonth+1)+toDouble(iDay)+toDouble(iHour)+toDouble(iMin)+toDouble(iSec)+iWeek;
    
    142     var aChar=str.split('');
    
    143     
    
    144     for(i=0;i<aChar.length;i++)
    
    145     {
    
    146         aNumber[i]=parseInt(aChar[i]);
    
    147     }
    
    148     
    
    149     return aNumber;
    
    150 }

    这个实例,通过10个png图片来实现时间的动态改变;其中需要注意的地方很多。通过getDate(),getFullYear(),getMonth(),getDay(),等函数的连接;并且因为有6位数字,所以要通过if判断来实现6位数字的排列;通过interval来改变秒的值的时候需要调用一次函数,以避免出现第一次加载的时候出现数值都是零的结果。

你可能感兴趣的:(JavaScript)