如何根据天数更改图像颜色和内容？

-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

如何根据天数更改图像颜色和内容？

回答

相关问题