jquery書寫的等待進度條
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery簡單進度</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> #load { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #004400; opacity: 0.5; z-index: 300; display: none; } #loadgif { position:fixed; top:50%; left:40%; width:300px; z-index:300; display:none; } span{ color:#000000; font-size:18px; font-family:'microsoft YaHei'; text-align:center; font-weight:bold; } </style> <script type="text/javascript" src="js/jquery-2.0.3.js"> </script> </head> <body> <div style="width:100%;height:100px;background-color: #2B426B;"> <button id="sendnowbut"> 立即傳送</button> </div> <div id="load"></div> <div id="loadgif"> <div><span>郵件傳送中,請稍後<span id="11">.</span></span></div> </div> <script type="text/javascript"> //點選立即傳送開始遮罩 $("#sendnowbut").click(function(){ $("#load").css("display", "block"); $("#loadgif").css("display", "block"); setInterval("write()",1000); ; }); //關閉遮罩(根據後臺返回值,關閉遮罩) $("#close_btn").click(function(){ $("#load").css("display", "none"); $("#loadgif").css("display", "none"); }) //寫入省落號 function write(){ var length = $("#11").text().length+1; if(1==length){ $("#11").html("."); } if(2==length){ $("#11").html(".."); } if(3==length){ $("#11").html("..."); } if(4==length){ $("#11").html("...."); } if(5==length){ $("#11").html("....."); } if(6==length){ $("#11").html("......"); } if(7==length){ $("#11").html("."); } } </script> </body> </html>
相關推薦
jquery書寫的等待進度條
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
11 Jquery UI Progressbar 進度條插件
ima 技術分享 isp splay -i display ack round wid 11 Jquery UI Progressbar 進度條插件
等待進度條---三個圓點一排間隔放大縮小動畫
public class ProgressUtils { View dialogview; private ImageView iamge1,iamge2,iamge3; Dialog progress ; public Prog
等待對話方塊(網路請求等待進度條效果)
一、建立圓角圖片(作為對話方塊的背景) 1.建立drawable檔案(若沒有該檔案),在其下建立Android的xml檔案(名稱progress_bg.xml) 2.直接上程式碼 <?xml
jquery網頁載入進度條NProgress.js
NProgress.js是極細的納米級進度條,用現實的細線條動畫讓使用者看到網頁正在發生的事情! 你也許已經在 Youtube 上看過了那道紅色鐳射脈衝,它會在你切換頁面時出現。其實許多移動瀏覽器的進度條都是這個樣式,但是在網頁上實現可不多見。不過,有了
jquery 簡單的進度條實現程式碼
效果圖 需要用到的圖片: 背景圖片: 進度顯示圖片: 網頁結構: 複製程式碼 程式碼如下: <div id="center"> <div id="message"></div> <div id="loading">
jQuery實現的進度條效果
[JavaScript]程式碼 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>進度條效果</title> <s
異步上傳文件(jquery.form)+進度條+上傳到ftp服務器
query timeout -m serve 默認 lin org 8.0 span 最近寫了一個小項目需要上傳文件顯示進度條到ftp,總結一下分享 我用的是jQuery.form.js上傳 ftp服務器,自己百度去搭建很簡單的 Talk is cheap.Show
Qt編寫自定義控制元件32-等待進度條控制元件
一、前言 在各種各樣的執行任務介面,有時候需要比較多的時間,需要給出一個直觀的等待進度條表示當前正在執行的進度,而不至於懵逼在那裡
Jquery實現可拖動進度條
div overflow 20px ext pan 點擊 技術分享 img ani html <div class="progress"> <div class="progress_bg">
基於Jquery插件Uploadify實現實時顯示進度條上傳圖片
準備 深入學習 pla 回調 true bar put and 分割 網址:http://www.jb51.net/article/83811.htm 這篇文章主要介紹了基於Jquery插件Uploadify實現實時顯示進度條上傳圖片的相關資料,感興趣的小夥伴們可
基於Jquery的音樂播放器進度條插件
默認參數 豆瓣 arw div clas type 重置 示例 app 自己基於豆瓣FM的ui仿寫qq音樂時,基於Jquery手寫的進度條插件,效果圖如下: 主要特色: ① 可自適應掛載元素的寬度,也可以自己設置進度條寬度; ② 支持部分默認參
jquery 實現拖動文件上傳加進度條
進行 con pos rip file round 默認 dex toupper 通過對文件的拖動實現文件的上傳,主要用到的是HTML5的ondrop事件,上傳內容通道FormData傳輸: //進度條 <div class="parent-dlg" >
HTML5 jQuery+FormData 非同步上傳檔案,帶進度條
利用jQuery和html5的FormData非同步上傳檔案的好處是: 實現很簡單很方便地支援進度條很方便地進行擴充套件和美化 先看看效果圖: 圖片上傳後的結果: 實現步驟如下: 第二步:上傳頁面的html程式碼: [html] view plain
使用Jquery開源外掛實現檔案上傳(帶進度條)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <
上傳外掛,較輕量級,帶進度條 jquery.uploadify
jquery.uploadify+upload.js upload.js//附件的路徑 var adjunctPath=''; //附件上傳失敗則不能儲存 var canSubmit=true;
Jquery 定時器 聯合 bootStarp 進度條
DIv樣式 <div id= "inner_stop" class="progress progress-striped active" style= "width: 50%;margin: auto;"> <div id="inner" class="progress-bar progr
JQuery UI之(六)進度條——Progressbar
一、前言 進度條可以向用戶顯示程式當前完成的百分比,讓使用者知道程式的進度,提高了使用者體驗。 二、最簡單的例子 首先引入樣式和js庫: <link type="text/css" rel="S
Android進度條/等待載入——旋轉小圓點效果
進度條/等待載入——旋轉小圓點效果 1 效果圖 靜態圖片看不出效果,隨後更新文章,附上github地址。 2、思想 12個小圓點疊放(i=0,1,...11) 動畫一:依次從0度旋轉到30*i度 動畫二:依次從30*i度旋轉到360度 因為不
css+jquery步驟進度條
<!doctype html> <html> <head> <meta charset="utf-8"> <title>progressbar</title> <style> .progre