js中計時器的用法「javascript計時器頻率設置」

一些例題

1.顯示當前的時間

function showDate( ){
  var d = new Date();  //獲取當前時間
  var year = d.getFullYear();  //獲取當前年份
  var month = d.getMonth() + 1;  //獲取當前月份，注意加1
  var date = d.getDate();  //獲取當前日期
  var week = d.getDay();  //獲取星期，因為0代表周日，所以需要if判斷一下
    if( week == 0 ){
      week = 「周日」;
}
  var hour = d.getHours();  //獲取小時
  var min = d.getMinutes();  //獲取分鐘
  var sec = d.getSeconds();  //獲取秒

  return year + 「年」 + month + 「月」 + date + 「日  星期」 + week + 」 」 + hour + 「:」 + min + 「:」  + sec;  //將它們組合起來輸出
}
alert( showDate() );  //最後直接調用showDate函數即可

注意引號、分號等標點符號一定要用英文的

運行結果如下：

2.setDate()和getDate()封裝一個函數，可以根據輸入的數值n（天數）顯示n天后的時間

分析：先獲取當前時間，再獲取天數，再用天數加上n天

function numOfDate( n ){  //n天后
  var d = new Date();  //獲取當前時刻
  var date = d.getDate();  //取出天數
  d.setDate( date + n );  //加上n天
  return d;
}
alert( numOfDate(2) );

運行結果如下：

計時器

setInterval()

格式：

setInterval( 函數(或匿名函數),毫秒數 ); 或者

setInterval( function(){ } , 毫秒數 ); 只不過一個是寫了函數名，一個是直接定義了函數

功能：每隔所傳參數的毫秒數，就調用一次所傳參數的函數

返回值：當前頁面上對於這個定時器的唯一標識，定時器的ID

有了定時器的ID我們就可以取消定時器，下面會講到

舉個小例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type = "text/javascript">
var i = 0;
function show(){  //這裡也可以寫成var show = function(){ }
        document.write( i++ + 「<br />」 );
}
//然後我們寫一個按鈕，點擊按鈕啟動定時器
window.onload = function(){
  var oBtn = document.getElementById( 「btn」 );  //先獲取按鈕
  oBtn.onclick = function(){  //把事件驅動函數綁定給這個按鈕
  setInterval( show,1000 );  //這裡是函數的傳參，傳show，也可以將show改成function定義的函數內容
}
}
</script>
</head>
<body>
點擊按鈕時啟動一個定時器，這個定時器讓它執行show函數
  <input type=」button」 id=」btn」 value=」按鈕」 />
</ body>
</html>

運行結果如下：

取消定時器

clearInterval();

參數：定時器的ID

功能：取消定時器

我們把上面的小例子中的按鈕ID輸出一下

window.onload = function(){
       var oBtn = document.getElementById( 「btn」 );
       oBtn.onclick = function(){
       var timer = setInterval( function(){
       document.write( i++ + 「<br />」 );
} ,1000 );  //改寫的上面的函數傳參
alert( timer );
}
}

當我們點擊按鈕時運行的按鈕ID為

那麼怎麼去取消定時器呢？

我們需要加一個if判斷條件，控制它什麼時候取消

window.onload = function(){
       var oBtn = document.getElementById( 「btn」 );
       oBtn.onclick = function(){
       var timer = setInterval( function(){
       document.write( i++ + 「<br />」 );
       if( i == 3 ){
       clearInterval( timer );
}
} ,1000 );  //改寫的上面的函數傳參
alert( timer );
}
}

運行結果如下

以上是定時器的使用及清除

標籤間的所有內容

innerHTML

功能：標籤間的所有內容

舉個小例子：

如果我們的div中有一些信息，想要通過點擊按鈕來獲取這個信息，就需要用到它

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type = "text/javascript">
  window.onload=function( ){
    var oBtn=document.getElementById( 「btn」 );
    var oDiv=document.getElementById( 「div1」 );
    
    oBtn.onclick=function( ){
  //獲取div標籤間的內容
  alert(oDiv.innerHTML);
}
}
</script>
</head>
<body>
  <div id =」div1」><em>斜體</em></div>
  <input type=」button」 id = 「btn」 value=」按鈕」 />
</ body>
</html>

運行結果如下，當我們點擊按鈕時，就彈出對話框

獲取時並不僅僅是文字獲取，而是標籤一起獲取

如果我們想要設置innerHTML的內容，可以這樣寫

window.onload=function( ){
    var oBtn=document.getElementById( 「btn」 );
    var oDiv=document.getElementById( 「div1」 );
    
    oBtn.onclick=function( ){
  //獲取div標籤間的內容
  oDiv.innerHTML=」<h1>我是替換文本</h1>」
}
}

運行結果點擊按鈕就可以看添加的