js定時器內寫的函數不能在外部調用

時間 2019-11-19

原文原文鏈接

<!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>
function zr(n)//將數字轉換成字符串並在一位數前添‘0’
{
 if(n<10)
 {
  return '0'+n;
 }
 else
 {
  return ''+n;  //前面加空字符能保證它返回的必定是個字符串而不是數字
 } 
}
window.onload=function()
{
 var oDiv1=document.getElementById('div1');
 var oDiv2=document.getElementById('div2');
 var aImg1=oDiv1.getElementsByTagName('img');
 var aImg2=oDiv2.getElementsByTagName('img');
 
 function clock()
 {
  var oDate = new Date();
  var str1=zr(oDate.getFullYear())+zr(oDate.getMonth()+1)+zr(oDate.getDate());//獲取系統日期，並轉換成字符串
  var str2=zr(oDate.getHours())+zr(oDate.getMinutes())+zr(oDate.getSeconds());//獲取系統時間，並轉換成字符串
  
  for(var i=0; i<aImg1.length; i++)//更改img下的圖片
  {
   aImg1[i].src='img09/'+str1.charAt(i)+'.png';//此處用charAt能作到全兼容，如用str1[i]部分瀏覽器不兼容
  }
  
  for(var i=0; i<aImg2.length; i++)//更改img下的圖片
  {
   aImg2[i].src='img09/'+str2.charAt(i)+'.png';
  }
 }
 setInterval(clock,500);//這裏咱們在定時器裏面調用clock函數，若是咱們偷懶將clock函數直接寫在setInterval裏面，下面咱們將沒法調用clock函數
 clock();//因爲定時器不會在打開網頁的時候當即執行定時器裏面的代碼，咱們須要在此處調用clock函數，讓它當即執行一次，防止刷新網頁的時候出現全‘0’的現象（因爲個人img標籤的src默認值是0.png(數字‘0’)）
}
</script>
</head>

<body style="background:#000; font-size:100px; color:#FFF">
<div id="div1">
 <img src="img09/0.png" />
    <img src="img09/0.png" />
    <img src="img09/0.png" />
    <img src="img09/0.png" />
    年
    <img src="img09/0.png" />
    <img src="img09/0.png" />
    月
    <img src="img09/0.png" />
    <img src="img09/0.png" />
    日
</div>
<div id="div2">
 <img src="img09/0.png" />
    <img src="img09/0.png" />
    :
    <img src="img09/0.png" />
    <img src="img09/0.png" />
    :
    <img src="img09/0.png" />
    <img src="img09/0.png" />
</div>
</body>
</html>

若是咱們將定時器寫成這樣將沒法在下面調用clock函數
html

setInterval(function clock()
 {
  var oDate = new Date();
  var str1=zr(oDate.getFullYear())+zr(oDate.getMonth()+1)+zr(oDate.getDate());
  var str2=zr(oDate.getHours())+zr(oDate.getMinutes())+zr(oDate.getSeconds());
  
  for(var i=0; i<aImg1.length; i++)
  {
   aImg1[i].src='img09/'+str1.charAt(i)+'.png';
  }
  
  for(var i=0; i<aImg2.length; i++)
  {
   aImg2[i].src='img09/'+str2.charAt(i)+'.png';
  }
 }
 ,500);
 clock();//這裏沒法調用clock函數
}