如何根据经过的天数更新css高度属性

我想更新CSS中制作的“温度计”，该温度计根据会计年度已过的天数而增加（截至6月30日）。如何根据经过的天数更新css高度属性

目前，我通过更新css手动更新高度。例如，如果328/365天过去了，那么它将设置为89.86％。

#thermometer .progress { 
height:89.86%; 
}

我怎样才能得到高度自动更新基于会计年度已经过了多少天？

来源

2017-05-25 Fly Guy

您尝试过哪些JavaScript代码？ – Anthony

随着今年6月30日结束，该代码应该是

var now = new Date(); 
var isLeapYear = //can be googled to find algorithm 
var start = new Date(now.getFullYear(), 0, 0); 
var diff = now - start; 
var oneDay = 1000 * 60 * 60 * 24; 
var day = Math.floor(diff/oneDay);  
var days_as_percentage_of_year = (((day + (isLeapYear?182:181)) % (isLeapYear?366:365))/(isLeapYear?366:365)) * 100; 

$("#thermometer .progress").css('height', days_as_percentage_of_year + '%');

因此，在这种情况下，6月30日将显示为100％，12月31日接近50％。这只是描述了逻辑，可能需要进行一些调整。

来源

2017-05-25 19:27:21 Saksham

你将不得不使用JavaScript/jQuery的更新的高度内联的价值：

var now = new Date(); 
var start = new Date(now.getFullYear(), 0, 0); 
var diff = now - start; 
var oneDay = 1000 * 60 * 60 * 24; 
var day = Math.floor(diff/oneDay);  
var days_as_percentage_of_year = (day/365) * 100; 

$("#thermometer .progress").css('height', days_as_percentage_of_year + '%');

来源

2017-05-25 18:59:44 Lowkase

这是您的代码的[jsfiddle]（https://jsfiddle.net/njvj89qL/）。 – Anthony

-1

使用下面的jQuery代码：

$(document).ready(function() { 
    var currentheight = (<?php echo date('z') + 1; ?>/365)*100; 
    $('#thermometer .progress').css('height',currentheight+'%'); 
});

来源

2017-05-25 19:04:52 JoostS

如何根据经过的天数更新css高度属性

回答

相关问题