使用layui的进度条和数据条制作时间进度线
先看成品:
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 5px;">
<legend>封面制作进度</legend>
</fieldset>
<div class="layui-progress">
<div class="layui-slider-wrap" style="left: 0%;">
<div class="layui-slider-wrap-btn" style="border: 2px solid #009688;"></div>
</div>
<div class="layui-slider-wrap" style="left: 25%;">
<div class="layui-slider-wrap-btn" style="border: 2px solid #009688;"></div>
</div>
<div class="layui-slider-wrap" style="left: 75%;">
<div class="layui-slider-wrap-btn" style="border: 2px solid #009688;"></div>
</div>
<div id="bar_percent" class="layui-progress-bar layui-bg-green" lay-percent="0%">
<span id="percent_data" class="layui-progress-text">0%</span>
<div class="layui-slider-wrap" style="left: 100%;">
<div class="layui-slider-wrap-btn" style="border: 2px solid red;"></div>
</div>
</div>
</div>
<div class="timecard">
<div class="timecontainer">
<span>
距订单截止:
<span id="TimeCountdown" endtime="{pay_ordertime_value}">23天5小时25分18秒</span>
</span>
</div>
</div>
<script>
window.onload = function() {
if (document.getElementsByClassName('ts')[0]) {
var loadtext = document.getElementsByClassName('ts')[0].getElementsByTagName("a")[0].getElementsByTagName(
"font")[0].innerText;
} else {
var loadtext = document.getElementsByTagName("h2")[0].getElementsByTagName("font")[0].innerText;
}
console.log(loadtext == "已完成");
if (loadtext == "已取消" || loadtext == "") {
var set_percent = document.getElementById("bar_percent").setAttribute("lay-percent", "0%");
var set_barwidth = document.getElementById("bar_percent").style = "width: 0%;";
var set_percentbar = document.getElementById("percent_data").innerText = '完成度:0%';
return;
} else if (loadtext == "新申请") {
var set_percent = document.getElementById("bar_percent").setAttribute("lay-percent", "25%");
var set_barwidth = document.getElementById("bar_percent").style = "width: 25%;";
var set_percentbar = document.getElementById("percent_data").innerText = '完成度:25%';
return;
} else if (loadtext == "制作中") {
var set_percent = document.getElementById("bar_percent").setAttribute("lay-percent", "75%");
var set_barwidth = document.getElementById("bar_percent").style = "width: 75%;";
var set_percentbar = document.getElementById("percent_data").innerText = '完成度:75%';
return;
} else {
var set_percent = document.getElementById("bar_percent").setAttribute("lay-percent", "100%");
var set_barwidth = document.getElementById("bar_percent").style = "width: 100%;";
var set_percentbar = document.getElementById("percent_data").innerText = '完成度:100%';
return;
}
}
</script>
<script type="text/javascript">
function updateEndTime() {
var date = new Date();
var time = date.getTime();
var rsa = document.getElementById("TimeCountdown");
var endDate = rsa.getAttribute("endTime");
var endDate1 = eval('new Date(' + endDate.replace(/\d+(?=-[^-]+$)/, function(a) {
return parseInt(a, 10) - 1;
}).match(/\d+/g) + ')');
var endTime = endDate1.getTime();
var lag = (endTime - time) / 1000;
if (lag > 0) {
var second = Math.floor(lag % 60);
var minite = Math.floor((lag / 60) % 60);
var hour = Math.floor((lag / 3600) % 24);
var day = Math.floor((lag / 3600) / 24);
rsa.innerHTML = day + "天" + hour + "小时" + minite + "分" + second + "秒";
} else {
rsa.innerHTML = "\u5c01\u9762\u5236\u4f5c\u65f6\u95f4\u5df2\u622a\u6b62\uff01";
}
setTimeout("updateEndTime()", 1000);
}
updateEndTime();
</script>