<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. React基础篇(2) -- state&props&refs

    内容简介 state props refs 行内样式及动态类名 state 基本介绍 React 把组件看成是一个状态机(State Machines).通过与用户的交互,实现不同状态,然后渲染 UI ...

  2. mysql主从服务器

    #mysql主从服务器 mysql-bin.003673 | 106 查看错误日志show variables like '%log_error%'; replicate-do-table=testm ...

  3. DOM操作技术之动态脚本与动态样式(兼容版)

    动态脚本 使用<script>元素可以向页面中插入Javascript代码,一种方式是通过其src特性包含外部文件,另一种方式就是用这个元素本身来包含代码. 而我们要说的动态脚本,指的是在 ...

  4. 用shell脚本安装apache

    我们首先创建一个文件为test.sh,执行此文件的方法有以下四种方式: 1../test.sh(必须chmod赋予执行权限) 2.. test.sh 3.sourse test.sh 4.[shell ...

  5. 数学【洛谷P4071】 [SDOI2016]排列计数

    P4071 [SDOI2016]排列计数 求有多少种长度为 n 的序列 A,满足以下条件: 1 ~ n 这 n 个数在序列中各出现了一次 若第 i 个数 A[i] 的值为 i,则称 i 是稳定的.序列 ...

  6. 实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法 (转)

    实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法 问题描述,在下拉菜单中,添加其他元素,例如,原文作者所述的<a>和我自己实际用到的<input> ...

  7. Qt 学习之路 2(35):文件

    Qt 学习之路 2(35):文件 豆子 2013年1月5日 Qt 学习之路 2 12条评论 文件操作是应用程序必不可少的部分.Qt 作为一个通用开发库,提供了跨平台的文件操作能力.从本章开始,我们来了 ...

  8. Hibernate学习笔记(三)—— Hibernate的事务控制

    Hibernate是对JDBC的轻量级封装,其主要功能是操作数据库.在操作数据库过程中,经常会遇到事务处理的问题,接下来就来介绍Hibernate中的事务管理. 在学习Hibernate中的事务处理之 ...

  9. Java 简单的RPC 实现

    借用了网上某大神的例子.... 目录结构是这样的... RpcFramework 主要是两个方法.一个是暴露服务,一个为引用服务.暴露服务的主要作用是声明一个接口的实现类.可以通过socket 远程调 ...

  10. vue的props和$emit / 父子组件通信

    props 父级: 父级组件中引用子组件,并将自己data下面的giveChild数据绑定在  giveChildData  传给子 <myChild :giveChildData=" ...