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页面添加到收藏夹的简单方法
Aug 07 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
Bootstrap对话框使用实例讲解
Sep 24 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
bootstrap switch开关组件使用方法详解
Aug 22 Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
浅析js实现网页截图的两种方式
Nov 01 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中截取字符串支持utf-8
2007/01/18 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
php实现插入排序
2015/03/29 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
JS实现可改变列宽的table实例
2013/07/02 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
python绘制双柱形图代码实例
2017/12/14 Python
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
jupyter 导入csv文件方式
2020/04/21 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
酒店门卫岗位职责
2013/12/29 职场文书
汽车维修专业个人求职信范文
2014/01/01 职场文书
村庄绿化方案
2014/05/07 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
硕士论文致谢范文
2015/05/14 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
浅谈@Value和@Bean的执行顺序问题
2021/06/16 Java/Android
mysql查询结果实现多列拼接查询
2022/04/03 MySQL