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:ajax实现翻页无刷新功能代码
Aug 05 Javascript
JS父页面与子页面相互传值方法
Mar 05 Javascript
js实现鼠标经过时图片滚动停止的方法
Feb 16 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
Bootstarp基本模版学习教程
Feb 01 Javascript
基于js中的原型(全面讲解)
Sep 19 Javascript
JavaScript经典案例之简易计算器
Aug 24 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
解决Element中el-date-picker组件不回填的情况
Nov 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
在PHP中操作Excel实例代码
2010/04/29 PHP
php中time()和mktime()方法的区别
2013/09/28 PHP
php防止SQL注入详解及防范
2013/11/12 PHP
PHP MYSQL简易交互式站点开发
2016/12/27 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
jQuery Ajax之load()方法
2009/10/12 Javascript
jQuery checkbox全选/取消全选实现代码
2009/11/14 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
浅谈js闭包理解
2019/03/28 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
简单解析Django框架中的表单验证
2015/07/17 Python
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
Django用户认证系统 User对象解析
2019/08/02 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
python画环形图的方法
2020/03/25 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
html5 标签
2009/07/16 HTML / CSS
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
采购部经理岗位职责
2014/02/10 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
sql字段解析器的实现示例
2021/06/23 SQL Server