Home >Web Front-end >JS Tutorial >JavaScript timer implements progress bar function

JavaScript timer implements progress bar function

小云云Original: 2018-01-29 10:34:422672browse

This article mainly introduces JavaScript to implement the progress bar function based on the timer. It briefly analyzes the function and usage of the JavaScript timer and gives an example of the progress bar function based on the timer. Friends who need it can refer to it. I hope it can help. to everyone.

Timer in Javascript

The method below window is window.setInterval() to start the timer

1.setInterval(function(function),time(every other How long to execute the function once, the unit is milliseconds))

will repeatedly perform an operation

2.setTimeout is used to delay a period of time before performing an operation

setTimeout (function, time), setTimeout will not be repeated!

Stop the timer

setTimeout corresponds to clearTimeout(object) Clear the set setTiemout object

setInterval corresponds to clearInterval(object) Clear the setInterval object

Give a case:

<!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>

Running effect:

When running the program, the progress bar on the web page will load, loading The speed is related to time!

Related recommendations:

js writing web page progress bar instance method

jquery web page loading progress bar implementation method

Detailed explanation of jQuery implementation of draggable progress bar

The above is the detailed content of JavaScript timer implements progress bar function. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of resolve in vue path optimizationNext article：Detailed explanation of resolve in vue path optimization

See more

JavaScript timer implements progress bar function

Related articles