CSS带数字进度条

4 年前 · 来自专栏中国前端的希望

聪明de克星

https://github.com/askybig

最近需求做了一个进度条功能，还是有很多细节可以挖掘的。

这是写的 demo ：

HTML:

<p>直出数据进度条：</p>
<div class="out">
    <div class="in"></div>
</div>
<p>动态数据进度条：<input type="text" id="val_input" oninput="progressChange()"/>%</p>
<div class="out1">
    <div class="in1"></div>
</div>

CSS:

.out {
  width: 400px;
  height: 30px;
  border-radius: 15px;
  background: lightgray;
.in {
  width: 55%;
  height: 30px;
  border-radius: 15px;
  background: orange;
input {
  width: 20px;
.out1 {
  width: 400px;
  height: 30px;
  border-radius: 15px;
  background: lightgray;
  overflow: hidden; 
.in1 {
  width: 0px;
  height: 30px;
  border-radius: 15px;
  background: orange;
}

JS:

function progressChange() {
  var inputVal = document.getElementById('val_input').value;
  if(inputVal>100) {
    inputVal = 100;
  var outVal = parseInt(window.getComputedStyle(document.getElementsByClassName('out1')[0]).width);
  var inVal = +inputVal * outVal / 100;
  document.getElementsByClassName('in1')[0].style.width = inVal + 'px';

css进度条 https://www.zhihu.com/video/1033841772597846016

外部css文件的样式无法使用 ele.style 获取，需要通过 getComputedStyle 获取，再通过 ele.style 设置；
parseInt 是个神奇的东西，有一道题目是这样的：[1,2,3].map(parseInt)，很多人会错；
oninput、onchange、onfocus、onblur的区别；

实际功能：

rn 的默认 position 是 relative ：

进度条是用两个 View 标签嵌套，设置各自的宽度和颜色就好了：

<View style={styles.outProgress}>
   <View style={[styles.inProgress, {width: pxTodp(percentProgress)}]}></View>
</View>

css:

outProgress: {
    width: pxTodp(88),
    height: pxTodp(20),
    borderRadius: pxTodp(12),
    backgroundColor: '#F2F3F5',
    overflow: 'hidden'
  inProgress: {
    width: pxTodp(50),
    height: pxTodp(20),
    borderRadius: pxTodp(12),
    backgroundColor: '#FFD814'
  },

由于数字需要居中重叠在 View 标签上，所以需要给数字外面包一层和进度条外层容器相同大小的 View 容器，并设置背景透明，利用 flex 垂直居中显示，并设置它为绝对布局就行：

<View style={styles.processTextWrap}>
    <Text style={styles.processText}>{needConsumeAmount > 2500 ? needConsumeAmount % 2500 : needConsumeAmount}/2500</Text>
</View>

css:

processTextWrap: {
    position: 'absolute',
    width: pxTodp(88),
    height: pxTodp(20),
    borderRadius: pxTodp(12),
    backgroundColor: 'rgba(0, 0, 0, 0)',
    flexDirection: 'row',