0
我有一些HTML文件與CSS和JavaScript，它顯示進度條取決於項目開始日期，結束日期和當前日期，它工作正常，但我需要進度百分比顯示到欄中。顯示進度條上的進度百分比
有我的文件內容：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style type="text/css">
.meter {
height: 20px;
/* Can be anything */
position: relative;
margin: 60px 0 20px 0;
/* Just for demo spacing */
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
-moz-box-shadow : inset 0 -1px 1px rgba(255, 255, 255, 0.3);
box-shadow : inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}
.meter > span {
display: block;
height: 100%;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43, 194, 83);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(43, 194, 83)), color-stop(1, rgb(84, 240, 84)));
background-image: -moz-linear-gradient(center bottom, rgb(43, 194, 83) 37%, rgb(84, 240, 84) 69%);
-webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
-moz-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
position: relative;
overflow: hidden;
}
.meter > span:after, .animate > span > span {
content:"";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
-webkit-animation: move 2s linear infinite;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
.animate > span:after {
display: none;
}
@-webkit-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
.orange > span {
background-color: #f1a165;
background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1a165), color-stop(1, #f36d0a));
background-image: -webkit-linear-gradient(#f1a165, #f36d0a);
}
.red > span {
background-color: #f0a3a3;
background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0a3a3), color-stop(1, #f42323));
background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
}
.nostripes > span > span, .nostripes > span:after {
-webkit-animation: none;
background-image: none;
}
</style>
<title>Date to Percentage Progress</title>
<script type='text/javascript'>//<![CDATA[
var targetDate = new Date("07/12/2017");
var beginDate = new Date("04/20/2017");
var totalTime = (targetDate - beginDate);
$(function() {
//Create a custom event on the span to handle incoming data for animation.
$(".meter > span").bind("progress-event", function (e, data) {
$(this)
.width($(this).prop("width"))
.data("origWidth", data.Complete)
.animate({
width: $(this).data("origWidth") + "%"
}, 1200);
$(this).prop("title",($(this).data("origWidth") + "%"));
});
//Initial animation on page load.
$(".meter > span").each(function() {
$(document).trigger("date-changed", {
Date: new Date()
});
});
//Apply the datepicker with an event handler for a selected date
$("#date-input").datepicker({
onSelect: function (selectedDate, obj) {
$(document).trigger("date-changed", {
Date: selectedDate
});
} // end onSelect function
});
});
//Custom event to handle a date being picked from the datepicker
$(document).bind("date-changed", function (e, data) {
var dateProgress = new Date(data.Date) - beginDate;
var completionPercentage = (Math.round((dateProgress/totalTime) * 100));
if(completionPercentage > 100) { //Make sure we don't go past 100
completionPercentage = 100;
} // end if
$(".meter > span").trigger("progress-event", {
Date: data.Date,
Complete: completionPercentage
});
});
//]]>
</script>
</head>
<body>
<div class="meter"> <span></span>
</body>
</html>
應該如何顯示此_progress percentage_？ – Picard
這是施工公司的網站，這個進度條根據開始，結束和當前日期自動顯示建築進度。 –