javascript - 使进度条响应
问题描述
我有这些progress bars
假设可以作为评级,它们看起来不错:
我已经应用了一些,并通过从文本文件中读取值来CSS
更改它们的宽度。JavaScript
但根本没有响应,每当调整窗口大小时:
HTML
:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="second-part">
<div class="row">
<div class="side">
<div>5 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar11" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p11">150</div>
</div>
<div class="side">
<div>4 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar12" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p12">63</div>
</div>
<div class="side">
<div>3 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar13" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p13">15</div>
</div>
<div class="side">
<div>2 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar14" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p14">6</div>
</div>
<div class="side">
<div>1 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar15" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p15">20</div>
</div>
</div>
</div>
CSS
:
* {
box-sizing: border-box;
}
/* Three column layout */
.side {
float: left;
width: 15%;
margin-top:10px;
}
.middle {
margin-top:10px;
float: left;
width: 70%;
}
/* Place text to the right */
.right {
text-align: left;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The bar container */
.bar-container {
width: 90%;
background-color: #f1f1f1;
text-align: center;
color: white;
}
/* Responsive layout - make the columns stack on top of each other instead of next to each other */
@media (max-width: 400px) {
.side, .middle {
width: 100%;
}
.right {
display: none;
}
}
JavaScript
更改进度条宽度:
var par1 = 4;
for(var i = 10; i < 16; i++) {
$('.p' + (i+1)).text(table[0][par1]);
$('.bar' + (i+1)).css("width", table[0][par1]);
par1++;
}
我怎样才能使它更具响应性?先感谢您!
解决方案
我推荐使用 css flexbox,这样在调整页面大小时项目会环绕而不是重叠。您可以使用媒体查询来调整项目和容器的大小,使它们不会重叠/包裹。这个站点对 flexbox 有很好的解释:Flexbox完整指南。
推荐阅读
- asp.net-core - DotNetCore 中的 HttpClient.SendAsync - 是否可能出现死锁?
- spring-integration - Spring Integration - JDBC Inbound Channel - 一次处理一组相互关联的行
- c# - 如何使对象围绕屏幕中心向鼠标统一旋转?
- javascript - 现有域上的节点 js
- c++ - c ++链接器命令错误(体系结构的未定义符号)
- reactjs - Typescript / Import 声明与“Snackbar”的本地声明冲突
- python - 字符串切片:从python中的字符串中删除第一个和第二个最后一个元素?
- javascript - 图像在 CSS 中未垂直对齐 | HTML 和 CSS
- graphics - 为什么我的 .stl 文件不会在文本编辑器中显示正确的信息?
- r - 按因子计算值的比例