Javascript 达到设定的时间/日期时填充css进度条值/宽度
我正在尝试制作一个css进度条，其宽度由日期和时间定义 其目的是在达到特定的预定义日期和时间集时创建进度条 例如：当日期为2014年12月25日时，Progressbar达到100%。 我认为计算方法应该是：[（date&time_defined）-（date&time_today）]=宽度百分比的值，所以当[（date&time_defined）==（date&time_today）]宽度百分比应该是100% 这是我使用的progressbar css代码Javascript 达到设定的时间/日期时填充css进度条值/宽度,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我正在尝试制作一个css进度条，其宽度由日期和时间定义 其目的是在达到特定的预定义日期和时间集时创建进度条 例如：当日期为2014年12月25日时，Progressbar达到100%。 我认为计算方法应该是：[（date&time_defined）-（date&time_today）]=宽度百分比的值，所以当[（date&time_defined）==（date&time_today）]宽度百分比应该是100% 这是我使用的progressbar css代码 <html>
<html>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(function() {
$(".meter > span").each(function() {
$(this)
.data("origWidth", $(this).width())
.width(0)
.animate({
width: $(this).data("origWidth")
}, 1200);
});
});
</script>
<style>
.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>
<div class="meter">
<span style="width: PERCENTAGE%"></span>
</div>
</body>
</html>
$（函数（）{
$（“.meter>span”）。每个（函数（）{
$（本）
.data（“origWidth”，$（this）.width（））
.宽度（0）
.制作动画({
宽度：$（this）.data（“origWidth”）
}, 1200);
});
});
.meter{
高度：20px；/*可以是任何东西*/
位置：相对位置；
余量：60px 0 20px 0；/*仅用于演示间距*/
背景:#555；
-moz边界半径：25px；
-webkit边界半径：25px；
边界半径：25px；
填充：10px；
-webkit盒阴影：插图0-1px 1px rgba（255255,0.3）；
-moz盒阴影：插入0-1px 1px rgba（255255,0.3）；
盒影：插图0-1px1pRGBA（255255,0.3）；
}
.米>跨度{
显示：块；
身高：100%；
-webkit边框右上半径：8px；
-webkit边框右下半径：8px；
-moz边框半径右上角：8px；
-moz边框半径右下角：8px；
边框右上角半径：8px；
边框右下半径：8px；
-webkit边框左上半径：20px；
-webkit边框左下半径：20px；
-左上角moz边界半径：20px；
-moz边框半径左下角：20px；
边框左上半径：20px；
边框左下半径：20px；
背景色：rgb（43194,83）；
背景图像：-webkit渐变(
线性的
左下角，
左上角，
彩色光圈（0，rgb（43194,83）），
彩色光圈（1，rgb（84240,84））
);
背景图像：-moz线性梯度(
中底，
rgb（43194,83）37%，
rgb（84240,84）69%
);
-webkit盒阴影：
插图0 2px 9px rgba（255255255,0.3），
插图0-2px6pxRGBA（0,0,0,0.4）；
-moz盒阴影：
插图0 2px 9px rgba（255255255,0.3），
插图0-2px6pxRGBA（0,0,0,0.4）；
框阴影：
插图0 2px 9px rgba（255255255,0.3），
插图0-2px6pxRGBA（0,0,0,0.4）；
位置：相对位置；
溢出：隐藏；
}
.meter>span:after..animate>span>span{
内容：“；
位置：绝对位置；
顶部：0；左侧：0；底部：0；右侧：0；
背景图像：
-webkit梯度（线性、0、100%100%，
颜色停止（.25，rgba（255，255，255，.2）），
颜色停止（.25，透明），颜色停止（.5，透明），
颜色停止（.5，rgba（255，255，255，.2）），
颜色停止（.75，rgba（255，255，255，.2）），
颜色停止（.75，透明），到（透明）
);
背景图像：
-莫兹线性梯度(
-45度，
rgba（255，255，255，.2）25%，
透明25%，
透明50%，
rgba（255，255，255，.2）50%，
rgba（255，255，255，.2）75%，
透明75%，
透明的
);
z指数：1；
-webkit背景大小：50px 50px；
-moz背景大小：50px 50px；
-webkit动画：移动2s线性无限；
-webkit边框右上半径：8px；
-webkit边框右下半径：8px；
-moz边框半径右上角：8px；
-moz边框半径右下角：8px；
边框右上角半径：8px；
边框右下半径：8px；
-webkit边框左上半径：20px；
-webkit边框左下半径：20px；
-左上角moz边界半径：20px；
-moz边框半径左下角：20px；
边框左上半径：20px；
边框左下半径：20px；
溢出：隐藏；
}
.动画>跨度：之后{
显示：无；
}
@-webkit关键帧移动{
0% {
背景位置：0；
}
100% {
背景位置：50px 50px；
}
}
.orange>span{
背景色：#f1a165；
背景图像：-莫兹线性梯度（顶部，#f1a165，#f36d0a）；
背景图像：-webkit渐变（线性、左上、左下、颜色停止（0，#f1a165）、颜色停止（1，#f36d0a））；
背景图像：-webkit线性渐变（#f1a165，#f36d0a）；
}
.red>span{
背景色：#f0a3a3；
背景图像：-moz线性梯度（顶部，#f0a3a3，#f42323）；
背景图像：-webkit渐变（线性、左上、左下、颜色停止（0，#f0a3a3）、颜色停止（1，#f42323））；
背景图像：-webkit线性梯度（#f0a3a3，#f42323）；
}
.nostripes>span>span、.nostripes>span:after{
<script>
$(function(){
setTimeout(progressBar, 100);
});
function progressBar(){
var oldValue=$('.progressbar').val();
$('.progressbar').val(oldValue+1);
setTimeout(progressBar, 100);
}
</script>
<progress class="progressbar" value="10" max="100"></progress>
(difference of current from start date / difference of final date from start date) * 100
var targetDate = new Date("12/25/2014");
var beginDate = new Date("01/01/2014");
var totalTime = (targetDate - beginDate);
var dateProgress = new Date(data.Date) - beginDate;
var completionPercentage = (Math.round((dateProgress / totalTime) * 100));
var targetDate = new Date("12/25/2014");
var beginDate = new Date("01/01/2014");
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() // today's 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
});
});