1. 程式人生 > >progress載入進度條

progress載入進度條

<!DOCTYPE html>
<html> <head>
    <meta charset="gbk" />
    <title> progress元素的使用</title>
</head>

<p id="pTip">開始下載</p>
<progress value="0" max="100" id="proDownFile"></progress>
<input type="button" value="下載" onclick="Btn_Click();">

<script type="text/javascript">

    var intValue=0;
    var intTimer;
    var objPro=document.getElementById('proDownFile');
    var objTip=document.getElementById('pTip');
    //定時事件
    function Interval_handler(){
        intValue++;
        objPro.value=intValue;
        if(intValue>=objPro.max){
            clearInterval(intTimer);
            objTip.innerHTML="下載完成";
        }else{
            objTip.innerHTML="正在下載"+intValue+"%";
        }
    }
    function Btn_Click(){
        intTimer=setInterval(Interval_handler,100);
    }

</script>
</body></html>

相關推薦

progress載入進度

<!DOCTYPE html> <html> <head> <meta charset="gbk" /> <title> p

CSS3實現頁面載入進度

什麼情況下會使用到頁面載入進度條? 當頁面中的需要載入的內容很多,使用者直接進入則看不到任何內容,體驗不好,這個時候就需要使用到頁面載入的一個動畫,在頁面載入結束後再 顯示主體內容。 實現頁面載入進度條有哪幾種方式? 一般可分為兩種, 1.設定多少時間後顯示頁面, 2.根據頁面載入的文件狀態來實現

淺談前端實現頁面載入進度以及 nprogress.js 的實現

以前在 Vue 的專案用了 nprogress 這個外掛,一直對於其如何得知載入進度充滿好奇,最近又看到了「前端如何實現頁面載入進度條」這個問題,今天週六恰好一探究竟。以下僅為一家之言,如有異議,歡迎指出。 前端的頁面載入進度條有兩種 首先不得不說,前端的頁面載入進度條其實有兩種,所以你得先搞清楚說的是哪

頁面載入進度實現——readyState和onreadystatechange

document.readyState 屬性返回當前文件的狀態(載入中……)。 共有四種取值: 1,uninitialized - 還未開始載入  uninitialized  英 [ʌnɪ'nɪʃlaɪzd]  未初始化 2,loading

白鷺egret專案資源的loading,介面的顯示與載入進度:ProgressBar;

1.用egret建立一個空的euigame專案; 2.點選f5執行空的專案[他自帶了一個載入的txt顯示]; EE:資源太少,載入速度太快,童鞋們可能注意不到; 然後,我們在egretwing的資源路徑加如下倆資料夾; loading【放載入介面用的圖片】和Pic【放測試loa

自定義View載入進度首頁面

1.主頁面佈局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:

bootstrap progress 動態進度

html程式碼: <!--外層容器--> <div id="wrapper" style="padding-left: 20%;padding-right:20%"> <div class="progress progress-striped active"

Unity3D 場景切換載入進度實現

需要三個場景,場景A,場景B,場景C; 場景A:一個按鈕,點選載入場景B; 場景B:從A切換到C過度場景,載入進度條; 場景C:目標場景; 建立OnProgress.cs指令碼: using System.Collections; using System.Collections.Generic; usin

騰訊X5WebView+JsBridge互動及WebView載入進度效果實現

最近在專案開發中有不少頁面需要採用html的方式實現,自然而然就涉及到原生和js的互動問題,WebView也提供了addJavascriptInterface方法可以進行js的互動,實現也比較簡單,由於需要互動的地方比較多,還是沒有采用這種方式,使用了JsBridge第三方來實現,JsBridg

進入頁面載入進度

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

WPF 簡易耗時載入進度

本文實現了簡易的WPF載入進度條,其MVVM框架基於Caliburn.Micro 3.2.0,相關框架的知識請自行百度學習。 建立BaseViewModel基類,基類繼承自Caliburn.Micro的PropertyChangedBase類(該類實現了INotifyPropertyCha

慕課學習:常用的網頁載入進度

常用的網頁載入進度條 方法1(gif圖片,設定定時器) html中: <div class="loading"> <img class="pic"> </div> css中: .loading .pi

pace.js – 網頁自動載入進度外掛

之前有很多同學詢問覺唯網站頂部的頁面載入進度條是怎麼實現的,頁面的載入進度百分比,有時候獲取是比較麻煩的,當然也可以利用一些優秀的JavaScript外掛來實現,今天就為大家介紹這樣子的一款外掛:pace.js。 在頁面中引入Pace.js,頁面就會自動監測你的請求

Unity 非同步載入進度

1 public class View_LoadingScene : MonoBehaviour 2 { 3 //場景載入進度條物件 4 public GameObject loadingProgressBar; 5 //進度條元件 6

Unity非同步載入場景與載入進度

非同步載入場景分為A、B、C三個場景A場景是開始場景;B場景是載入場景(進度條載入顯示);C場景是目標場景在A場景中新增一個按鈕,觸發函式://非同步載入新場景 public void LoadNewS

給wkwebview頂部新增載入進度

本篇內容比較簡單,希望給iOS 新手學習,大神請勿吐槽!謝謝。 內容介紹: 1.在webview頂部新增一個進度條UIProgressView。 2.給webVIew新增一個監聽屬性“estima

淺談網站頭部載入進度的實現---NProgress

我們在移動端的瀏覽器上經常能看到頁面上方有一個進度條載入,pc端網頁也有,例如開啟我的github主頁:https://github.com/fzg2lj 點選導航欄上的stars,就會出現一個載入進度條。實現這種效果有兩種方式。 第一種:利用ajax全域性請求方式 程式碼如下

WKWebView載入進度(仿微信)

WKWebView添加了estimatedProgress屬性(double型別),我們可以利用該屬性來設定UIProgressView 為頁面新增UIProgressView屬性 @pro

IOS自定義圖片瀏覽器,支援瀏覽多張圖片,點選,雙擊,兩手指縮放操作,並顯示載入進度

圖片瀏覽器Controller的主要思路是:新建一個 JZAlbumViewController,在這個controller裡主要顯示一個UIScrollView,這個UIScrollView用來顯

android webview 載入顯示網頁載入進度的例子

1 增加許可權 <uses-permission android:name="android.permission.INTERNET"/> 2 主Activity package com.example.webview; import android.app.A