积累js中的一些问题及解决方案

一.取字符串的第i位不兼容的问题

1.问题：对于字符串str来说，要获取第i位，常见的是str[i],但是在低版本的浏览器中不兼容，例如ie7。

2.解决：使用str.charAt(i);

二.使用定时器，第一次执行也会延时

1.问题：在实现数码时钟的时候，想要1s刷新一次当前时间，因此将刷新的代码写在一个1s执行一次的定时器中，但是第一次打开页面，第一次刷新时间的时候仍然需要1s才能显示出当前时间，我们希望的是第一次不用等待，直接显示当前时候，以后才是1s刷新一次。

2.解决方案：首先将该函数写在定时器的外面，然后在window.onload里加上函数的调用。

即类似于

window.onload=function ()
{
   //定义执行函数
   function tick(){
   //具体实现
   }
  //定时器
  setInterval(tick,1000);
  //调用执行函数
  tick();
};

完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
//将一位数字补零变成2位
function toDou(n){
    if(n<10){
      return ''+n;    
    }else{
      return n+"";    
    }
}
window.onload=function ()
{
    var aImg=document.getElementsByTagName('img');
    function tick(){
    //根据系统时间修改字符串
    //var str='012321';
    var oDate=new Date();
    //问题1:这里获得的是number类型
    //问题2:如果是01只会获得1
    
    var str=toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());
    //alert(str);
    for(var i=0;i<aImg.length;i++)
    {
        aImg[i].src='img/'+str.charAt(i)+'.png';    
    }
        }
    
    setInterval(tick,1000);
    //这样可以保证第一次执行该代码不需要等待
    tick();
    
};
</script>
</head>

<body style="background:black;color:white;font-size:50px;">
<img src="img/0.png" />
<img src="img/0.png" />
:
<img src="img/0.png" />
<img src="img/0.png" />
:
<img src="img/0.png" />
<img src="img/0.png" />
</body>
</html>

数码时钟