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 组合form元素为json格式,asp.net反序列化
Jul 09 Javascript
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
AngularJs页面筛选标签小功能
Aug 01 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 Javascript
Node.js log4js日志管理详解
Jul 31 Javascript
百度小程序之间的页面通信过程详解
Jul 18 Javascript
vue框架中props的typescript用法详解
Feb 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去除字符串换行符示例分享
2014/02/13 PHP
php 解压rar文件及zip文件的方法
2014/05/05 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
2018/08/08 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
Python面向对象特殊成员
2017/04/24 Python
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
django admin 添加自定义链接方式
2020/03/11 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
缅甸网上购物:Shop.com.mm
2017/12/05 全球购物
艺术应用与设计个人的自我评价
2013/11/23 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
2014年体育部工作总结
2014/11/13 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android