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选择器大全 全面详解jquery选择器
Mar 06 Javascript
JavaScript中switch语句的用法详解
Jun 03 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
js实现倒计时及时间对象
Nov 15 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
Aug 28 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
浅谈vue权限管理实现及流程
Apr 23 Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 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缓存类代码(附详细说明)
2011/06/09 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
深入解析Python中的urllib2模块
2015/11/13 Python
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
2019/08/01 HTML / CSS
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
教师党员思想汇报
2014/01/06 职场文书
工艺员岗位职责
2014/02/11 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
授权委托书
2015/01/28 职场文书
Golang: 内建容器的用法
2021/05/05 Golang
Go timer如何调度
2021/06/09 Golang