JavaScript 타이머는 진행률 표시줄 기능을 구현합니다.-JS 튜토리얼-php.cn

JavaScript 타이머는 진행률 표시줄 기능을 구현합니다.

小云云

풀어 주다： 2018-01-29 10:34:42

원래의

2629명이 탐색했습니다.

이 글에서는 타이머 기반 진행률 표시줄 기능을 구현하기 위한 JavaScript를 주로 소개하며, JavaScript 타이머의 기능과 사용법을 간략하게 분석하고, 타이머 기반 진행률 표시줄 기능의 예를 제공합니다. .모든 사람에게 도움이 되기를 바랍니다.

Javascript의 타이머

window.setInterval() 아래 메소드는 타이머를 시작합니다

1.setInterval(function(function), time(함수가 실행되는 빈도, 단위는 밀리초))

특정 작업은 반복적으로 수행됩니다

2.setTimeout은 작업을 수행하기 전에 일정 시간을 지연하는 데 사용됩니다

setTimeout(함수, 시간), setTimeout은 반복되지 않습니다!

타이머를 중지합니다

setTimeout은clearTimeout(객체)에 해당합니다. set Tiemout 객체를 지웁니다.

setInterval은 ClearInterval(객체)에 해당합니다. setInterval 객체를 지웁니다.

사례 제공:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net js进度条</title>
<style type="text/css">
#outer/*外部*/
{
  margin-top:100px;
  border:solid black 1px;
  background-color:white;
  width:1004px;
  height:54px;
}
#inner/*内部*/
{
  background-color:red;
  width:0px;/*首先将内部的宽度定为0，用show（）来实现进度条！*/
  height:50px;
  margin-left:2px;
  margin-top:2px;
}
</style>
<script language="javascript">
function show()
{
  if(document.getElementById("inner").offsetWidth<1000)//offsetWidth实现的时候width是没有宽度的，而style.width实现的时候则有宽度（px）！
  {
    document.getElementById("inner").style.width=
    document.getElementById("inner").offsetWidth+20+"px";//每次执行show()函数的时候宽度都会加上20！
    console.log(document.getElementById("inner").style.width);//console 控制台 ：可以在网页上看到width的变化(利用F12)
  }
  else
  {
    document.getElementById("inner").style.width=1000+"px";//如果大于1000px的话，只能将1000px赋值给border-width;!
    stop();//此时就应该执行停止定时器的函数！
  }
}
var timer;//定义在两个函数外面，因为两个函数都会用到！
function start()
{
 timeer = window.setInterval(show,200);//每隔200ms调用一次show函数
}
function stop()
{
  timer = window.clearInterval(timer);
}
</script>
</head>
<body onload="start()">
<p id="outer">
<p id="inner">
</p>
</p>
</body>
</html>

로그인 후 복사

작업 효과: