js完毕进程条的主意,JavaScript完成时间倒计时跳

作者: 关于计算机  发布:2019-09-06

本文实例讲述了js实现进度条的方法。分享给大家供大家参考。具体实现方法如下:

1. setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

1.setTimeout和clearTimeout

setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

<html> 
<head> 
<title>进度条</title> 
<style type="text/css">  
.container{  
   width:450px;  
   border:1px solid #6C9C2C;  
   height:25px;  
 } 
#bar{  
   background:#95CA0D;  
   float:left; 
   height:100%;  
   text-align:center;  
   line-height:150%; 
 }  
</style>  
<script type="text/javascript">  
  function run(){  
        var bar = document.getElementById("bar"); 
        var total = document.getElementById("total"); 
    bar.style.width=parseInt(bar.style.width) + 1 + "%";  
    total.innerHTML = bar.style.width; 
    if(bar.style.width == "100%"){  
      window.clearTimeout(timeout); 
      return; 
    } 
    var timeout=window.setTimeout("run()",100); 
  } 
    window.onload = function(){  
       run(); 
    }  
</script> 

</head> 
<body> 
  <div class="container"> 
   <div id="bar" style="width:0%;"></div>  
  </div>  

</body> 
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>setTimeout</title> 
</head> 
<body> 
<div id='div1'> </div> 
</body> 
</html> 
<script type="text/javascript"> 
//设定倒数秒数 
var t = 10; 
//显示倒数秒数 
function showTime(){ 
t -= 1; 
document.getElementById('div1').innerHTML= t; 
if(t==0){ 
location.href='http://www.baidu.com'; 
} 
//每秒执行一次,showTime() 
setTimeout("showTime()",1000); 
} 
//执行showTime() 
showTime(); 
</script> 

效果图:

2.setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

图片 1

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

2.setInterval和clearInterval

<html>
<body>
<input type="text" id="clock" size="35" />
<script language=javascript>
var int=self.setInterval("clock()",50)
function clock()
{
var t=new Date()
document.getElementById("clock").value=t
}
</script>
</form>
<button onclick="int=window.clearInterval(int)">
Stop interval</button>
</body>
</html>
<html>  
<head>  
<title>进度条</title>  
<style type="text/css">  
.processcontainer{  
   width:450px;  
   border:1px solid #6C9C2C;  
   height:25px;  
 }  
#processbar{  
   background:#95CA0D;  
   float:left; 
   height:100%;  
   text-align:center;  
   line-height:150%; 
 }  
</style>  
<script type="text/javascript">  
 function setProcess(){  
  var processbar = document.getElementById("processbar");  
  processbar.style.width = parseInt(processbar.style.width) + 1 + "%";
  processbar.innerHTML = processbar.style.width;  
  if(processbar.style.width == "100%"){  
     window.clearInterval(bartimer);  
  }  
 }  
var bartimer = window.setInterval(function(){setProcess();},100);  
window.onload = function(){  
   bartimer;  
}  
</script>  
</head>  
<body>  
  <div class="processcontainer">  
   <div id="processbar" style="width:0%;"></div>  
  </div>  
</body>  
</html>

下面给大家介绍下相关阅读

效果图:

 1.setInterval()函数可以参阅setInterval()函数用法详解一章节。

图片 2

2.location.href可以参阅Location对象的href属性一章节。

3.setTimeout和setInterval区别

3.innerHTML属性可以参阅js的innerHTML属性的用法一章节。

setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() ,setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭,或者让 code 自身再次调用 setTimeout()。

下面通过示例(example)给大家介绍下 :

希望本文所述对大家的javascript程序设计有所帮助。

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>js定时跳转页面的方法</title> 
</head> 
<body> 
<script type="text/javascript"> 
var t=10;//设定跳转的时间 
setInterval("refer()",1000); //启动1秒定时 
function refer(){ 
if(t==0){ 
location="www.baidu.com"; //#设定跳转的链接地址 
} 
document.getElementById('show').innerHTML=""+t+"秒后跳转"; // 显示倒计时 
t--; // 计数器递减 
} 
</script> 

</body> 
</html> 

您可能感兴趣的文章:

  • javascript 进度条的几种方法
  • js 进度条实现代码
  • JS 进度条效果实现代码整理
  • JavaScript实现网页加载进度条代码超简单
  • Javascript jquery css 写的简单进度条控件
  • 用CSS+JS实现的进度条效果效果
  • PHP中使用Session配合Javascript实现文件上传进度条功能
  • JS实现环形进度条(从0到100%)效果
  • Extjs实现进度条的两种便捷方式
  • JavaScript实现简单动态进度条效果

遇到的问题:

当将上述js 的方法 放在$(function(){......})中时, 浏览器会报 methodXX() is not defined;

应当将function(){}的定义放在 <script></script>中

以上所述是小编给大家介绍的JavaScript实现时间倒计时跳转(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

  • 最全面的JS倒计时代码
  • js发送短信倒计时的简单实现方法
  • js实现精确到毫秒的倒计时效果
  • javascript特效实现——当前时间和倒计时效果的简单实例
  • JS/jQ实现免费获取手机验证码倒计时效果
  • 点击按钮出现60秒倒计时的简单js代码(推荐)
  • 基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果

本文由今晚买四不像发布于关于计算机,转载请注明出处:js完毕进程条的主意,JavaScript完成时间倒计时跳

关键词: