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来改变秒的值的时候需要调用一次函数，以避免出现第一次加载的时候出现数值都是零的结果。


__EOF__

本文作者：Paxster
本文链接：https://www.cnblogs.com/paxster/archive/2013/05/04/3058991.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   Paxster  阅读(247)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示
AI IDE Trae