更改CSS如果div中的日期超过24小时

时间:2014-07-16 08:44:23

标签: javascript jquery html css

我正在开发一个墙板来显示服务电话。

我希望在记录的日期范围内将墙板的背景更改为某种颜色(例如红色)'超过24小时,我对jQuery没有多少经验,我正在努力让这个工作!

希望这是有道理的!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Superslides - A fullscreen slider for jQuery</title>
<link rel="stylesheet" href="stylesheets/style.css">
</head>
<body>
<?php
    $conn=odbc_connect('wallboard_data','','');
    if (!$conn) {
        exit("Connection Failed: " . $conn);
    }
    $sql2="SELECT * FROM [data$]";
    $rs2=odbc_exec($conn,$sql2);
    if (!$rs2) {
        exit("Error in SQL");
    }
    echo " <div id=\"slides\">
    <ul class=\"slides-container\">";
    while (odbc_fetch_row($rs2)) {
        $date=odbc_result($rs2,"Date");
        $customer=odbc_result($rs2,"Customer");
        $region=odbc_result($rs2,"Region");
        $sla=odbc_result($rs2,"SLA");
        $machine_fault=odbc_result($rs2,"Machine Fault");
        $machine_type=odbc_result($rs2,"Machine Type");
        $cust_updated_date=odbc_result($rs2,"Customer Updated");

        $ops_mngr=odbc_result($rs2,"Ops manager Informed");
        $rgm_informed=odbc_result($rs2,"RGM Informed");
        echo "<li><div class=\"container\">Date logged: <div class=\"date\"><strong>$date</strong></div><br/>";
        echo "Customer Name: <div class=\"customer\"><strong>$customer</strong></div><br/>";
        echo "Region: <div class=\"region\"><strong>$region</strong></div><br/>";
        echo "SLA: <div class=\"sla\"><strong>$sla</strong></div><br/>";
        echo "Machine Fault: <div class=\"machine-fault\"><strong>$machine_fault</strong></div><br/>";
        echo "Machine Type: <div class=\"machine-type\"><strong>$machine_type</strong></div><br/>";
        echo "Customer Last Updated: <div class=\"customer-updated-date\"><strong>$cust_updated_date</strong></div><br/>";
        echo "Operations Manager Informed: <div class=\"ops\"><strong>$ops_mngr</strong></div><br/>";
        echo "RGM Informed: <div class=\"rgm\"><strong>$rgm_informed</strong></div></div></li>";
    }
    echo "</ul>";
    odbc_close($conn);
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="javascripts/jquery.easing.1.3.js"></script>
<script src="javascripts/jquery.animate-enhanced.min.js"></script>
<script src="jquery.superslides.js" type="text/javascript" charset="utf-8"></script>
<script>
    $(function() {
        $('#slides').superslides({
        hashchange: true,
        play: 5000
    });
    $('#slides').on('mouseenter', function() {
        $(this).superslides('stop');
        console.log('Stopped')
    });
    $('#slides').on('mouseleave', function() {
        $(this).superslides('start');
        console.log('Started')
    });
});
</script>
<script>
    $(".container .sla:contains('')")
        .closest("body").css("background-color" , "#590f0f");
</script>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

您可以使用Date.parsejQuery.eachsetInterval来检查您的列表项目&#39;定期约会。 小提琴: http://jsfiddle.net/9EUGf/2/

可能有点乱,但应该让你开始。