进度条的写法

<!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>
</head>

<style type="text/css">
/*进度条*/
        .progressbar{margin:1.5rem auto;width:80%;padding: 0.1rem;height:1rem;text-align:center;border:8px solid rgba(175,125,66,1);border-radius:1rem;overflow:hidden;position:relative}
        .progressbar img{width: 16rem;height:1rem;position:absolute;left:-15.9rem}
        .progressbar span{position:absolute;z-index:10;left:6.4rem;font-size:.7rem;font-weight:100;color:#fff}
        .load{position:fixed;height:100%;width:100%;background:rgba(0,0,0,.8);z-index:999}
        .load .loadfont{width:100%;height:50px;color:#fff;text-align:center;margin-top:-25px;position:absolute;top:50%;font-size:1rem}
        /*音乐相关*/

</style>

<body>
<div class="progressbar">
        <img src="a.png">
        <span>剩余15秒</span>
    </div>
</body>
</html>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

//滚动
var maxTime=100;
var progressTimer = setInterval(function () {
    //console.log("d");
                    if(maxTime>0){
                        $(".progressbar").find("span").html("剩余"+maxTime/10+"秒");
                    }
                    else{
                       //  停止
                    }
                    //滚动条
                    progressleft = parseInt($(".progressbar").find("img").css("left").replace("px",""));
                    if(progressleft<0){
                        progressleft = progressleft+ $(".progressbar").width()/150;
                        $(".progressbar").find("img").css("left",progressleft);
                    }
                     maxTime--;
                }, 100);
</script>

<!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>
</head>

<style type="text/css">
/*进度条*/
        .progressbar{margin:1.5rem auto;width:80%;padding: 0.1rem;height:1rem;text-align:center;border:8px solid rgba(175,125,66,1);border-radius:1rem;overflow:hidden;position:relative}
        .progressbar img{width: 16rem;height:1rem;position:absolute;left:-15.9rem}
        .progressbar span{position:absolute;z-index:10;left:6.4rem;font-size:.7rem;font-weight:100;color:#fff}
        .load{position:fixed;height:100%;width:100%;background:rgba(0,0,0,.8);z-index:999}
        .load .loadfont{width:100%;height:50px;color:#fff;text-align:center;margin-top:-25px;position:absolute;top:50%;font-size:1rem}
        /*音乐相关*/

</style>

<body>
<div class="progressbar">
        <img src="a.png">
        <span>剩余15秒</span>
    </div>
</body>
</html>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

//滚动
var maxTime=100;
var progressTimer = setInterval(function () {
    //console.log("d");
                    if(maxTime>0){
                        $(".progressbar").find("span").html("剩余"+maxTime/10+"秒");
                    }
                    else{
                       //  停止
                    }
                    //滚动条
                    progressleft = parseInt($(".progressbar").find("img").css("left").replace("px",""));
                    if(progressleft<0){
                        progressleft = progressleft+ $(".progressbar").width()/150;
                        $(".progressbar").find("img").css("left",progressleft);
                    }
                     maxTime--;
                }, 100);
</script>

时间： 2024-10-08 02:40:31

进度条的写法的相关文章

今天看到的关于邮件发送进度条的写法

1 using System; 2 using System.Collections.Generic; 3 using System.ComponentModel; 4 using System.Data; 5 using System.Drawing; 6 using System.Text; 7 using System.Windows.Forms; 8 using System.Threading; 9 10 namespace ThreadUpdateUI 11 { 12 public

进度条的多种写法

1. animation; <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> #box { width: 600px; height: 30px; background-color: #ccc; } #move { width: 100%; height: 100%; background-color: #f00;

纯css实现进度条效果

去年7月份做一个公司商城的微信页面(微信用的chrome内核)需要写一个提示返现进度的进度条效果. 一个完整的进度条效果其实可以拆分一下: 一段背景: 一小段的静态的斜纹进度条: 斜纹进度条用线性渐变 linear-gradient 类实现,原理很好理解,2个参数: 1.角度: 2.关键点(包含2个参数,1是颜色,2是长度位置) display: inline-block; width: 100px; height: 100px; background-image: linear-gradien

iOS_31_cocos2d_Progress进度条

最终效果图: 进度条节点[CCProgressNode],构造时依赖一个Sprite 为[CCProgressNode]添加一个CCActionProgressFromTo动作 也可以在update方法中,更改[CCProgressNode]的percentage属性,实现进度条效果 [CCProgressNode]基本属性: [CCProgressNode]构造方法: 它的类型只有两种: 雷达和条形 进度条场景代码 // // ProgressScene.h // 31_cocos2D入门 /

Springmvc+uploadify实现文件带进度条批量上传

网上看了很多关于文件上传的帖子,众口不一,感觉有点乱,最近正好公司的项目里用到JQuery的uploadify控件做文件上传,所以整理下头绪,搞篇文档出来,供亲们分享. Uploadify控件的主要优势是可以实现批量文件上传,并且提供了onSelect(选中文件).onUploadSuccess(上传成功回调函数)等多个事件监听函数,可以操控上传的整个流程. 对uploadify有个简单的了解后,废话不多说,开始吧... (由于这次项目中用到的是ssm框架,所以就以springmvc的后台处理为

Python HTTP下载文件并显示下载进度条

下面的Python脚本中利用request下载文件并写入到文件系统,利用progressbar模块显示下载进度条. 其中利用request模块下载文件可以直接下载,不需要使用open方法,例如: import urllib import requests.packages.urllib3 requests.packages.urllib3.disable_warnings() url = "https://raw.githubusercontent.com/racaljk/hosts/maste

Android View 之进度条+拖动条+星级评论条....

PS:将来的你会感谢现在奋斗的自己.... 学习内容: 1.进度条 2.拖动条 3.星级评论条 1.进度条...       进图条这东西想必大家是很熟悉的...为了使用户不会觉得应用程序死掉了,因此为之设置一个进度条使应用程序的运行状态更好的反馈给客户...这也就是进度条的作用...因此一般的应用程序都会加入进度条...进度条分为圆形进度条和线性的进度条...目的都是一样的,只是展示的效果是不同的...用代码讲解一下... <LinearLayout xmlns:android="htt

JS框架_(JQbar.js)柱状图动态百分比进度条特效

柱状图动态百分比进度条效果 <html> <head> <title>jqbar.js柱状图动态百分比进度条特效</title> <link href="css/demo.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="css/jqbar.css" /

模仿进度条效果

进度条效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #progress{width: 400px; height: 30px; border: 1px solid black; position: relative;} #fill{po