注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

88AVI-WEBZONE8-天空网

是金子总要发光的,但是当满地都是金子的时候,我自己也不知道自己是哪颗了

 
 
 

日志

 
 
关于我

两个人交谈,一个人可以洗耳恭听。但是,三个人则无法互谈这人世最严肃而应深究的事。 我们应该注意自己不用语言去伤害别的同志,但是,当别人用语言来伤害自己的时候,也应该受得起。 要对别人隐瞒我们知识的局限,最可靠的方法就是不要越过那界限。 不登高山,不知天之高也,不临深溪,不知地之厚也。 不飞则已,一飞冲天,不鸣则已,一鸣惊人!!!!!

网易考拉推荐

进度条(多种方法效果)  

2008-04-13 12:49:15|  分类: 效果 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

<HTML>
<HEAD>
  <TITLE>BetsLoveSky-王殿臣</TITLE>
</HEAD>
<BODY STYLE="FONT-SIZE: 10pt; FONT-FAMILY: Verdana, Arial, Helvetica">
<SCRIPT LANGUAGE="JScript">
var NUMBER_OF_REPETITIONS = 40;
var nRepetitions = 0;
var g_oTimer = null;
function startLongProcess()
{
  divProgressDialog.style.display = "";
  resizeModal();
  btnCancel.focus();
  // Add a resize handler for the window
  window.onresize = resizeModal;
  // Add a warning in case anyone tries to navigate away or refresh the page
  window.onbeforeunload = showWarning;
  //
  // Here's where you would normally kick off a long asynchronous process
  // like a file download or a remote database operation. Here, we use
  // our "long process" to simulate this process.
  //
  continueLongProcess();
}
function updateProgress(nNewPercent)
{
  // Update our pseudo progress bar
  divProgressInner.style.width = (parseInt(divProgressOuter.style.width)
    * nNewPercent / 100)+ "px";
}
function stopLongProcess()
{
  if (g_oTimer != null)
  {
    // Clear the timer so we don't get called back an extra time
    window.clearTimeout(g_oTimer);
    g_oTimer = null;
  }
  // Hide the fake modal DIV
  divModal.style.width = "0px";
  divModal.style.height = "0px";
  divProgressDialog.style.display = "none";
  // Remove our event handlers
  window.onresize = null;
  window.onbeforeunload = null;
  nRepetitions = 0;
}
function continueLongProcess()
{
  if (nRepetitions < NUMBER_OF_REPETITIONS)
  {
    // Set the timeout somewhere between 0 and .25 seconds
    var nTimeoutLength = Math.random() * 250;
    updateProgress(100 * nRepetitions / NUMBER_OF_REPETITIONS);
    g_oTimer = window.setTimeout("continueLongProcess();", nTimeoutLength);
    nRepetitions++;
  }
  else
  {
    stopLongProcess();
  }
}
function showWarning()
{
  //Warn users before they refresh the page or navigate away
  return "Navigating to a different page or refreshing the window could cause you to lose precious data.\n\nAre you*absolutely* certain you want to do this?";
}
function resizeModal()
{
  // Resize the DIV which fakes the modality of the dialog DIV
  divModal.style.width = document.body.scrollWidth;
  divModal.style.height = document.body.scrollHeight;
  // Re-center the dialog DIV
  divProgressDialog.style.left = ((document.body.offsetWidth -
divProgressDialog.offsetWidth) / 2);
  divProgressDialog.style.top = ((document.body.offsetHeight -
divProgressDialog.offsetHeight) / 2);
}
</SCRIPT>
<INPUT TYPE="BUTTON" VALUE="Click Me!" onclick="startLongProcess();">
<!-- BEGIN PROGRESS DIALOG -->
<DIV STYLE="BORDER: buttonhighlight 2px outset; FONT-SIZE: 8pt; Z-INDEX:
4; FONT-FAMILY: Tahoma; POSITION: absolute; BACKGROUND-COLOR: buttonface;
DISPLAY: none; WIDTH: 350px; CURSOR: default" ID="divProgressDialog"
onselectstart="window.event.returnValue=false;">
  <DIV STYLE="PADDING: 3px; FONT-WEIGHT: bolder; COLOR: captiontext;
BORDER-BOTTOM: white 2px groove; BACKGROUND-COLOR: activecaption">
    Downloading Requested Document
  </DIV>
  <DIV STYLE="PADDING: 5px">
    Please wait while I download the document you requested.
  </DIV>
  <DIV STYLE="PADDING: 5px">
    This may take several seconds.
  </DIV>
  <DIV STYLE="PADDING: 5px">
      <DIV ID="divProgressOuter" STYLE="BORDER: 1px solid threedshadow;
WIDTH: 336px; HEIGHT: 15px">
        <DIV ID="divProgressInner" STYLE="COLOR: white; TEXT-ALIGN:
center; BACKGROUND-COLOR: infobackground; MARGIN: 0px; WIDTH: 0px; HEIGHT:
13px;"></DIV>
      </DIV>
  </DIV>
  <DIV STYLE="BORDER-TOP: white 2px groove; PADDING-BOTTOM: 5px; PADDING-TOP: 3px;
BACKGROUND-COLOR: buttonface; TEXT-ALIGN: center">
      <INPUT STYLE="FONT-FAMILY: Tahoma; FONT-SIZE: 8pt" TYPE="button"
ID="btnCancel" onclick="stopLongProcess();" VALUE="Cancel">
  </DIV>
</DIV>
<!-- END PROGRESS DIALOG -->
<!-- BEGIN FAKE MODAL DIV-->
<DIV ID="divModal"
  STYLE="BACKGROUND-COLOR: white; FILTER: alpha(opacity=75); LEFT: 0px; POSITION:
absolute; TOP: 0px; Z-INDEX: 3"
  onclick="window.event.cancelBubble=true; window.event.returnValue=false;">
</DIV>
<!-- END FAKE MODAL DIV -->
</HTML>

====================================================================================

<html>
<head>
<title>BetsLoveSky-王殿臣 渐变效果进度条</title>
<script language="javascript">
 var i;
 function go()
 {
  bar_width = document.getElementById("bg").clientWidth;
  i = bar_width;
  setTimeout('start();',300);
 }
 function start()
 {
  if(i-->0)
  {
   ps.style.width = i;
   bn.innerHTML = Math.floor((bar_width-i)/bar_width*100)+"%";
   setTimeout('start();',20);
  }
 }
 
</script>
<style type="text/css">
#bg {
filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=1, StartColorStr=#FFFF00, EndColorStr=#FF0000);
width:300px;
height:20px;
border:1px solid black;
z-index:0;
position:absolute;
}
#ps {
float:right;
background-color:#FFFF00;
width:100%;
}
#bn {
position:absolute;
text-align:center;
width:100%;
height:100%;
cursor:default;
}
</style>
</head>
<body onload="go();">
<div id="bg"><div id="ps"></div><span id="bn">0%</span></div>
</body>
</html>

================================================================================

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>BetsLoveSky-王殿臣-真正的进度条效果</TITLE>
<script language="Javascript">
function exec(){
    ProgressBar1.value += 1;
    if(ProgressBar1.value>=ProgressBar1.Max){
        clearInterval(intv); }else if(ProgressBar1.value==100){
  alert("d");
  }
}
var intv = setInterval("exec();", 1);
</script>
</HEAD>
<BODY onload="exec">


<OBJECT ID="ProgressBar1" WIDTH=200  HEIGHT=16
 CLASSID="CLSID:35053A22-8589-11D1-B16A-00C0F0283628">
    <PARAM NAME="_ExtentX" VALUE="10345">
    <PARAM NAME="_ExtentY" VALUE="423">
    <PARAM NAME="_Version" VALUE="393216">
    <PARAM NAME="Appearance" VALUE="0">
    <PARAM NAME="Max" VALUE="500">
    <PARAM NAME="Scrolling" VALUE="0.1">
</OBJECT>


</BODY>
</HTML> 

================================================================================

<html>
<head>
<title>BetsLoveSky-王殿臣 渐变效果进度条</title>
<script language="javascript">
var _Hex = Array("00","01","02","03","04","05","06","07","08","09",
"0A","0B","0C","0D","0E","0F","10","11","12","13","14","15","16","17","18","19",
"1A","1B","1C","1D","1E","1F","20","21","22","23","24","25","26","27","28","29",
"2A","2B","2C","2D","2E","2F","30","31","32","33","34","35","36","37","38","39",
"3A","3B","3C","3D","3E","3F","40","41","42","43","44","45","46","47","48","49",
"4A","4B","4C","4D","4E","4F","50","51","52","53","54","55","56","57","58","59",
"5A","5B","5C","5D","5E","5F","60","61","62","63","64","65","66","67","68","69",
"6A","6B","6C","6D","6E","6F","70","71","72","73","74","75","76","77","78","79",
"7A","7B","7C","7D","7E","7F","80","81","82","83","84","85","86","87","88","89",
"8A","8B","8C","8D","8E","8F","90","91","92","93","94","95","96","97","98","99",
"9A","9B","9C","9D","9E","9F","A0","A1","A2","A3","A4","A5","A6","A7","A8","A9",
"AA","AB","AC","AD","AE","AF","B0","B1","B2","B3","B4","B5","B6","B7","B8","B9",
"BA","BB","BC","BD","BE","BF","C0","C1","C2","C3","C4","C5","C6","C7","C8","C9",
"CA","CB","CC","CD","CE","CF","D0","D1","D2","D3","D4","D5","D6","D7","D8","D9",
"DA","DB","DC","DD","DE","DF","E0","E1","E2","E3","E4","E5","E6","E7","E8","E9",
"EA","EB","EC","ED","EE","EF","F0","F1","F2","F3","F4","F5","F6","F7","F8","F9",
"FA","FB","FC","FD","FE","FF");
 function go()
 {
  setTimeout('start();',100);
 }
 var i=0;
 function start()
 {
  if(i++<256)
  {
   ps.innerHTML += "<span style='width:1px;background-color:#FF"+_Hex[256-i]+"00;'>";
   bn.innerHTML = Math.floor(i/2.56)+"%";
   setTimeout('start();',10);
  }else{
 
  alert("ok");

  }
 }
 
</script>
<style type="text/css">
#ps {
background-color:#FFFF00;
width:256px;
margin: 1px;
float:left;
}
#bn {
width:39px;
margin: 1px;
float:right;
text-align:center;
color:#FFFFFF;
font-family:Arial;
font-size:13px;
}
</style>
</head>
<body onload="go();">

<div style="background-color:black;width:300px;height:20px;"><div id="ps"></div><div id="bn"></div></div>
</body>
</html>

=================================================================================

<title>BetsLoveSky-王殿臣</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<style type="text/css">
<!--
.unnamed1 { background-color: #000000}
-->
</style>
</head>
<body>

<table border=0 cellpadding=0 cellspacing=0 width="100%" height="100%">
<tr>
<form name=loading>
   <td align=center>
    <p align="center">&nbsp;</p>
    <p align="center"><font color="#00FF00" size="2"></font></p>
    <p>
     <input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder;
color:#00FF00; background-color:black; padding:0px; border-style:none;">
     <br>
     <br>
     <input type=text name=percent size=46 style="font-family:Arial; color:#00FF00;
text-align:center; border-width:medium; border-style:none;" class="unnamed1">
     <br>
     <br>
     <font color="#00FF00" size="2" >
     <script>
var bar = 0
var line = "||"
var amount ="||"
count()
function count(){
bar= bar+2
amount =amount + line
document.loading.chart.value=amount
document.loading.percent.value=bar+"%"
if (bar<99)
{
setTimeout("count()",100);
}
else
{
alert("载入完毕")
window.location = "http://wdc-zhy.blog.163.com";
}
}

</script>
     <noscript></noscript></font></p>
    
         </td>

<!--//-->
</form>

</tr>

</table>

</body>

</html>

 

=================================================================================

<html>
<head>
<style type="text/css">

body {

font: MessageBox;
font: Message-Box;
}

marquee {
border: 1px solid ButtonShadow;
 background: #ff9900;
height: 12px;
font-size: 1px;
margin: 1px;
width: 400px;
-moz-binding: url("marquee-binding.xml#marquee");
-moz-box-sizing: border-box;
display: block;
overflow: hidden;
}

marquee span {
height: 18px;
margin: 1px;
width: 6px;
background: #D5E6FA;
float: left;
font-size: 1px;
}

.progressBarHandle-0 {
filter: alpha(opacity=20);
-moz-opacity: 0.20;
}

.progressBarHandle-1 {
filter: alpha(opacity=40);
-moz-opacity: 0.40;
}

.progressBarHandle-2 {
filter: alpha(opacity=60);
-moz-opacity: 0.6;
}

.progressBarHandle-3 {
filter: alpha(opacity=80);
-moz-opacity: 0.8;
}

.progressBarHandle-4 {
filter: alpha(opacity=100);
-moz-opacity: 1;
}


.progressBarHandle-5 {
filter: alpha(opacity=100);
-moz-opacity: 1.2;
}

.progressBarHandle-6 {
filter: alpha(opacity=100);
-moz-opacity: 1.4;
}

.progressBarHandle-7 {
filter: alpha(opacity=100);
-moz-opacity: 1.8;
}
.progressBarHandle-8 {
filter: alpha(opacity=100);
-moz-opacity: 2;
}
.progressBarHandle-9 {
filter: alpha(opacity=100);
-moz-opacity: 2.2;
}

</style>
</head>
<body>
<center><marquee direction="right" scrollamount="8" scrolldelay="100">
<span class="progressBarHandle-0"></span>
<span class="progressBarHandle-1"></span>
<span class="progressBarHandle-2"></span>
<span class="progressBarHandle-3"></span>
<span class="progressBarHandle-4"></span>
<span class="progressBarHandle-5"></span>
<span class="progressBarHandle-6"></span>
<span class="progressBarHandle-7"></span>
<span class="progressBarHandle-8"></span>
<span class="progressBarHandle-9"></span>

</marquee>
</center>
</body>
</html>

  评论这张
 
阅读(641)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017