CSS+DIV进度条
<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进度条的更多相关文章
- CSS实现进度条和订单进度条
最近半个月为了期末考试,可要了学渣我半瓶血啊!今天本该好好复习的,可是状态不好,就随便找点乐子玩一玩,于是乎就想起之前面试时面试官给的一道题(见标题),那就弄点简单的小玩意给自己洗洗脑咯. 简单地效果 ...
- 每日CSS_纯CSS制作进度条
每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...
- css 实现进度条
<select id="progress" onchange="changeProgress(this)"> <option value=&q ...
- Css静态进度条
图片预览: Css代码: <style> .statusList{width:240px; float:left; line-height:68px;margin:0 2px; text- ...
- CSS 静态进度条效果
今天学习到了实现一个静态进度条的方法,固写一篇笔记稳固一下自己的知识. 最终的效果如下,进度条放在一个框里,水平宽自适应. 现在就开始,首先写一个进度条先. .progress-bar{ /* 进度条 ...
- 纯CSS打造进度条
进度条效果如下: CSS部分 body { background-color: white; } .progress-bar { display: flex; flex-direction: row; ...
- css绘制进度条,持续转动的进度条
//只有 progress pregress-par bar,进度条不会转, //增加 active 这个类,进度条会转, //html结构 <div class='progress activ ...
- CSS实现进度条
进度条经常运用于网页,即使我们意识到不是所有的东西都将瞬间被加载完成,这些进度条用于提醒使用者关于网页上具体的任务进程,譬如上传,下载,加载应用程序等. 以前如果想要创建一个进度条的动画效果,没有使用 ...
- 不可思议的纯 CSS 滚动进度条效果
结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS , ...
随机推荐
- App Store提交审核报错 ERROR ITMS-90087解决办法
1.原因说明 app对Wifi进行配网, 使用了GizWifiSDK.framework提交App Store时候报错了 App Store Connect Operation Error ERROR ...
- 初学python-字符串中引号的使用、input简介、强制类型转换、加减乘除简写、条件判断
一.字符串中单引号和双引号的使用: 1.字符串以英文单引号' '引用.eg:'Hello World' 2.若字符串中含有单引号,则以英文双引号" "引用.eg:"I'm ...
- 【转】WinForm时间选择控件(DateTimePicker)如何选择(显示)时分秒
源地址:https://www.cnblogs.com/EvanFan/p/7826160.html 注意:年月日时分秒的大小写格式,如果错了数据就错了,如果能显示当前时间说明设置正确
- centos7用docker安装mysql5.7.24后配置主从
1)使用docker安装完成mysql5.7.24,我规划的是3台: 192.168.0.170(Master) 192.168.0.169(Slave) 192.168.0.168(Slave) 2 ...
- Unity---动画系统学习(2)---模型3种导入方式、人形动画介绍、切割动画
1. 介绍 Unity中导入的模型主要是由3DMAX.Maya等建模软件制作的,后缀为.fbx的文件. 博主在Unity Asset Store里面下载了一套官方免费的模型和动画. 和一套地图,分享给 ...
- php中的openssl开启方法
windows下开启方法: 1: 首先检查php.ini中:extension=php_openssl.dll是否存在, 如果存在的话去掉前面的注释符‘:', 如果不存在这行,那么添加extensio ...
- Vue 环境配置
最开始摸element的时候,像盲人摸象,完全没有头绪. https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials ...
- Mui 选项卡 tab 高度 没有自适应....
因为项目中 用到了 mui ,mui 的选项卡有时候无法自适应高度,这回导致有的tab 出现一大片空白区域... 从jquery 的 思路 是 用一个值 保存 当前 的 高度... 当 点击其他 t ...
- 更改npm默认路径
Windows下的Nodejs npm路径是appdata,如果你想通过npm在自己指定的路径下去搭建环境,那么就要去nodejs的安装目录中找到node_modules\npm\npmrc文件,修改 ...
- http简单请求 -- 复杂请求