js 蒙版进度条(结合图片)


Posted in Javascript onMarch 10, 2010
/******************** 
** js 蒙版进度条(图片) 
** dingzh@jstrd.com 
** 2009-12-03 
*********************/ //禁止网页后退 
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("提交", "确定", "保存", "暂存", "结账", "审核", "审批", "作废", "回退", "退回", "驳回", 
"退单", "撤消", "导入", "受理", "办理", "处理", "查询", "入库", "入账", "出库", "出账"); 
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; 
} */
Javascript 相关文章推荐
在JavaScript中实现命名空间
Nov 23 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 Javascript
jQuery $.data()方法使用注意细节
Dec 31 Javascript
动态加载dtree.js树treeview(示例代码)
Dec 17 Javascript
zepto.js中tap事件阻止冒泡的实现方法
Feb 12 Javascript
js+html5实现可在手机上玩的拼图游戏
Jul 17 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
Angular+Node生成随机数的方法
Jun 16 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
npm的lock机制解析
Jun 20 Javascript
javascript 事件查询综合 推荐收藏
Mar 10 #Javascript
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
Mar 09 #Javascript
Jquery替换已存在于element上的event的方法
Mar 09 #Javascript
JQery jstree 大数据量问题解决方法
Mar 09 #Javascript
Javascript Math ceil()、floor()、round()三个函数的区别
Mar 09 #Javascript
js 无提示关闭浏览器页面的代码
Mar 09 #Javascript
JS 无法通过W3C验证的处理方法
Mar 09 #Javascript
You might like
SSI指令
2006/11/25 PHP
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
PHP print类函数使用总结
2010/06/25 PHP
基于header的一些常用指令详解
2013/06/06 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
php生成无限栏目树
2017/03/16 PHP
JavaScript 学习初步 入门教程
2010/03/25 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
js html实现计算器功能
2018/11/13 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
2020/02/06 Javascript
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
python中二维阵列的变换实例
2014/10/09 Python
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
Python中格式化format()方法详解
2017/04/01 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
Python中的取模运算方法
2018/11/10 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
班主任评语大全
2014/04/26 职场文书
房产电话营销开场白
2015/05/29 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
狂人日记读书笔记
2015/06/30 职场文书
节约用水广告语60条
2019/11/14 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python
python析构函数用法及注意事项
2021/06/22 Python
关于Python中进度条的六个实用技巧分享
2022/04/05 Python