Home > Article > Web Front-end > Example of JavaScript implementing progress bar based on timer

Example of JavaScript implementing progress bar based on timer

黄舟Original: 2018-05-12 14:06:322081browse

This article mainly introduces the implementation of the progress bar function based on the timer in javascript. 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

The example in this article describes how JavaScript implements the progress bar function based on the timer. Share it with everyone for your reference, the details are as follows:

Timer in Javascript

windowThe method below the first linewindow. setInterval() Start the timer

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

will repeatedly execute an item Operation

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

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

Stop the timer

setTimeout corresponds to clearTimeout (object) Clear the setTiemout object

setInterval corresponds Is clearInterval (object) Clear the setInterval object that has been set

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. The loading speed is related to time!

The above is the detailed content of Example of JavaScript implementing progress bar based on timer. 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：How to implement paging query in nodeNext article：How to implement paging query in node

See more

Example of JavaScript implementing progress bar based on timer

Related articles