前端实例练习 - 进度条

shengguo 发布于2019-08-21 11:38 / 700人阅读

摘要：进度条代码储存在效果预览初衷很多人在初学前端的时候都会问，如何入门前端同为在前端学习道路上，奋力追赶的一员，本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。

进度条

代码储存在Github
效果预览

初衷：很多人在初学前端的时候都会问，“如何入门前端？”
同为在前端学习道路上，奋力追赶的一员，本人对于目前网络上所能看到的 “入门级” 的教材并不太满意。学习一门新知识，实例是尤其重要的。在这里本人整理了目前页面上常见功能实现的具体实例。愿能为大家提供一些帮助。
希望能够与大家互相分享，共同进步。

HTML部分

CSS部分

#myProgress {
    width: 100%;
    background-color: #ffffd;
}

#myBar {
    width: 1%;
    height: 30px;
    background-color: green;
    text-align: center; /*文字水平居中*/
    color: #fff;
    line-height: 30px; /*文字垂直居中*/
}

#myOperation {
    margin-top: 10px;
}

#myRun {
    background-color: green;
    border: 0;
    outline: none;
    cursor: pointer;
    color: #fff;
    padding: 10px 15px;
}

#myPersent {
    float: right;
}

JavaScript 部分

(function() {
    var runBtn = document.getElementById("myRun"),
        myPersent = document.getElementById("myPersent");

    function progress() {
        var element = document.getElementById("myBar"); 
        var width = 1; /*从1%开始*/
        var run = setInterval(frame, 10);
        function frame() {
            if (width >= 100) { /*超过100%消除定时器*/
                clearInterval(run);
            } else {
                width++; 
                element.style.width = width + "%"; /*改变width属性值*/
                myPersent.innerHTML = width + "%"; /*右下部显示百分比*/
                element.innerHTML = width + "%";   /*进度条上显示百分比*/
            }
        }
    }

    runBtn.onclick = function() {
        progress();
    }
})();

好啦，现在所有的代码都写完啦！

赶快打开浏览器，看看效果吧！

在这里，只是给大家提供一种思路，参考。
具体的实现，每个人都可以有不同的方法。
请大家赶快发挥想象，把你最想实现的功能，在电脑敲出来吧！

参考自w3cschools

GPU云服务器云服务器进度条上传进度条网站进度条带进度条

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

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

前端实例练习 - 进度条

摘要：进度条代码储存在效果预览初衷很多人在初学前端的时候都会问，如何入门前端同为在前端学习道路上，奋力追赶的一员，本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。进度条代码储存在Github效果预览初衷：很多人在初学前端的时候都会问，如何入门前端？同为在前端学习道路上，奋力追赶的一员，本人对于目前网络上所能看到的入门级的教材并不...

linkin 2019-08-29 12:13 评论0 收藏0
前端实例练习 - 进度条

摘要：进度条代码储存在效果预览初衷很多人在初学前端的时候都会问，如何入门前端同为在前端学习道路上，奋力追赶的一员，本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。进度条代码储存在Github效果预览初衷：很多人在初学前端的时候都会问，如何入门前端？同为在前端学习道路上，奋力追赶的一员，本人对于目前网络上所能看到的入门级的教材并不...

罗志环 2019-08-01 16:30 评论0 收藏0
canvas-learning：分享一些本人学习canvas时用来练习的案例

摘要：本文首发于的技术博客实用至上，非经作者同意，请勿转载。案例练习使用配合来复用路径。案例进度条练习文字相关的。案例过年就是这个味儿活动页此案例来自于我过往的一个项目，当时是用来做的，现在改成用来实现。练习的变形相关。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/11900000075223...

keithxiaoy 2019-08-20 12:22 评论0 收藏0
一些基于React、Vue、Node.js、MongoDB技术栈的实践项目

摘要：利用中间件实现异步请求，实现两个用户角色实时通信。目前还未深入了解的一些概念。往后会写更多的前后台联通的项目。删除分组会连同组内的所有图片一起删除。算是对自己上次用写后台的一个强化，项目文章在这里。后来一直没动，前些日子才把后续的完善。欢迎访问我的个人网站：http://www.neroht.com/ 刚学vue和react时，利用业余时间写的关于这两个框架的训练，都相对简单，有的...

tangr206 2019-06-26 17:34 评论0 收藏0
PHP 远程文件下载的进度条实现

摘要：原文地址实现远程下载文件到服务端并不是什么新鲜玩意，用等都能够轻易实现。原理也许你在搜索下载进度条的时候会看到有些文章使用的输出控制函数之类的控制缓冲区来实现进度条。原文地址：https://prinzeugen.net/implem... PHP 实现远程下载文件到服务端并不是什么新鲜玩意，用 cURL、file_get_contents、fopen 等都能够轻易实现。但是这几种...

YJNldm 2019-06-27 14:54 评论0 收藏0