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

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

jquery spring hibernate jsf

Jquery 如何根据天数更改图像颜色和内容？,jquery,spring,hibernate,jsf,Jquery,Spring,Hibernate,Jsf,我的web应用程序中有“计划”选项卡，如果单击“计划”选项卡，它将显示三个用于指示服务详细信息的图像（例如，服务1的图像1） 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_detai

我的web应用程序中有“计划”选项卡，如果单击“计划”选项卡，它将显示三个用于指示服务详细信息的图像（例如，服务1的图像1）

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;

最初，对于第一个服务，图像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;

在JSF生命周期中，您从数据库中读取服务日期，然后将其放入支持bean（模型）中，最后在浏览器中呈现该值。可以在隐藏组件中呈现服务日期（如果需要），如下所示：

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;

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;

然后读取这个值并从javascript中处理它，以便向用户显示颜色。请参见此完整示例作为指导：

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;

<!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>


.cgreen{背景色：springgreen；}
.cred{背景色：红色；}
.cyellow{背景色：黄色；}
.ishidden{display:none；}
服务日期（年月日）
刷新


指示信号
$（文档）.ready（函数（）{
var color演算=函数（）{
var color='cred'；
var today=新日期（）；
var serviceDate=新日期（$（'.service Date'）.attr（'value'））；
var fifteenBackwards=新日期（serviceDate.getFullYear（）、serviceDate.getMonth（）、serviceDate.getDate（）-15）；
如果（今天否则如果（fifteenBackwards嗨，你试过我的例子吗？谢谢逻辑，事实上需求发生了变化，所以我没有试过，但这个逻辑很好。谢谢！如果你认为我的答案解决了你的初始要求，请接受它。要将答案标记为已接受，请单击答案旁边的复选标记，将其从空心切换为绿色。你确定，这是正确的好逻辑