JavaScript 타이머는 진행률 표시줄 기능을 구현합니다.
- 小云云원래의
- 2018-01-29 10:34:422672검색
이 글에서는 타이머 기반 진행률 표시줄 기능을 구현하기 위한 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>
작업 효과:
When 프로그램을 실행하면 웹페이지의 진행률 표시줄이 로드됩니다. 로딩 속도는 시간과 관련이 있습니다!
관련 권장사항:
jQuery 드래그 가능한 진행률 표시줄 구현 자세한 설명
위 내용은 JavaScript 타이머는 진행률 표시줄 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.