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 有用的脚本函数
May 07 Javascript
jquery对表单操作2
Apr 06 Javascript
通过location.replace禁止浏览器后退防止重复提交
Sep 04 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
纯javascript实现图片延时加载方法
Aug 21 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
js实现自定义进度条效果
Mar 15 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
Jan 02 Javascript
解决Vue打包之后文件路径出错的问题
Mar 06 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 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 xpath()函数讲解
2019/02/11 PHP
JScript中的条件注释详解
2015/04/24 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
python字符串替换示例
2014/04/24 Python
python3编写C/S网络程序实例教程
2014/08/25 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
python实现自动登录
2018/09/17 Python
Python循环结构的应用场景详解
2019/07/11 Python
python实现淘宝购物系统
2019/10/25 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
美国著名的团购网站:Woot
2016/08/02 全球购物
《二泉映月》教学反思
2014/04/15 职场文书
男女朋友协议书
2014/04/23 职场文书
2014年人民警察入党思想汇报
2014/10/12 职场文书
十岁生日答谢词
2015/01/05 职场文书
车位出租协议书范本
2016/03/19 职场文书
《和时间赛跑》读后感3篇
2019/12/16 职场文书
SpringBoot实现异步事件驱动的方法
2021/06/28 Java/Android
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫
oracle数据库去除重复数据
2022/05/20 Oracle
Python如何将list中的string转换为int
2022/07/15 Ruby