H5效果篇--进度条的实现

AprilJ 发布于2019-08-02 18:01 / 1973人阅读

摘要：如果进度条完成的话，则又可以点击按钮。我们将通过去更新这个值，所以以上的标签只是对进度条进行了初始化工作。

为了演示方便，在第一个例子中，我们通过Javascript去控制时间从而不断地更新进度，并且允许用户通过点击按钮开始进度条的更新，一旦进度条开始更新，则按钮变得不可点击。如果进度条完成的话，则又可以点击按钮。

下面我们开始一步步实做这个效果：

1）创建HTML5 页

首先创建基本的HTML 5基本框架页

2）增加进度条标签

首先，在body部分，添加如下的进度条的标签：

Task progress:

HTML 5中的进度条使用的是标签，在这里，设置了开始的值value为0，最大的值为100，当任务完成后，进度条的值就会变成100了。我们将通过Javascript去更新这个值，所以以上的标签只是对进度条进行了初始化工作。

3）点击按钮的编写
现在，我们开始编写点击按钮的事件，代码如下：

0%

其中startProcess()的代码如下：

//当前进度  
var currProgress = 0;  
//进度条是否完成  
var done = false;  
//进度条计数的最大数值  
var total = 100;

在声明了上面的变量后，就可以编写startProgress()方法了，代码如下：

function startProgress() { 
 
 //获得进度条的标签 
var prBar = document.getElementById("prog"); 
//获得开始按键 
var startButt = document.getElementById("startBtn"); 
//显示的进度百分比数值 
var val = document.getElementById("numValue"); 
}

接下来，当用户点了开始按钮后，需要将按钮设置为不可用，并且要更新进度条的数值：

startButt.disabled=true; 
 
prBar.value = currProgress;

并且要显示出进度条当前完成的百分比并显示出来，使用如下的代码：

val.innerHTML =Math.round((currProgress/total)*100)+"%";

接着就可以对进度条的数字进行累加了：

currProgress++;

并且要判断如果进度数值达到100的话，则停止，设置done=false的标识，否则每0.1秒通过Javascript的setimeout方法进行延时，如下：

if(currProgress>100) done=true; 
//如果还没到进度条100的数值，则继续累加 
if(!done) 
    setTimeout("startProgress()", 100); 
 
//如果进度条已经达到100的数值，则重新设置按钮可用，重新设置currProgrss=0 
else     
{ 
    document.getElementById("startBtn").disabled = false; 
    done = false; 
    currProgress = 0; 
}

最后完成的代码如下：

Developer Drive | Displaying the Progress of Tasks with HTML5 | Demo

This is a demo to accompany the following tutorial: Displaying the Progress of Tasks with HTML5

Task progress:

idc机房托管超融合服务器 html进度条效果 js进度条效果 js进度条按钮效果进度条实现代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/55124.html

从零开始开发一款H5小游戏(五) 必要的包装，游戏规则和场景设计

摘要：一个游戏要完整，还需要给它制定一个评分机制，它是整个游戏的关键所在。比如很久以前微信上的打飞机，围住神经猫，还有前段时间大火的。这部分可以极大增加游戏的热度。预加载当我在微信打开游戏的时候，发现开始画面和结束画面的图片加载很慢。本系列文章对应游戏代码已开源 Sinuous game 到这里我们已经讲了游戏的整体设计和实现。一个游戏要完整，还需要给它制定一个评分机制，它是整个游戏的关键...

caspar 2019-08-02 18:53 评论0 收藏0
H5打造属于自己的视频播放器（JS篇2）

摘要：回顾算了不回顾了直接搞起，打开中写的播放视频播放按钮隐藏视频开始播放当点击播放按钮的时候，播放按钮将会隐藏，播放视频，这个不难，在中我们就已经实现。回顾算了不回顾了 showImg(https://segmentfault.com/img/bVBQyx?w=77&h=76);直接搞起，打开JS1中写的bvd.js 播放视频播放按钮隐藏视频开始播放当点击播放按钮的时候，播...

sPeng 2019-08-21 14:17 评论0 收藏0
H5打造属于自己的视频播放器（JS篇2）

摘要：回顾算了不回顾了直接搞起，打开中写的播放视频播放按钮隐藏视频开始播放当点击播放按钮的时候，播放按钮将会隐藏，播放视频，这个不难，在中我们就已经实现。回顾算了不回顾了 showImg(https://segmentfault.com/img/bVBQyx?w=77&h=76);直接搞起，打开JS1中写的bvd.js 播放视频播放按钮隐藏视频开始播放当点击播放按钮的时候，播...

hss01248 2019-08-05 10:02 评论0 收藏0
H5打造属于自己的视频播放器（JS篇2）

摘要：回顾算了不回顾了直接搞起，打开中写的播放视频播放按钮隐藏视频开始播放当点击播放按钮的时候，播放按钮将会隐藏，播放视频，这个不难，在中我们就已经实现。回顾算了不回顾了 showImg(https://segmentfault.com/img/bVBQyx?w=77&h=76);直接搞起，打开JS1中写的bvd.js 播放视频播放按钮隐藏视频开始播放当点击播放按钮的时候，播...

bang590 2019-08-01 15:37 评论0 收藏0
H5打造属于自己的视频播放器（逻辑篇）

摘要：回顾打造属于自己的视频播放器篇在上一章节之中，已经把篇给大致样式显现了出来，接下来应该是篇了，可是在写之前有必要先整理一下思绪，盲目乱写是不对的，喝杯茶，撩撩妹，生活多美妙，写起代码来自然心情好思路正。回顾 H5打造属于自己的视频播放器（HTML篇）在上一章节之中，已经把HTML篇给大致样式显现了出来，接下来应该是JS篇了，可是在写之前有必要先整理一下思绪，盲目乱写是不对的，喝杯茶，...

hover_lew 2019-08-20 10:17 评论0 收藏0