Question

我正在帮助社区广播电台建立一个新的网站。我们希望有div显示当前程序的标题和主机。

我的想法是将收音机时间表变成一个json文件，为html页面提供信息。

我的问题是：

是否可以根据一天中的时间仅向html提供相关的节目信息？
如果对＃1的回答是肯定的，那么哪些库有助于实现这一目标？例如，jQuery.getJSON可以根据时间解析json吗？（我在他们的文档中没有看到任何关于此的信息。）是否有其他库更适合这项任务？

Answer 1

您可以从用户获取当前时间，然后从json过滤数组以获取相关信息。请记住始终获得UTC时间，因为用户可以拥有不同的时区。我建议您使用Momentjs以这种方式完成此操作。

如果您一次没有所有数据，您仍然可以每隔x秒从服务器获取数据。将有一个有用的功能setInterval。

Answer 2

修改，更新

尝试

V2

(function () {
    // `titles`, i.e.g., `"morning program"`, `"afternoon program"` , etc.
    var titles = ["0", "1", "2", "3", "4"
                  , "5", "6", "7", "8"
                  , "9", "10", "11", "12"
                  , "13", "14", "15", "16"
                  , "17", "18", "19", "20"
                  , "21", "22", "23", "24"];
    var schedule = (function () {
        var _schedule = $.map(new Array(24), function (k, v) {
            return ["hour " + "<em>" 
                    + v + "</em> " 
                    + new Date().toLocaleString() 
                    + " <em>program " 
                    + titles[new Date().getHours()] 
                    + "</em>"]
        });
        return $("div")
        .html(_schedule[new Date().getHours()]) 
        && $("em").css("color", "blue");
    }());
    schedule();
    var s = setInterval(function () {
        schedule();
    }, 10000);
}());

// v1

// A rough draft pattern . 

// Edit, logic could probably use some adjustments , 
// i.e.g., when moving from `9:00:00 AM` to `10:00:00 AM`
// would necessitate adjusting from `.slice(-10)` to `slice(-11)` ; 
// minimization of redundancies, testing of logic with all possible schedules , 
// date values within ternary 

//    var schedule = {
//        "9:00:00 AM": "Morning Show",
//        "10:00:00 AM": "Afternoon Show"
//    };

//    var t = "9:00:00 AM";
//    var y = new Date().toLocaleString().slice(-11).replace(/:/g, "");
//    y.indexOf("AM") != -1 
//    ? (Number(y.replace(/\s+\w+/g, "")) > Number(t.replace(/:|[a-z]/gi, "")) && Number(y.replace(/\s+\w+/g, "")) < 100000 
//      ? (schedule.hasOwnProperty("9:00:00 AM") 
//        ? $("div").html(schedule["9:00:00 AM"]) // optional jquery `.load()` , `$.post()`
//        : $("div").html("next scheduled programming...")) // optional jquery `.load()` , `$.post()`
//      : $("div").html("next scheduled programming...")) // notification , error message
//    : $("div").html("next scheduled programming..." + schedule["10:00:00 AM"]); // notification , error message

http://jsfiddle.net/guest271314/YV83k/

在一天中的某些时间自动用json更新html

2 个答案: