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实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
js 自动播放的实例代码
Nov 19 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
Jul 01 Javascript
js实现自定义路由
Feb 04 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
老生常谈jquery id选择器和class选择器的区别
Feb 12 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
详解js加减乘除精确计算
Mar 19 Javascript
通过实例讲解JS如何防抖动
Jun 15 Javascript
JS数据类型判断的几种常用方法
Jul 07 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
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
javascript中的变量作用域以及变量提升详细介绍
2013/10/24 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
python的Template使用指南
2014/09/11 Python
浅谈Python中range和xrange的区别
2017/12/20 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
python之super的使用小结
2018/08/13 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
python manage.py runserver流程解析
2019/11/08 Python
python 读取数据库并绘图的实例
2019/12/03 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
django 模型中的计算字段实例
2020/05/19 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
Hotels.com越南:酒店预订
2019/10/29 全球购物
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
预备党员党校学习自我评价分享
2013/11/12 职场文书
社区活动邀请函范文
2014/01/29 职场文书
个人求职信范例
2014/01/29 职场文书
2014世界杯球队球队口号
2014/06/05 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL