Home > Article > Web Front-end > Use JS timer to implement progress bar

Use JS timer to implement progress bar

php中世界最好的语言Original: 2018-04-17 15:28:021642browse

This time I will bring you the use of JS timer to implement the progress bar. What are the precautions for using the JS timer to implement the progress bar. The following is a practical case, let's take a look.

Timer in Javascript

Method below the window degree window.setInterval() Start the timer

1.setInterval(function(function),time(how often the function is executed, unit is milliseconds))

An operation will be performed repeatedly

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

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

Stop timer

setTimeout corresponds to clearTimeout(object) Clear the setTiemout object

setInterval corresponds to clearInterval(object) to 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>进度条</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>

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Use JS timer to implement progress bar

Related articles