Community Learn Tools Library Leisure

English

Home > Web Front-end > HTML Tutorial > The html progress bar changes with the playback progress, and pause and start buttons are added. _html/css_WEB-ITnose

The html progress bar changes with the playback progress, and pause and start buttons are added. _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:39:18

Original

1527 people have browsed it

Xinda Electromagnetic Environment Monitoring Platform

Frequency change progress:

div style="width: 2%;">
33%

返回下载CSS进度条

回复讨论(解决方案)

进度条的原理就是计算下当前加载资源的个数与总的资源的个数的比值，来设置div的长度比如说总共有5个div 加载了四个
进度条就是80%的长度

然后写个函数通过 "当前加载资源的个数与总的资源的个数的比值"来控制id为progress的div的长度，实现的效果就是进度条的效果。
代码是随手写的，

我改了好多遍，可每次改动的时候我的图就没有动态效果啦，因为我是初学者但是急用代码，所以能不能帮我改下源代码，谢谢您了

<!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>信大电磁环境监测平台</title><style>body {    font-size: 12px;}#n {    margin: 10px auto;    width: 920px;    border: 1px solid #CCC;    font-size: 14px;    line-height: 30px;}#n a {    padding: 0 4px;    color: #333}.Bar,.Bars {    position: relative;    width: 200px; /* 宽度 */    border: 1px solid #B1D632;    padding: 1px;}.Bar div,.Bars div {    display: block;    position: relative;    background: #00F; /* 进度条背景颜色 */    color: #333333;    height: 20px; /* 高度 */    line-height: 20px; /* 必须和高度一致，文本才能垂直居中 */}.Bars div {    background: #090}.Bar div span,.Bars div span {    position: absolute;    width: 200px; /* 宽度 */    text-align: center;    font-weight: bold;}.cent {    margin: 0 auto;    width: 300px;    overflow: hidden}#status>div:not(:nth-of-type(1)){    display: none;}#btns{    text-align: center;}</style></head><body>    <p> </p>    <div class="cent">        <p>频率变化进度:</p>        <p>            <div class="Bars">                <div style="width: 0%;">                    <span></span>                </div>            </div>        </p>    </div>    <p id="btns">    <button onclick="stop(timer)">stop</button>    <button onclick="start('show();', delay);">start</button>    </p>    <p>        返回下载<a href="http://www.divcss5.com/template/m411.shtml">CSS进度条</a>    </p></body><body>    <div id="status">        <div>            <img src="http://chuantu.biz/t2/11/1438825741x-954497768.png" />        </div>        <div>            <img src="http://chuantu.biz/t2/11/1438825765x-954497768.png" />        </div>        <div>            <img src="http://chuantu.biz/t2/11/1438825794x-954497768.png" />        </div>        <div>            <img src="http://chuantu.biz/t2/11/1438825813x-954497768.png" />        </div>        <div>            <img src="http://chuantu.biz/t2/11/1438825832x-954497768.png" />        </div>    </div></body></html><script src="http://code.jquery.com/jquery-latest.min.js"></script><script>var current = 1;var delay = 1000;var timer;timer = start("show();", delay);function start(cod, delay){    return timer = setInterval(cod, delay);}function stop(timer) {    timer = clearInterval(timer);};function show(){    var len = $('#status>div').length;    $('#status>div:nth-of-type('+current+')').css('display', 'none');    current = current % len + 1;    $('#status>div:nth-of-type('+current+')').css('display', 'block');    $('.Bars>div>span').html(Math.round(current * 100 / len) + '%');    $('.Bars>div').css('width', Math.round(current * 100 / len) + '%');}</script>

Copy after login

非常感谢上面的两位仁兄给我指导，都给我编写了代码，让我如愿实现了功能。

Related labels：

html进度条随播放进度改变，并暂停与开始按钮的添加。

source：php.cn

Previous article：What are some good books to recommend for practicing css and js_html/css_WEB-ITnose Next article：css browser compatibility issues (tried in IETester and other browsers)_html/css_WEB-ITnose

Statement of this Website

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