html - 停止左边距将元素推离页面
问题描述
这是我的代码:
https://jsfiddle.net/rzcos32n/
我有这个代码:
function isItANumber(el) {
var element1 = document.getElementById("circle").innerHTML;
var percent = parseFloat(element1)*100;
percent+='%';
var increased = parseInt(el.innerText);
var element = document.getElementById("Value");
if (isNaN(increased) || element1 >= 0) {
document.getElementById("Result").innerHTML = "KanBan";
document.getElementById("circle").style.marginLeft = percent;
};
if (isNaN(increased) || element1 >= 0.33) {
document.getElementById("Result").innerHTML = "ScrumBan";
document.getElementById("circle").style.marginLeft = percent;
};
if (isNaN(increased) || element1 >= 0.66) {
document.getElementById("Result").innerHTML = "Scrum";
document.getElementById("circle").style.marginLeft = percent;
}
if (isNaN(increased) || element1 > 0.9) {
document.getElementById("Result").innerHTML = "Scrum";
document.getElementById("circle").style.marginRight = '0%';
}
}
var element = document.getElementById("circle");
isItANumber(element);
#line {
width: 100%;
/* 2 */
height: 5px;
background: gray;
position:relative;
margin-top: 30px;
}
#circle {
height: 50px;
width: 50px;
border-radius: 50%;
background: blue;
text-align: center;
color: white;
font-weight: 700;
line-height: 50px;
font-size: 14px;
position:absolute;
margin-top:-22.5px;
}
<div id="Result"></div>
<div id="line">
<div id="circle">
1.0
</div>
</div>
我根据圆圈中的百分比值在水平线上设置圆圈的位置。因此,如果它是“1”,则表示 100%。
我通过为其分配一个 margin-left 来做到这一点,它对于大多数值都非常有效,除非它像 1 这样的高值会将圆圈完全推离页面。
有没有办法让圆圈始终留在页面上,即使它的左边距为 0% 或 100%?
解决方案
我var percent = "calc("+parseFloat(element1)*100+"% - 50px)";
以这种方式添加了你得到 100% 但我们必须减去圆圈宽度 (50px)
function isItANumber(el) {
var element1 = document.getElementById("circle").innerHTML;
var percent = "calc("+parseFloat(element1)*100+"% - 50px)";
var increased = parseInt(el.innerText);
var element = document.getElementById("Value");
if (isNaN(increased) || element1 >= 0) {
document.getElementById("Result").innerHTML = "KanBan";
document.getElementById("circle").style.marginLeft = percent;
};
if (isNaN(increased) || element1 >= 0.33) {
document.getElementById("Result").innerHTML = "ScrumBan";
document.getElementById("circle").style.marginLeft = percent;
};
if (isNaN(increased) || element1 >= 0.66) {
document.getElementById("Result").innerHTML = "Scrum";
document.getElementById("circle").style.marginLeft = percent;
}
if (isNaN(increased) || element1 > 0.9) {
document.getElementById("Result").innerHTML = "Scrum";
document.getElementById("circle").style.marginRight = '0%';
}
}
var element = document.getElementById("circle");
isItANumber(element);
#line {
width: 100%;
/* 2 */
height: 5px;
background: gray;
position:relative;
margin-top: 30px;
}
#circle {
height: 50px;
width: 50px;
border-radius: 50%;
background: blue;
text-align: center;
color: white;
font-weight: 700;
line-height: 50px;
font-size: 14px;
position:absolute;
margin-top:-22.5px;
}
<div id="Result"></div>
<div id="line">
<div id="circle">
1.0
</div>
</div>
推荐阅读
- sql - 多角色数据库设计
- python - Python:在列表中查找所有加法逆对并删除它们
- logging - 无法将气流日志远程写入 GCS 气流 1.10.14
- c# - C# DynamoDB 插入具有相同主键的项目
- java - 如何将 oracle live sql(网站:https://livesql.oracle.com/apex/f?p=590:1000)连接到 java 应用程序
- arrays - 如何比较结构的切片
- c++ - 将 auto 作为参数传递并在 C++ 中返回 auto
- ios - 为什么我的 iOS 应用无法识别 Firebase 深层链接(apple-app-site-association 为空)?
- java - 在 webview 中加载 URL 时面临问题
- python - 在不知道 (x,y) 坐标和“z”之间关系的情况下插入 3D 数据