使用 jQuery 从 HTML 中解析时间数据答案

【问题标题】：Parse time data from HTML using jQuery使用 jQuery 从 HTML 中解析时间数据
【发布时间】：2011-05-22 12:34:53
【问题描述】：

我的页面上有一个 javascript 小部件，用于输出日出和日落的时间。以下代码是输出的内容（假设这些时间每天都在变化）。我对小部件的输出无法控制。

<div id="sun_container">
    <div class="details">
        Sunrise: <strong>7:00AM</strong> |
        Sunset: <strong>4:30PM</strong>
    </div>
</div>

在我页面的其他地方，我有一个看起来像这样的图像标签：

<div id="sun_button">
    <img src="images/day.png">
</div>

我想解析出日出时间和日落时间，并将它们与当前服务器时间进行比较（如果需要，我可以通过 PHP 输出）。

如果当前服务器时间不在日出和日落时间之间，那么我想将图像src更改为"images/night.png"。

关于如何做到这一点的任何想法？

编辑：我现在正在使用页面<head> 输出服务器时间：

var server_time = "<?=date("H:i:s", time())?>";

输出如下内容：

var server_time = "17:07:41";

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您可以使用DateJS JavaScript library 轻松做到这一点：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://www.datejs.com/build/date.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 var sunrise = Date.parse($(".details strong:eq(0)").text());
 var sunset = Date.parse($(".details strong:eq(1)").text());
    if(Date.parse("" + server_time).between(sunrise, sunset)) { 
       $("img").attr("src","images/day.png")
    }
    else {
       $("img").attr("src","images/night.png")
    }
});
</script>

Try it here!

【讨论】：

我并不介意我必须包含一个额外的 JS 库。这个答案包括我解决问题所需的一切。
一旦它们是日期，您可以使用内置的日期属性轻松比较它们。

【解决方案2】：

我想你正在寻找这篇文章：What is the best way to parse a time into a Date object from user input in Javascript?

同样的前提，它是 javascript，但这似乎是最好的解决方案。

编辑另外，请参阅@Ender 的解决方案，了解如何检索数据。

【讨论】：

这篇文章有助于将字符串解析为日期，但对日期比较没有帮助。

【解决方案3】：

好吧，您可以通过执行以下操作来获取日出/日落时间：

var sunrise = $('#sun_container .details strong:eq(0)').text();
var sunset = $('#sun_container .details strong:eq(1)').text();

从那里可能将服务器时间写入 JS var，进行比较，然后：

if (isNight) {
    $('#sun_button img').attr('src', 'images/night.png');
}

这应该让你开始。

【讨论】：

这对我开始很有帮助，但没有包含任何关于将字符串日出和日落解析为日期并进行比较的信息。

【解决方案4】：

假设您可以在 24 小时内生成这样的容器：

<div id="server_time">18:00</div>
<script>
$(function() {
// Assume server_time is 24hr
var server = new Date(Date.parse("2000-01-01 " + $('#server_time').text()));
var sunrise = $('#sun_container .details strong:eq(0)').first().text();
var sunset = $('#sun_container .details strong:eq(1)').last().text();

// strip off AM/PM
sunrise = sunrise.substring(0, sunrise.length-2);
sunset = sunset.substring(0, sunset.length-2);

// Parse to standard dates
sunrise = new Date(Date.parse("2000-01-01 " + sunrise)) ;
sunset = new Date(Date.parse("2000-01-01 " + sunset));
// Add tweleve hours to compensate for PM
sunset.setHours(sunset.getHours() + 12);

if (server < sunrise || server > sunset)
    $('#sun_button > img').attr('src', 'images/night');
});
</script>

【讨论】：