【JavaScript】自動改變網頁背景色

自動改變網頁背景色

  • 最近在做一個功能時,需要一個自動變換背景的網頁,進行功能驗證。於是就是寫了一個自動變色(背景)的網頁。下面是些用到的知識點,作爲總結。
  • 知識點1:定時器
setTimeout("func", ms)
  • 知識點2:css style,這裏設定了day和night兩類。day對應白色背景,night對應黑色背景。
<style type="text/css">
    .day {
     background-color:white;
    }
    .night {
     background-color:black;
   }
  • 代碼:
<!DOCTYPE html>
<html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />   
  <style type="text/css">
    .day {
     background-color:white;
    }
    .night {
     background-color:black;
 }
</style> 
 </head> 
 <body> 
  <script type="text/javascript">
i = 1
function changeBackGround()
{
  i++;
  if (i % 2 == 0) {
    switchClass('night');
  }
  else {
    switchClass('day');
  }

  setTimeout("changeBG()", 10000)
}

function switchClass(name)
{
  document.body.className =name;
}
changeBackGround()
</script> 
 </body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章