如何根據經過的天數更新css高度屬性

Question

我想更新CSS中製作的「溫度計」，該溫度計根據會計年度已過的天數而增加（截至6月30日） 。

目前，我通過更新css手動更新高度。例如，如果328/365天過去了，那麼它將設置爲89.86％。

#thermometer .progress { 
height:89.86%; 
} 

我怎樣才能得到高度自動更新基於會計年度已經過了多少天？

Answer 1

隨着今年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％。這只是描述了邏輯，可能需要進行一些調整。

Answer 2

你將不得不使用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 + '%'); 

Answer 3

使用下面的jQuery代碼：

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

來源

• How to find the current day of the year in PHP?
• https://api.jquery.com/ready/
• https://www.w3schools.com/jquery/jquery_get_started.asp