Javascript學習九

時間  2019-12-07
標籤 javascript 學習 欄目 JavaScript 简体版
原文   原文鏈接

計時器setInterval()

在執行時,從載入頁面後每隔指定的時間執行代碼。javascript

語法:html

setInterval(代碼,交互時間);

參數說明：java

1. 代碼：要調用的函數或要執行的代碼串。瀏覽器

2. 交互時間：週期性執行或調用表達式之間的時間間隔，以毫秒計（1s=1000ms）。app

返回值:框架

一個能夠傳遞給 clearInterval() 從而取消對"代碼"的週期性執行的值。ide

調用函數格式(假設有一個clock()函數):函數

setInterval("clock()",1000)
或
setInterval(clock,1000)

咱們設置一個計時器，每隔100毫秒調用clock()函數，並將時間顯示出來，代碼以下:ui

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>計時器</title>
<script type="text/javascript">
  var int=setInterval(clock, 100)
  function clock(){
    var time=new Date();
    document.getElementById("clock").value = time;
  }
</script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
  </form>
</body>
</html>

 

 //===================================================操作系統

取消計時器clearInterval()

clearInterval() 方法可取消由 setInterval() 設置的交互時間。

語法：

clearInterval(id_of_setInterval)

參數說明:
id_of_setInterval：由 setInterval() 返回的 ID 值。

每隔 100 毫秒調用 clock() 函數,並顯示時間。當點擊按鈕時，中止時間,代碼以下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>計時器</title>
<script type="text/javascript">
   function clock(){
      var time=new Date();                     
      document.getElementById("clock").value = time;
   }
// 每隔100毫秒調用clock函數，並將返回值賦值給i
     var i=setInterval("clock()",100);
</script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
    <input type="button" value="Stop" onclick="clearInterval(i)"  />
  </form>
</body>
</html>

//=========================================================

計時器setTimeout()

setTimeout()計時器，在載入後延遲指定時間後,去執行一次表達式,僅執行一次。

語法:

setTimeout(代碼,延遲時間);

參數說明：

1. 要調用的函數或要執行的代碼串。
2. 延時時間：在執行代碼前需等待的時間，以毫秒爲單位（1s=1000ms)。

當咱們打開網頁3秒後，在彈出一個提示框，代碼以下:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
  setTimeout("alert('Hello!')", 3000 );
</script>
</head>
<body>
</body>
</html>

當按鈕start被點擊時，setTimeout()調用函數，在5秒後彈出一個提示框。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function tinfo(){
  var t=setTimeout("alert('Hello!')",5000);
 }
</script>
</head>
<body>
<form>
  <input type="button" value="start" onClick="tinfo()">
</form>
</body>
</html>

要建立一個運行於無窮循環中的計數器，咱們須要編寫一個函數來調用其自身。在下面的代碼，當按鈕被點擊後，輸入域便從0開始計數。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=0;
function numCount(){
 document.getElementById('txt').value=num;
 num=num+1;
 setTimeout("numCount()",1000);
 }
</script>
</head>
<body>
<form>
<input type="text" id="txt" />
<input type="button" value="Start" onClick="numCount()" />
</form>
</body>
</html>

 

 

 

 //============================================================

取消計時器clearTimeout()

setTimeout()和clearTimeout()一塊兒使用，中止計時器。

語法:

clearTimeout(id_of_setTimeout)

參數說明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。該值標識要取消的延遲執行代碼塊。

下面的例子和上節的無窮循環的例子類似。惟一不一樣是，如今咱們添加了一個 "Stop" 按鈕來中止這個計數器：

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
  var num=0,i;
  function timedCount(){
    document.getElementById('txt').value=num;
    num=num+1;
    i=setTimeout(timedCount,1000);
  }
    setTimeout(timedCount,1000);
  function stopCount(){
    clearTimeout(i);
  }
</script>
</head>
<body>
  <form>
    <input type="text" id="txt">
    <input type="button" value="Stop" onClick="stopCount()">
  </form>
</body>
</html>

 //===================================================

History 對象

history對象記錄了用戶曾經瀏覽過的頁面(URL)，並能夠實現瀏覽器前進與後退類似導航的功能。

注意:從窗口被打開的那一刻開始記錄，每一個瀏覽器窗口、每一個標籤頁乃至每一個框架，都有本身的history對象與特定的window對象關聯。

語法：

window.history.[屬性|方法]

注意：window能夠省略。

History 對象屬性

History 對象方法

使用length屬性，當前窗口的瀏覽歷史總長度，代碼以下：

<script type="text/javascript">
  var HL = window.history.length;
  document.write(HL);
</script>

 //=================================================================

返回前一個瀏覽的頁面

back()方法，加載 history 列表中的前一個 URL。

語法：

window.history.back();

好比，返回前一個瀏覽的頁面，代碼以下：

window.history.back();

注意：等同於點擊瀏覽器的倒退按鈕。

back()至關於go(-1),代碼以下:

window.history.go(-1);

//================================================

返回下一個瀏覽的頁面

forward()方法，加載 history 列表中的下一個 URL。

若是倒退以後，再想回到倒退以前瀏覽的頁面，則可使用forward()方法,代碼以下:

window.history.forward();

注意：等價點擊前進按鈕。

forward()至關於go(1),代碼以下:

window.history.go(1);

//==========================================================

返回瀏覽歷史中的其餘頁面

go()方法，根據當前所處的頁面，加載 history 列表中的某個具體的頁面。

語法：

window.history.go(number);

參數：

瀏覽器中，返回當前頁面以前瀏覽過的第二個歷史頁面，代碼以下：

window.history.go(-2);

注意：和在瀏覽器中單擊兩次後退按鈕操做同樣。

同理，返回當前頁面以後瀏覽過的第三個歷史頁面，代碼以下：

window.history.go(3);

//=========================================================================

Location對象

location用於獲取或設置窗體的URL，而且能夠用於解析URL。

語法:

location.[屬性|方法]

location對象屬性圖示:

location 對象屬性：

location 對象方法:

//=====================================================================

Navigator對象

Navigator 對象包含有關瀏覽器的信息，一般用於檢測瀏覽器與操做系統的版本。

對象屬性:

查看瀏覽器的名稱和版本，代碼以下:

<script type="text/javascript">
   var browser=navigator.appName;
   var b_version=navigator.appVersion;
   document.write("Browser name"+browser);
   document.write("<br>");
   document.write("Browser version"+b_version);
</script>

//======================================================================

userAgent

返回用戶代理頭的字符串表示(就是包括瀏覽器版本信息等的字符串)

語法

navigator.userAgent

幾種瀏覽的user_agent.，像360的兼容模式用的是IE、極速模式用的是chrom的內核。

使用userAgent判斷使用的是什麼瀏覽器(假設使用的是IE8瀏覽器),代碼以下:

function validB(){ 
  var u_agent = navigator.userAgent; 
  var B_name="Failed to identify the browser"; 
  if(u_agent.indexOf("Firefox")>-1){ 
      B_name="Firefox"; 
  }else if(u_agent.indexOf("Chrome")>-1){ 
      B_name="Chrome"; 
  }else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){ 
      B_name="IE(8-10)";  
  }
    document.write("B_name:"+B_name+"<br>");
    document.write("u_agent:"+u_agent+"<br>"); 
}

運行結果:

 

//========================================================================

screen對象

screen對象用於獲取用戶的屏幕信息。

語法：

window.screen.屬性

對象屬性:

//=============================================================

屏幕可用高和寬度

1. screen.availWidth 屬性返回訪問者屏幕的寬度，以像素計，減去界面特性，好比任務欄。

2. screen.availHeight 屬性返回訪問者屏幕的高度，以像素計，減去界面特性，好比任務欄。

注意:

不一樣系統的任務欄默認高度不同，及任務欄的位置可在屏幕上下左右任何位置，因此有可能可用寬度和高度不同。

咱們來獲取屏幕的可用高和寬度，代碼以下：

<script type="text/javascript">
document.write("可用寬度：" + screen.availWidth);
document.write("可用高度：" + screen.availHeight);
</script>

注意:根據屏幕的不一樣顯示值不一樣。

 

 //======================================================================

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程