<style type="text/css">
.Bar { position: relative; width: 200px; /* 宽度 */ border: 1px solid #B1D632; padding: 1px; }
.Bar div { display: block; position: relative; background:#00F;/* 进度条背景颜色 */ color: #333333;
      height: 20px; /* 高度 */ line-height: 20px; /* 必须和高度一致,文本才能垂直居中 */ }
.Bar div span{ position: absolute; width: 200px; /* 宽度 */ text-align: center; font-weight: bold; }
</style>
<div class="Bar">
<div style="width: 50%;">
<span>50%</span>
</div>
</div>
  //此方法用于计算百分比
  public String getPercent(int x,int total){
if(x==0&&total!=0){
return "0";
}else if(x==0&&total==0){
return "100%";
}
String result="";//接受百分比的值
double x_double=x*1.0;
double tempresult=x_double/total;
//保留到小数点后几位
DecimalFormat df = new DecimalFormat("0.00%"); //##.00% 百分比格式,后面不足2位的用0补齐
result= df.format(tempresult);
//注释掉的也是一种方法
//NumberFormat nf = NumberFormat.getPercentInstance();
//nf.setMinimumFractionDigits( 2 );
//result=nf.format(tempresult);
     return result;
}

CSS+DIV进度条的更多相关文章

  1. CSS实现进度条和订单进度条

    最近半个月为了期末考试,可要了学渣我半瓶血啊!今天本该好好复习的,可是状态不好,就随便找点乐子玩一玩,于是乎就想起之前面试时面试官给的一道题(见标题),那就弄点简单的小玩意给自己洗洗脑咯. 简单地效果 ...

  2. 每日CSS_纯CSS制作进度条

    每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...

  3. css 实现进度条

    <select id="progress" onchange="changeProgress(this)"> <option value=&q ...

  4. Css静态进度条

    图片预览: Css代码: <style> .statusList{width:240px; float:left; line-height:68px;margin:0 2px; text- ...

  5. CSS 静态进度条效果

    今天学习到了实现一个静态进度条的方法,固写一篇笔记稳固一下自己的知识. 最终的效果如下,进度条放在一个框里,水平宽自适应. 现在就开始,首先写一个进度条先. .progress-bar{ /* 进度条 ...

  6. 纯CSS打造进度条

    进度条效果如下: CSS部分 body { background-color: white; } .progress-bar { display: flex; flex-direction: row; ...

  7. css绘制进度条,持续转动的进度条

    //只有 progress pregress-par bar,进度条不会转, //增加 active 这个类,进度条会转, //html结构 <div class='progress activ ...

  8. CSS实现进度条

    进度条经常运用于网页,即使我们意识到不是所有的东西都将瞬间被加载完成,这些进度条用于提醒使用者关于网页上具体的任务进程,譬如上传,下载,加载应用程序等. 以前如果想要创建一个进度条的动画效果,没有使用 ...

  9. 不可思议的纯 CSS 滚动进度条效果

    结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS , ...

随机推荐

  1. OC自定义文档头部注释

    1.创建文件 IDETemplateMacros.plist 2.向文件里添加内容 具体内容 // 文 件 名:___FILENAME___ // // 版权所有:___COPYRIGHT___ // ...

  2. 关于GNU规范的语法扩展

    GNU 是一款能用于构建类 Unix 操作系统的计算机软件合集,由自由软件之父 Richard Stallman 开创,于 1983 年 9 月 27 日对外发布.GNU 完全由自由软件(free s ...

  3. 编写可维护的Javascript纪要

    第一部分: 编程风格 在大型项目开发中,因为项目可读性规范性的需要(就像<编写可维护性的Javascript>一书作者Nicholas Zakas大神所说,他们团队所有成员写出的代码就像是 ...

  4. Hdp 4 window MR 注意事项

      1,本机未安装HDP, 在代码中加一个环境变量,跳过检查. Environment.SetEnvironmentVariable("HADOOP_HOME", @"D ...

  5. 修剪草坪 单调队列优化dp BZOJ2442

    题目描述 在一年前赢得了小镇的最佳草坪比赛后,Farm John变得很懒,再也没有修剪过草坪.现在,新一轮的最佳草坪比赛又开始了,Farm John希望能够再次夺冠. 然而,Farm John的草坪非 ...

  6. C#中实现https的双向认证

    1.  把浏览器中的证书导出为cer文件. 2.   代码如下: using System; using System.Net; using System.IO; using System.Secur ...

  7. LeetCode记录之28——Implement strStr()

    Implement strStr(). Returns the index of the first occurrence of needle in haystack, or -1 if needle ...

  8. JAVA数据结构--插入排序

    插入排序(英语:Insertion Sort)是一种简单直观的排序算法.它的工作原理是通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应位置并插入.插入排序在实现上,通常采用in- ...

  9. Moving docker images location to different partition

    By default docker will put all the data including images under /var/lib/docker(At least on Debian). ...

  10. bzoj3261: 最大异或和 (可持久化trie树)

    题目链接 题解 看到异或和最大就应该想到01 trie树 我们记\(S_i\)为前i项的异或和 那么我们的目的是最大化\(S_n\)^\(x\)^\(S_{j-1}\) \((l <= j &l ...