js 蒙版进度条(结合图片)

代码如下:

/********************
** 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;
} */

(0)

相关推荐

  • JavaScript实现网页加载进度条代码超简单

    网页进度条能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程.但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果. HTML 首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小.所以我们无法通过数据大小来实现0-100%的加载显示过程. 因此我们需要通过html代码逐行加载的特性,在整页代码的若干个跳跃行数中设置节点,进行

  • js 异步处理进度条

    1.先上图,效果如下: 2.使用方法 复制代码 代码如下: var loader=new Ajaxloader(this._ContentID,{Text:'loading......',Top:50}); loader.Show(); 3.代码列出: 复制代码 代码如下: /* 处理进度条,异步加载器 */ var Ajaxloader=new Class(); Ajaxloader.prototype= { Text:'数据加载中......', Parent:null, Left:0, T

  • Extjs实现进度条的两种便捷方式

    做Extjs开发中,往往后台程序可能要执行一段时间才能得到返回结果,加入进度条可以提高客户体验度,以下为两种便捷的方式: 1.提交数据前用Ext.Msg.wait('提示','正在处理数据,请稍候');弹出等待条,数据处理成功后用Ext.Msg.hide();将等待去掉,例如: Ext.Msg.wait('提示','正在处理数据,请稍候'); 复制代码 代码如下: Ext.Ajax.request({ url:'DataAction.ashx?method=update', params:{It

  • JS实现环形进度条(从0到100%)效果

    最近公司项目中要用到这种类似环形进度条的效果,初始就从0开始动画到100%结束.动画结果始终会停留在100%上,并不会到因为数据的关系停留在一半. 如图 代码如下 demo.html <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=

  • JS 进度条效果实现代码整理

    第一种方法:Loading.js 复制代码 代码如下: //频率 var frequency = 50; //步长 var step = 3; //背景颜色 var loadingBgcolor = "#ffffff"; //宽度 var loadingWidth = 354; /* *参数说明: *content:显示内容,可以为空: *imageURL:将引用JS文件的路径设置即可: *left:进度条显示位置left *top:进度条显示位置top */ function Loa

  • js实现进度条的方法

    本文实例讲述了js实现进度条的方法.分享给大家供大家参考.具体实现方法如下: 1.setTimeout和clearTimeout <html> <head> <title>进度条</title> <style type="text/css"> .container{ width:450px; border:1px solid #6C9C2C; height:25px; } #bar{ background:#95CA0D; f

  • 原生javascript模仿win8等待提示圆圈进度条

    一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简单介绍 原生javascript编写,需要理解js基于面向对象编程和圆形坐标计算! 实现原理:把每个圆点抽象成一个对象(ProgressBarWin8类型),将每个圆点对象存在数组中(progressArray),延迟执行每个圆点对象的run方法,至于圆点运行速度越来越快,是通过改变定时器延迟毫秒数

  • js 蒙版进度条(结合图片)

    复制代码 代码如下: /******************** ** js 蒙版进度条(图片) ** dingzh@jstrd.com ** 2009-12-03 *********************/ //禁止网页后退 window.history.forward(1); document.attachEvent("onkeydown",docKeyDown); function docKeyDown() { //屏蔽退格删除键 if (window.event.keyCod

  • JS实现进度条动态加载特效

    本文实例为大家分享了JS实现进度条动态加载的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>进度条</title> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"

  • JS实现进度条顺滑版详细方案

    进度条不顺滑 相信大多前端同学都自己写过音频.视频播放器,实现并不复杂.最近在小程序里,做了一个类似微博刷视频的需求.其中有一部分功能需要实现自定义进度条,在做完第一版之后发现进度条不顺滑,而后想查查网上看有没有什么好的方案,但最终没找到合适的.于是想看看微信小程序里的"微博"进度条如何,结果也是很生硬的动画,下面放了一个GIF,大家也可以自己搜索微信小程序的微博,找个视频看看效果. 常规方案 最终决定还是优化一下这个问题,先来捋一捋我们现有常规方案. 监听TimeUpdate事件 获

  • Vue中使用js制作进度条式数据对比动画

    本文实例为大家分享了Vue中使用js制作进度条式数据对比动画的具体代码,供大家参考,具体内容如下 实现的效果:(初始化以及浏览器resize的时候两侧的条形为向两侧递增的动画,其中两端的数字也是递增的动画) HTML部分: <div class="no-ivatargo-chart-b">   <div class="investment-ability">     <div class="title">  

  • js实现带进度条提示的多视频上传功能

    本文实例为大家分享了js带进度条上传多视频的具体代码,供大家参考,具体内容如下 效果: 引用: <link rel="stylesheet" href="bootstrap.css" rel="external nofollow" > <script src="jquery.fileupload.js"></script> <script src="http://malsup

  • 基于 D3.js 绘制动态进度条的实例详解

    D3 是什么 D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的.如果你不知道什么是 JavaScript ,请先学习一下 JavaScript,推荐阮一峰老师的教程. JavaScript 文件的后缀名通常为 .js,故 D3 也常使用 D3.js 称呼.D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度.由于

  • js实现简单进度条效果

    本文实例为大家分享了js实现简单进度条的具体代码,供大家参考,具体内容如下 实现进度条需要三个部分: 1.外部的大容器 2.在增长的进度条 3.显示进度条可视化的百分数 运用js控制进度条的width便可实现; 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>

  • js实现滑动进度条效果

    本文实例为大家分享了js实现滑动进度条效果的具体代码,供大家参考,具体内容如下 进度条: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>js滑动进度条效果</title> <style> *{margin:0;padding:0;user-select:none;} .progress-bar{position:relativ

  • Android实现个性化的进度条

    1.案例效果图 2.准备素材 progress1.png(78*78) progress2.png(78*78) 3.原理 采用一张图片作为ProgressBar的背景图片(一般采用颜色比较浅的).另一张是进度条的图片(一般采用颜色比较深的图片).进度在滚动时:进度图片逐步显示,背景图片逐步隐藏,达到上面的效果. 4.灵感来自Android控件提供的源码 4.1 默认带进度的进度条,如下图 <ProgressBar android:id="@+id/progressBar2" s

随机推荐