可渐进增长的进度条

Posted 2020-08-03 我的前端之路

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了可渐进增长的进度条相关的知识，希望对你有一定的参考价值。

效果实现：

1.加载到一定程度，有颜色

2.加载颜色，有渐进增长的效果

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
    margin:0px;
    padding:0px;
}
.load{
    width:300px;
    height:50px;
    border-radius:8px;
    -mos-border-radius:8px;
    -webkit-border-radius:8px;
    border:1px solid #eee;
    margin:50px auto;            /*为了效果    */
    overflow:hidden;
}
.loadInner{
    width:20%;
    height:50px;
    background:red;        
}
</style>
<script src="jquery-1.11.3.min.js"></script>
</head>
<body>
<div class="load">
    <div class="loadInner"></div>
</div>
<script>
$(function(){
    var i=0;
    setInterval(function(){
       if(i<100)
       {
       i+=1;
       }
        $(".loadInner").css({"width":i+"%"})
       
    },1000/24);
})
</script>
</body>
</html>

延伸：

一.父级有圆角，子集没有圆角，有两种办法，

1.可以在子集上加上圆角，比较麻烦。

2.可以在父级上加overflow:hidden，超出隐藏，推荐。

二. setInterval()

setInterval方法是每隔一段时间执行一次，是循环执行的

计时器setInterval()

在执行时,从载入页面后每隔指定的时间执行代码。

语法:

setInterval(代码,交互时间);

参数说明：

1. 代码：要调用的函数或要执行的代码串。

2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。

返回值:

一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。

调用函数格式(假设有一个clock()函数):

setInterval("clock()",1000)
或
setInterval(clock,1000)

我们设置一个计时器，每隔100毫秒调用clock()函数，并将时间显示出来，代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
  var int=setInterval(clock, 100)
  function clock(){
    var time=new Date();
    document.getElementById("clock").value = time;
  }
</script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
  </form>
</body>
</html>

我的随笔 - 我的前端之路 - 博客园

任务

获取时间，格式"时:分:秒"，并赋值给attime。

，使用setInterval()计时器来显示动态时间。

 <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定时器</title>
<script type="text/javascript">
  var attime;
  var int=setInterval("clock()",100)
  function clock(){
    var time=new Date();          
    attime=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();
    document.getElementById("clock").value = attime;
  }
  
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50"  />
</form>
</body>
</html>

结果：13：58：32

三. time.getHours()(参考w3c)

定义和用法

getHours() 方法可返回时间的小时字段。

语法

dateObject.getHours()

返回值

dateObject 的小时字段，以本地时间显示。返回值是 0 （午夜）到 23 （晚上 11 点）之间的一个整数。

提示和注释：

注释：由 getHours() 返回的值是一个两位的数字。不过返回值不总是两位的，如果该值小于 10，则仅返回一位数字。

注释：该方法总是结合一个 Date 对象来使用。

实例

例子 1

在本例中，我们可取得当前时间的小时：

<script type="text/javascript">

var d = new Date()
document.write(d.getHours())

</script>

输出：

例子 2

在本例中，我们将从具体的日期和时间中提取出小时字段：

<script type="text/javascript">
 
var born = new Date("July 21, 1983 01:15:00")
document.write(born.getHours())
 
</script>

输出：

TIY

如何使用 getHours(), getMinutes() 以及 getSeconds() 来显示当前的时间。

<html>
<body>

<script type="text/javascript">

var d = new Date()
document.write(d.getHours())
document.write(".")
document.write(d.getMinutes())
document.write(".")
document.write(d.getSeconds())

</script>

</body>
</html>

结果：14.22.31

显示当前时间（带有一个判断数值是否小于 10 的函数）

如何使用 getHours(), getMinutes() 以及 getSeconds() 来显示当前的时间。

<html>
<body>

<script type="text/javascript">

function checkTime(i)
{
if (i<10) 
  {i="0" + i}
  return i
}

var d = new Date()
document.write(checkTime(d.getHours()))
document.write(".")
document.write(checkTime(d.getMinutes()))
document.write(".")
document.write(checkTime(d.getSeconds()))

</script>

</body>
</html>

结果：14.24.01

JavaScript getMinutes() 方法(参考w3c)

定义和用法

getMinutes() 方法可返回时间的分钟字段。

语法

dateObject.getMinutes()

返回值

dateObject 的分钟字段，以本地时间显示。返回值是 0 ~ 59 之间的一个整数。

提示和注释：

注释：由 getMinutes() 返回的值是一个两位的数字。不过返回值不总是两位的，如果该值小于 10，则仅返回一位数字。

注释：该方法总是结合一个 Date 对象来使用。

实例

例子 1

在本例中，我们可取得当前时间的分钟：

<script type="text/javascript">

var d = new Date()
document.write(d.getMinutes())

</script>

输出：24

例子 2

在本例中，我们将从具体的日期和时间中提取出分钟字段：

<script type="text/javascript">

var born = new Date("July 21, 1983 01:15:00")
document.write(born.getMinutes())

</script>

输出：15

JavaScript getSeconds() 方法(参考w3c)

定义和用法

getSeconds() 方法可返回时间的秒。

语法

dateObject.getSeconds()

返回值

dateObject 的分钟字段，以本地时间显示。返回值是 0 ~ 59 之间的一个整数。

提示和注释：

注释：由 getSeconds() 返回的值是一个两位的数字。不过返回值不总是两位的，如果该值小于 10，则仅返回一位数字。

注释：该方法总是结合一个 Date 对象来使用。

实例

例子 1

在本例中，我们可取得当前时间的秒：

<script type="text/javascript">

var d = new Date()
document.write(d.getSeconds())

</script>

输出：17

例子 2

在本例中，我们将从具体的日期和时间中提取出秒字段：

<script type="text/javascript">

var Birthday = new Date("July 21, 1983 01:15:00")
document.write(Birthday.getSeconds())

</script>

输出：0

以上是关于可渐进增长的进度条的主要内容，如果未能解决你的问题，请参考以下文章

当片段视图加载是异步任务的一部分时，如何在片段加载之前显示进度条？

自定义对话框片段内的进度条 - 如何从 AsyncTask 传递进度？

Seekbar进度drawable异常行为onPause

在recyclerview片段Reandroid中屏幕旋转后进度条不显示

css Bootstrap 3进度条片段

用于 onActivityCreated 中通用图像加载器的片段中进度条的 NullPointerException