Javascript-對HTML5 標簽操作

Js操控----HTML5 <progress> 標簽

簡單模擬下下載進度跑條

<h4>加載進度</h4>
    <input type="button" value="下載" onclick="DownloadStart();" />
    <progress id="Download" value="" max="100"></progress>

    <script>
        function DownloadStart() {
            alert("加載下載")
            var Down = document.getElementById("Download");
            var i = 0;
            var DownSetTime;
            DownSetTime = setInterval(function () {
                i += 10
                Down.value = i;
                if (i == 100) {
                    clearInterval(DownSetTime);
                    alert("加載完成")
                }
            }, 500)
        }
       
    </script>

 當然了，真正的進度是肯定不能這樣寫的，因為實際上目前還沒有一種方法可以判斷進度的進程，因此只能讓跑條一直跑，或者跑到一個頂峰然后停着等下載完成，直接跳了100%。

例一：進度條跑到90，然后等，等服務器或者其他地方傳進來一個值，然后再一下子到100.

<h4>加載進度</h4>
    <input type="button" value="加載" onclick="LoadStart();" />
    <progress id="Load" value="0" max="100"></progress>

    <script>
        function LoadStart() {
            var Complete = 0;//加載完成與否，初始為0，完成為1
            var Load = document.getElementById("Load");//獲取進度條
            var i = 0;//聲明跑條的初始值

            //加載進度跑條
            LoadSetTime = setInterval(function () {
                i += 10;//每500毫米跑10份
                Load.value = i;
                if (i >= 90) {//當跑條到90時，就不跑了，停止
                    clearInterval(LoadSetTime);
                    return;
                }
            }, 500);

            //加載完成與否
            GetData = setInterval(function () {
                if (Complete == 1) {//當加載完成，也就等於1的時候
                    Load.value = 100;//跑條完成，到100
                    alert("加載完成");
                    clearInterval(GetData);//加載完成的計時器清除加載完成與否計時器
                    clearInterval(LoadSetTime);//加載完成的計時器清除加載進度跑條計時器
                }
            });

            //從服務器獲得加載內容完成與否的值，當然了你可以定義這個值從任何地方來，比如頁面加載完成，動畫加載完成，圖片加載完成，一個動作執行完畢等等都可以，具體看你需要用在的地方
            $.post(URL, function (data) {
                if (parseInt(data) == 1) {
                    Complete = 1;
                }
            })
        }
    </script>

 

例二：進度條一直跑，然后等，等服務器或者其他地方傳進來一個值，然后再一下子到100以后清除所有計時器，加載完成

    <h4>加載進度</h4>
    <input type="button" value="加載" onclick="LoadStart();" />
    <progress id="Load" value="0" max="100"></progress>

    <script>
        function LoadStart() {
            var Complete = 0;//加載完成與否，初始為0，完成為1
            var Load = document.getElementById("Load");//獲取進度條
            var i = 0;//聲明跑條的初始值

            //加載進度跑條
            LoadSetTime = setInterval(function () {
                i += 10;//每500毫米跑10份
                Load.value = i;
                if (i == 100) {
                    i = 0;
                }
            }, 500);

            //加載完成與否
            GetData = setInterval(function () {
                if (Complete == 1) {//當加載完成，也就等於1的時候
                    Load.value = 100;//跑條完成，到100
                    clearInterval(GetData);//加載完成的計時器清除加載完成與否計時器
                    clearInterval(LoadSetTime);//加載完成的計時器清除加載進度跑條計時器
                }
            });

            //從服務器獲得加載內容完成與否的值，當然了你可以定義這個值從任何地方來，比如頁面加載完成，動畫加載完成，圖片加載完成，一個動作執行完畢等等都可以，具體看你需要用在的地方
            $.post(URL, function (data) {
                if (parseInt(data) == 1) {
                    Complete = 1;
                }
            })
        }
    </script>

ok，簡單介紹下js操控“progress”標簽，具體看你用在什么地方。

 

作者：leona

原文鏈接：http://www.cnblogs.com/leona-d/p/5950280.html 

版權聲明：本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接