使用layui的进度条和数据条制作时间进度线

最新推荐文章于 2024-08-17 02:08:53 发布

Wiktok

最新推荐文章于 2024-08-17 02:08:53 发布

阅读量529

点赞数

文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/m0_50037012/article/details/133588336

版权

本文介绍了如何使用layui库中的进度条和数据条组件创建一个动态的时间进度线，同时结合JavaScript实现实时的时间倒计时功能，适用于项目管理或任务追踪场景。

摘要由CSDN通过智能技术生成

使用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 + "&#22825;" + hour + "&#23567;&#26102;" + minite + "&#20998;" + second + "&#31186;";
		} else {
			rsa.innerHTML = "\u5c01\u9762\u5236\u4f5c\u65f6\u95f4\u5df2\u622a\u6b62\uff01";
		}

		setTimeout("updateEndTime()", 1000);
	}
	updateEndTime();
</script>