js 蒙版進度條(結(jié)合圖片)
更新時間:2010年03月10日 16:10:11 作者:
js 結(jié)合圖片實現(xiàn)的蒙版進度條效果。
復制代碼 代碼如下:
/********************
** js 蒙版進度條(圖片)
** dingzh@jstrd.com
** 2009-12-03
*********************/
//禁止網(wǎng)頁后退
window.history.forward(1);
document.attachEvent("onkeydown",docKeyDown);
function docKeyDown() {
//屏蔽退格刪除鍵
if (window.event.keyCode == 8) {
if(window.event.srcElement.type != "text"
&& window.event.srcElement.type != "textarea"
&& window.event.srcElement.type != "password") {
window.event.keyCode = 0x0;
return false;
} else if(window.event.srcElement.readOnly) {
window.event.keyCode = 0x0;
return false;
}
}
}
//加載進度條
var process_submit_doing = false;
try {
window.attachEvent("onload",doBodyLoad);
//document.attachEvent("onclick",doProcess);
window.attachEvent("onbeforeunload",doWinLoad);
} catch(e) {
document.addEventListener("onclick",doProcess,false);
window.addEventListener("onbeforeunload",doWinLoad,false);
}
//
function doBodyLoad() {
var obj;
var vInput=document.getElementsByTagName("INPUT");
for(var i in vInput) {
obj=vInput[i];
if(obj.type=="button" || obj.type=="submit") {
obj.attachEvent("onclick",doProcess);
}
}
vInput=document.getElementsByTagName("IMG");
for(var i in vInput) {
obj=vInput[i];
if(undefined != obj.alt) {
obj.attachEvent("onclick",doProcess);
}
}
}
//
function doWinLoad() {
process_submit_doing = true;
}
//
function doProcess() {
//是否正在提交
if(!process_submit_doing) {
return;
}
//
var showProcess = false;
//捕獲事件源
var eventObj = event.srcElement;
var btnvalue = "";
if(eventObj.tagName=='INPUT') {
btnvalue = eventObj.value;
} else if(eventObj.tagName=='IMG') {
if(null != eventObj.alt && "" != eventObj.alt) {
btnvalue = eventObj.alt;
} else {
btnvalue = eventObj.title;
}
}
btnvalue = btnvalue.replace(/ */g,"").replace(/ */g,"");
//
var my_array = new Array();
my_array.unshift("提交", "確定", "保存", "暫存", "結(jié)賬", "審核", "審批", "作廢", "回退", "退回", "駁回",
"退單", "撤消", "導入", "受理", "辦理", "處理", "查詢", "入庫", "入賬", "出庫", "出賬");
for (i = 0; i < my_array.length; i++) {
if(new RegExp(my_array[i],"ig").test(btnvalue)) {
showProcess = true;
break;
}
}
//alert(showProcess);
//不顯示進度條
if(!showProcess) {
return;
}
//
createProcessBgDiv();
}
function nocontextmenu()
{
event.cancelBubble = true
event.returnValue = false;
return false;
}
function norightclick()
{
if (event.button == 2 || event.button == 3)
{
event.cancelBubble = true
event.returnValue = false;
return false;
}
}
//頁面蒙版
function createProcessBgDiv()
{
var h=document.body.scrollHeight;
var w=document.body.scrollWidth;
var div=document.createElement("<div id='divProcessBg' style='position:absolute;visibility:visible;background:gray;filter:alpha(opacity=30);z-index:1000;left:0;top:0;width:"+w+"px;height:"+h+"px;'></div>");
//div.appendChild(document.createTextNode("xxxxxxxxxxxxxxxxxxxx"));
div.appendChild(document.createElement("<iframe src='javascript:false' style='position:absolute; visibility:inherit; top:0px; left:0px; width:"+w+"px;height:"+h+"px; z-index:-1; filter=\"progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)\";'></iframe>"));
document.body.appendChild(div);
document.body.appendChild(document.createElement("<div style='position:absolute;z-index:1002;left:0;top:0;width:"+w+"px;height:"+h+"px;background:url(/upload/2010-3/20100310161010599.gif) no-repeat center center;'></div>"));
//屏蔽鼠標右鍵
document.oncontextmenu = nocontextmenu; // for IE5+
document.onmousedown = norightclick; // for all others
}
/*function delProcessBgDiv()
{
document.body.removeChild(document.getElementById("divProcessBg"));
document.onmousedown = null;
} */
相關文章
微信小程序?qū)崿F(xiàn)點擊導航標簽滾動定位到對應位置
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)點擊導航標簽滾動定位到對應位置,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-11-11JavaScript檢測并限制復選框選中個數(shù)的方法
這篇文章主要介紹了JavaScript檢測并限制復選框選中個數(shù)的方法,涉及javascript針對復選框的判定與運算相關技巧,非常簡單實用,需要的朋友可以參考下2015-08-08JS中國標準時間轉(zhuǎn)化為年月日時分秒'yyyy-MM-dd hh:mm:ss'的示例詳解
這篇文章主要介紹了JS中國標準時間轉(zhuǎn)化為年月日時分秒‘yyyy-MM-dd hh:mm:ss‘的相關知識,通過示例代碼介紹了,Js各種時間轉(zhuǎn)換問題(YYYY-MM-DD 時間戳 中國標準時間),需要的朋友可以參考下2024-02-02簡單通過settimeout看javascript的運行機制
這篇文章主要給大家介紹了關于如何通過settimeout看javascript的運行機制的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用javascript具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧2019-05-05