網頁中JS函式自動執行的方法

阿新 • • 發佈：2019-01-17

網頁中JS函式自動執行的三種方法

實現網頁中的圖片輪播要求：
在頁面中顯示一組圖片，預設顯示第一張，每隔n秒換一張圖片

在body標籤中使用onload<body onload="method()">

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>圖片輪播</title>
    <script type="text/javascript">
       function start() {
           var 
 img01 = document.getElementById("img01");
           var ary = ["1.jpeg", "2.jpeg", "3.jpeg", "4.jpeg",
               "5.jpeg", "6.jpeg" ];
           var index = 0;
           window.setInterval(function(){
               img01.src = "images/" + ary[index++%ary.length];
               //0 1 2 3 4 5, 6 7 8 9  ... 

               //0 1 2 3 4 5  0 1 2 3 ...
           }, 2000)
       }

    </script>
</head>
<body onload="start()">
    <h1>圖片輪播</h1>
<img id="img01" src="img/1.jpeg" height="500" />
</body>
</html>

在指令碼中使用window.onload

<!DOCTYPE html>
<html>
<head 
>
    <meta charset="UTF-8">
    <title>圖片輪播</title>
    <script type="text/javascript">
       window.onload= function start() {
           var img01 = document.getElementById("img01");
           var ary = ["1.jpeg", "2.jpeg", "3.jpeg", "4.jpeg",
               "5.jpeg", "6.jpeg" ];
           var index = 0;
           window.setInterval(function(){
               img01.src = "images/" + ary[index++%ary.length];
               //0 1 2 3 4 5, 6 7 8 9  ...
               //0 1 2 3 4 5  0 1 2 3 ...
           }, 2000)
       }

    </script>
</head>
<body >
    <h1>圖片輪播</h1>
<img id="img01" src="img/1.jpeg" height="500" />
</body>
</html>

在頁面先宣告在頁面底部呼叫方法
瀏覽器是從上到下依次載入並解析頁面的，所以載入到head時，body並沒有被解析，瀏覽器會等到js執行完成之後再載入頁面，所以方法的執行要放在頁面底端。
如果直接在head中的script中直接加入start()，那麼img01=null


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖片輪播</title>
<style type="text/css">
div {
    margin: 0 auto;
    text-align: center;
}
</style>
<script type="text/javascript">
function start(){
    var img01 = document.getElementById("img01");
    var ary = ["1.jpeg", "2.jpeg", "3.jpeg", "4.jpeg", 
                                "5.jpeg", "6.jpeg" ];
    var index = 0;

    window.setInterval(function(){

        img01.src = "images/" + ary[index++%ary.length]; 
                        //0 1 2 3 4 5, 6 7 8 9  ...
                        //0 1 2 3 4 5  0 1 2 3 ...

    }, 2000)
}
</script>
</head>
<body>
    <div>
        <h1>圖片輪播</h1>
        <img id="img01" src="images/1.jpeg" height="500" />
    </div>
</body>
</html>
<script type="text/javascript">
start();
</script>

網頁中JS函式自動執行的方法

網頁中JS函式自動執行的三種方法實現網頁中的圖片輪播要求：在頁面中顯示一組圖片，預設顯示第一張，每隔n秒換一張圖片在body標籤中使用onload<body onload="meth

JS中Math函式的常用方法

Math 是數學函式，但又屬於物件資料型別 typeof Math => ‘object’ console.dir(Math) 檢視Math的所有函式方法。 1，Math.abs() 獲取絕對值 Math.abs(-12) = 12 2，Math.cei

python解析網頁中js動態添加的內容

pytho log hive .cn article gree html .com .html https://www.cnblogs.com/asmblog/archive/2013/05/07/3063809.html https://www.zhihu.com/q

第150天：網頁中插入百度地圖方法

function 復制 lbs 提交應該頁面 sap create 定位在現在的很多頁面中，都運用到了百度地圖來定位，例如：像這樣的地圖，我們可以通過手動來進行放大、縮小、移動等來查找具體的地址，特別方便，在頁面上引用也顯得頁面很有特點，那麽，應該怎麽樣來制作這種

第151天：網頁中插入百度地圖方法（不需要密鑰）

ack 定義 text tran 3.5 index rand lbs adding 今天分享一個在網頁中插入百度地圖的方法，不需要密鑰哦，前兩天，我試了好多次百度開發平臺上使用百度地圖的方法，都需要申請密鑰，申請了，還是用不了，後來，終於發現了一個不需要密鑰的方法，希望對

Opencv中copyTo()函式的使用方法

https://www.cnblogs.com/phoenixdsg/p/8420716.html 在Mat矩陣類的成員函式中copyTo(roi , mask)函式是非常有用的一個函式，尤其是後面的mask可以實現蒙版的功能，我們用幾個例項來說明它的作用。我們要注意mask的資料型別，必須是C

C#類繼承中建構函式的執行序列

不知道大家在使用繼承的過程中有木有遇到過呼叫建構函式時沒有按照我們預期的那樣執行呢？一般情況下，出現這樣的問題往往是因為類繼承結構中的某個基類沒有被正確例項化，或者沒有正確給基類建構函式提供資訊，如果理解在物件生命週期的這個階段發生的事情，將更利於解決此類問題。為了例項化派生的類，必須先例項化它的基類。而

JS延時執行方法封裝

SetTimeout延時操作封裝 setTimeout定時器操作，需要注意清除即可。 SetTimeout延時執行function /** @ function:延時執行function @ fn:

Numpy中sum函式的使用方法（Python自帶sum函式）

Numpy中sum函式（Python自帶sum函式）的作用是對元素求和。無參時，所有全加； axis=0，按列相加； axis=1，按行相加；下邊通過例子來說明其用法： #!/usr/bin/env python # -*- coding:utf-8 -*-

linux中stat函式和使用方法

stat 函式講解表頭檔案: #include <sys/stat.h> #include <unistd.h> 定義函式: int stat(const char *file_name, struct

MySQL中group_concat()函式的排序方法

group_concat()函式的引數是可以直接使用order by排序的。666。。下面通過例子來說明，首先看下面的t1表。比如，我們要檢視每個人的多個分數，將該人對應的多個分數顯示在一起，分數要從高到底排序。可以這樣寫： SELECT username,GROU

Java中建構函式過載和方法過載

原始碼 class Tree { int height; Tree() { prt("Planting a seeding"); height = 0; } Tree(int i)

C# winForm webBrowser頁面中js呼叫winForm類方法

有時我們在winform專案中嵌入了網頁，想通過html頁面呼叫後臺方法，如何實現呢？其實很簡單，主要有三部： 1、在被呼叫方法類上加上[ComVisible(true)]標籤，意思就是當前類可以com元件的形式供外包呼叫 2、在webBrowser控制元件中設定可被h

一個jsp中用esayui dialog 彈出另一個jsp,並操作另一個jsp中js的變數和方法

直接上程式碼： var title=tag.replace(/<span.*?>/,"").replace(/<\/span>/,""); $('body').append("<div id='standardDialog'>

在Solaris 10中設定開機自動執行的任務

進入對應目錄： # cd /etc/rc3.d 建立一個S？？（S開頭加兩位數字）的獨立檔案，把許可權chmod 744，檔案賬戶屬性chown root:sys，然後在檔案中輸入相應內容： # vi S88dhcpv6 ifconfig e1000g

java web程式啟動自動執行方法（spring）

場景：將web專案部署到tomcat後，啟動tomcat後自動執行程式重的某個方法。環境：spring、springmvc 直接新建一個controller類，讓該類實現ApplicationLis

Excel中Sumproduct函式的使用方法

6.單條件求和——統計成都發貨平臺的發貨量。 =sumproduct((A2:A13="成都發貨平臺")*(B2:B13)) 看到這公式你可能有疑惑，它跟語法格式好像不一樣，其實把它看做是隻有一個引數。因為當函式中出現由TRUE和FALSE組成的邏輯陣列時，這時公式要寫成這種格式=sumproduct((A

database中的函式及查詢方法

常用函式： 1、lower(將所選欄位結果轉換為小寫) 如：SELECT userId,LOWER(username) from user 2、upper(將所選欄位結果轉換為大寫) 如：SELECT userId,UPPER(username) from user 3

perl中sprintf函式的使用方法。

對於某些字串，需要輸入為特定的格式，通過sprintf可以很方便的完成，不需要專門進行其他處理。 perl中的sprintf的用法如下： sprintf FORMAT, LIST 比如： $result = sprintf("%08d",$number);讓$numb

window.print()列印網頁中指定內容的實現方法

方法一：正常情況下的列印是使用 window.print(); 直接整頁列印，但如果需要列印網頁中定義的部分內容，則可使用如下的方法： 1、在頁面的程式碼頭部處加入JavaScript： <script language=javascript> functio

網頁中JS函式自動執行的方法

網頁中JS函式自動執行的三種方法

相關推薦