如何根據天數更改圖像顏色和內容？

-2

我在我的web應用程序中有Plan選項卡，如果點擊Plan選項卡，它將顯示三個圖像來指示服務詳細信息（例如服務1的image1）。如何根據天數更改圖像顏色和內容？

最初爲第一個服務圖片1將是綠色的，通過點擊圖片它會顯示它的服務和計劃細節。在服務日期的15天之前，圖像顏色也會變爲黃色，並且通過單擊圖像，它會顯示服務詳細信息，如服務日期。服務日期已過期，而不是變爲紅色。

CREATE TABLE `service_plan` (
    `serice_plan_id` int(3) NOT NULL AUTO_INCREMENT, 
    `serice_plan_name` varchar(20) DEFAULT NULL, 
    `serice_plan_rate` varchar(4) DEFAULT NULL, 
    `plan_details_id` int(5) DEFAULT NULL, 
    PRIMARY KEY (`serice_plan_id`) 
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

來源

2015-09-06 MJR

嗨，你試過我的例子嗎？ – lametaweb

感謝您的邏輯，實際上有一個需求的變化，所以我沒有嘗試，但這個邏輯是好的。 – MJR

謝謝！如果您認爲我的答案解決了您的初始需求，請接受它。要將答案標記爲已接受，請單擊答案旁邊的複選標記以將其從空心切換爲綠色。 – lametaweb

在你讀從DB服務日期JSF生命週期，然後把它放到你的支持bean（模型），最後呈現在您的瀏覽器的價值。您可以呈現一個隱藏的組件服務日期（如果你想）是這樣的：

，然後讀取此值，並以顯示顏色給用戶從JavaScript proccess它。看到這個完整的例子作爲指導：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
     .cgreen{ background-color: springgreen;} 
     .cred{ background-color: red;} 
     .cyellow{ background-color: yellow;} 
     .ishidden{display:none;} 
</style> 
</head> 
<body> 

     <span>Service Date (MM/dd/yyyy)</span>&nbsp; 
     <input class="service-date ishidden" value="09/23/2015 14:30:00" type="text"/> 
     <button id="refresh">Refresh</button> 
     <br/> 
     <span>Indicator</span>&nbsp; 
     <div id="indicator" style="height: 50px; width: 50px; display: inline-block;"></div> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script> 
<script> 

    $(document).ready(function() { 

     var colorCalculus = function(){ 

     var color = 'cred'; 
     var today = new Date(); 
     var serviceDate = new Date($('.service-date').attr('value')); 

     var fifteenBackwards = new Date(serviceDate.getFullYear(), serviceDate.getMonth(), serviceDate.getDate() - 15); 

     if(today < fifteenBackwards){ 
      color = 'cgreen'; 
      } 
     else if(fifteenBackwards <= today && today <= serviceDate){ 
      color = 'cyellow'; 
      } 

     $('#indicator').removeClass('cred cgreen cyellow'); 
     $('#indicator').addClass(color); 
    }; 

     $('#refresh').click(function(){colorCalculus();}); 

     colorCalculus(); 

    }); 
</script>  
</body> 
</html>

來源

2015-09-06 18:32:35 lametaweb

非常感謝你..它的工作很好！ – MJR

如何根據天數更改圖像顏色和內容？

回答

相關問題