Home > Article > Web Front-end > Javascript implementation of progress bar function based on timer

Javascript implementation of progress bar function based on timer

韦小宝Original: 2018-01-12 09:58:161627browse

This article mainly introducesjavascriptimplementation of progress bar function based on timer. It briefly analyzes the function and usage of javascript timer and gives an example of progress bar function based on timer. Friends who are interested in JavaScript can refer to this article

The example in this article describes how JavaScript implements the progress bar function based on a 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 an operation

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

Stop the timer:

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

setInterval corresponds is clearInterval(object) Clear the setInterval object

Gives a case:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.php.cn 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>

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

Related recommendations:

Solution to problems related to weird ajaxFileUpload.js uploading files

javascript - Qiniu JS upload prompts that the specified space does not exist

javascript - How to initialize the uploader after clicking a button when uploading Qiniu js

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

JavaScript JS function 对象

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：Native JS upload large file display progress bar PHP file upload codeNext article：Native JS upload large file display progress bar PHP file upload code

See more

Javascript implementation of progress bar function based on timer

Related articles