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 , ...
随机推荐
- [转]解读Unity中的CG编写Shader系列1——初识CG
CG=C for Graphics 用于计算机图形编程的C语言超集 前提知识点: 1.CG代码必须用 CGPROGRAM ... ENDCG括起来 2.顶点着色器与片段着色器的主函数名称可随意,但需 ...
- iOS 开发技术体系
iOS 开发技术体系图: - 层级 | 主要框架 - ---------------------|--------------------------------------------------- ...
- virtueBox实现虚拟机的复制和粘贴
1.在设备--共享粘贴板--勾选双向. 2.在设备--拖放--勾选双向. 3.在设备--安装增强功能,然后进入虚拟机安装增强功能即可.
- 数据存储 mongodb
数据存储 mongodb from pymongo import MongoClient import os base_dir = os.getcwd() class MongoPipeline(ob ...
- 【离散数学】 SDUT OJ 建图
建图 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Problem Description 编程使得程序可以接受一个图的点边 ...
- mysql主从复制简单配置,满满的干货
mysql主从备份(复制)的基本原理 mysql支持单向.异步复制,复制过程中一个服务器充当主服务器,而一个或多个其它服务器充当从服务器.mysql复制基于主服务器在二进制日志中跟踪所有对数据库的更改 ...
- 获取 stoken 或者id MVC写法
//获取地址栏 painting_idvar painting_id = "{$_GET['painting_id']}"; var stoken = "{$_SESSI ...
- VIA格式转COCO格式
VIA是一款很好用的标注软件,基于网页,不过现在开源的大多数目标检测器都是基于COCO训练和测试的,我们如果想要训练自己的数据集,要么修改源代码,要么将自己的标注格式改成COCO格式,采用第一种方法很 ...
- rest-assured的默认值与Specification重用
一.默认值 rest-assured发起请求时,默认使用的host为localhost,端口为8080,如果你想使用不同的端口,你可以这样做: given().port(80)...... 或者是简单 ...
- POJ_3126 Prime Path 【BFS+素数打表】
一.题目 http://poj.org/problem?id=3126 二.分析 该题主要是要让我们找到一个$4$位素数到另一个$4$位素数的最少的变换次数,且要求保证每一次变换都满足 1.下一个数必 ...