效果截图：
Html页：
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>电池图标</title>
<link href="BatteryIconStyle.css" rel="stylesheet" />
<script src="BatteryIconScript.js"></script>
</head>
<body>
<div class="batteryIcon">
<span class="batteryIconBody">
<span id="batteryIconProgress" class="batteryIconProgress"></span>
<label class="batteryIconContent" id="batteryIconContent"></label>
<span class="batteryIconHead"></span>
</span>
</div>
</body>
</html>
css样式：
body {
text-align: center
}
.batteryIcon {
margin: 200px auto;
width: 90px;
}
span {
display: block;
}
.batteryIconBody {
position: relative;
width: 80px;
height: 30px;
border: 6px solid #333;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
.batteryIconHead {
position: relative;
height: 15px;
width: 8px;
background: #333;
display: block;
position: absolute;
top: 8px;
left: 82px;
}
.batteryIconProgress {
height: 30px;
}
.batteryIconContent {
position: relative;
font-size: 12px;
left: 4px;
top: -22px;
}
.beginButton {
margin-top: 100px;
}
JS逻辑:
//窗体加载
window.onload = function () {
setInterval("testBegin(0);", 21000);
}
//测试开始
function testBegin(val) {
var bcontent = document.getElementById("batteryIconProgress");
var label = document.getElementById("batteryIconContent");
for (var i = val; i <= 100; i++) {
bcontent.style.setProperty('width', '' + 80 * i / 100 + '');
if (i <= 10) {
bcontent.style.setProperty('background', '#ff0000');
}
if (i > 10) {
bcontent.style.setProperty('background', '#ffd800');
}
if (i > 50) {
bcontent.style.setProperty('background', '#00ff21');
}
label.innerText = ((i) + "%");
window.setTimeout("testBegin(" + ++i + ")", 200)
break;
}
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
