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 相关文章推荐
jQuery 表单验证扩展(四)
Oct 20 Javascript
kmock javascript 单元测试代码
Feb 06 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 Javascript
详解Vue之事件处理
Jul 10 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
Aug 28 Javascript
ant design 日期格式化的实现
Oct 27 Javascript
JS实现简单的九宫格抽奖
Jun 28 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
php中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
php中rename函数用法分析
2014/11/15 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
详解JS面向对象编程
2016/01/24 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
React组件refs的使用详解
2018/02/09 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
haskell实现多线程服务器实例代码
2013/11/26 Python
python实现基本进制转换的方法
2015/07/11 Python
关于反爬虫的一些简单总结
2017/12/13 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
浅谈Python 递归算法指归
2019/08/22 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
迎新生欢迎词
2015/01/23 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
医德医风自我评价2015
2015/03/03 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书
Python装饰器详细介绍
2022/03/25 Python
Nginx速查手册及常见问题
2022/04/07 Servers
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP
css3 选择器
2022/05/11 HTML / CSS