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 相关文章推荐
js左侧多级菜单动态的解决方案
Feb 01 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
Jun 18 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
May 12 Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 Javascript
js的回调函数详解
Jan 05 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
vue-music关于Player播放器组件详解
Nov 28 Javascript
Javascript中从学习bind到实现bind的过程
Jan 05 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 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
memcache命令启动参数中文解释
2014/01/13 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
PHP模板引擎Smarty的缓存使用总结
2014/04/24 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
讲解vue-router之什么是动态路由
2018/05/28 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
python双向链表实现实例代码
2013/11/21 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
python中scikit-learn机器代码实例
2018/08/05 Python
Python random模块的使用示例
2020/10/10 Python
基于Python实现粒子滤波效果
2020/12/01 Python
英国名牌男装店:Standout
2021/02/17 全球购物
酒店前台接待岗位职责
2013/12/03 职场文书
会计实习自我鉴定
2013/12/04 职场文书
二年级体育教学反思
2014/01/15 职场文书
纪念9.18事变演讲稿
2014/09/14 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
心术观后感
2015/06/11 职场文书
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP