Question

我在一个提供有限选项的CMS中工作 - 我需要一个Javascript或JQuery方法来创建按钮，每天出现30次，每天约5次。更复杂的是，周末的时间会发生变化。我是那些编码语言的初学者，但是我被我的CMS使用它们。

从逻辑上讲，这是我认为我需要做的事情：查找星期几（周一至周五导致一个时间表，周六至周日导致另一个）查找时间并在触发时间的30分钟内显示。

任何对代码或方法的指导都将非常感激。谢谢！

Answer 1

var foo=(new Date);
//get current date
foo.getDay();
//get current day
if(foo>5){
//weekend
}else{
//weekday
}
setInterval(function(){},1000)
//run a function every second (1000 millisecond)

我建议以设定的间隔检查当前日期的分钟数。如果分钟数低于5或介于30和35之间，请显示按钮否则，隐藏按钮。

$("button").show()
$("button").hide()

Answer 2

这将为您提供当前时间：

var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();

如果你在每小时运行一次的间隔中使用它，它将完美地工作：

$("#btn").hide();

//Run every hour
setInterval(function() {
        checkButton();
    }, 3600000);    //1000 milliseconds * 60 seconds * 60 minutes

function checkButton() {
    var date = new Date();
    var hours = date.getHours();
    var minutes = date.getMinutes();

    //Show button at 5:30 PM
    if(hours == 17 && minutes == 30) {
        $("#btn").show();
    }
    //Hide button at 6:00 PM
    if(hours == 18 && minutes == 0) {
        $("#btn").hide();
    }
}

Answer 3

这是一个解决方案，取决于服务器说明是否应该显示按钮。

我注意到其他答案很大程度上取决于用户留在页面上以确定按钮是否应该出现/消失。如果用户在一天中的不同时间访问该页面并且该按钮必须是否可见，那么该怎么办？

此解决方案将在查看页面时运行，而不仅仅是每个 nn 分钟（由用户的浏览器确定）。因此，它适用于新访问者，但也可以配置为定期运行页面上已有的访问者（通过setInterval - 请参阅代码示例的其他答案）。

请注意，我添加了一些不必要的位（例如覆盖了当前时间），因此OP可以强制模拟一天中的不同时间。

这是一个完整的例子;只需复制/粘贴到两个文件中：
1. index.php（或whatever.php）
2. my_php_processor_file.php（如果更改此名称，还必须在ajax代码块中更改对它的引用）

index.php （包括HTML / jQuery）：

<html>
    <head>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

        <script type="text/javascript">

            $(document).ready(function() {

                //runs on page load
                do_ajax();

                //manual run via button click
                $('#gobutt').click(function() {
                    do_ajax();
                });

                function do_ajax() {
                    //get user-supplied time for OP to test
                    utime = $('#params').val();

                    //contact server to see if time to show button
                    $.ajax({
                        type: "POST",
                        url: "my_php_processor_file.php",
                        data: 'usertime=' + utime, //only needed during OP testing time override
                        success:function(data){
                            //display report from server
                            $('#reportdiv').html(data);

                            //show or hide button
                            if (data=='yes') {
                                $('#mybutt').show();
                            }else{
                                $('#mybutt').hide();
                            }
                        } //END ajax success function

                    }); //END ajax code block

                } //END do_ajax() function

            }); //END $(document).ready()

        </script>
    </head>

<body>

    Insert time to check if button will appear:<br />
    <input id="params" type="text" value="13:30" /><br />
    <input id="gobutt" type="button" value="Submit Now" />
    <br /><br /><br />

    Results from Server:<br />
    <div id="reportdiv"></div>
    <input id="mybutt" type="button" value="Appears Only At Certain Times" style="display:none" />


</body>
</html>

<强> my_php_processor_file.php

<?php

//Get time on server in associative array (source: http://ca3.php.net/manual/en/function.localtime.php)
$localtime_assoc = localtime(time(), true);

//If a user-specified time provided in the #params input element:
if (isset($_POST['usertime']) == true) {
    if ($_POST['usertime'] != '') {
        //over-ride time from server with user-supplied values
        $aUT = explode(':', $_POST['usertime']);
        $localtime_assoc['tm_hour'] = $aUT[0];
        $localtime_assoc['tm_min'] = $aUT[1];
    }
}

//Hours when button should appear
$aHours = array('6', '9', '12', '15', '19', '21');


if ( in_array($localtime_assoc['tm_hour'], $aHours) ) {
    //button appears only in last 30 mins of hour
    if ( $localtime_assoc['tm_min'] >= 30 ) {
        echo 'yes';
    }else{
        echo 'right hour, wrong half hour';
    }

}else{
    echo 'Server time: ' . $localtime_assoc['tm_hour'] .":". $localtime_assoc['tm_min'] . " o'clock";
}

要识别星期几，请使用本页底部的 nrkkalyan 代码示例：

http://php.net/manual/en/function.jddayofweek.php

Answer 4

鉴于我之前关于依赖客户时间的警告，我决定冒险尝试，并编写一个纯JavaScript版本：

var timeList = [
    { 'days': [0,1,2,3,4], 'times': [ [ 10, 18 ], [12, 30] ] },
    { 'days': [5,6], 'times': [ [ 10,30 ], [12, 30] ] }
];

var minutesNearTimeListToShow = 30;
var pollSeconds = 60;

$(document).ready(function() {
    checkForShowing();
});

function checkForShowing() {

    var now = new Date();
    var currentDay = now.getDay();
    var currentHour = now.getHours();
    var currentMinute = now.getMinutes();
    var timeAndDay = getNextTimeAndDay (currentDay, currentHour, currentMinute);

    var nextAlertDue = new Date(now.getYear() + 1900, now.getMonth(), now.getDate(), timeAndDay.hour, timeAndDay.minute);
    nextAlertDue.setDate(now.getDate() - currentDay + timeAndDay.day);

    var differenceSeconds = (nextAlertDue - now) / 1000;

    if (differenceSeconds < minutesNearTimeListToShow * 60) {

        $(".myButton").show();
        window.setTimeout (function() {
            $(".myButton").hide();
        }, differenceSeconds * 1000);

    } else {
        $(".myButton").hide();
        window.setTimeout(checkForShowing, pollSeconds * 1000);
    }

}

function getNextTimeAndDay(tDay, tHour, tMinute) {

    var times = getTimesForDay(tDay);
    var nextTime = getNextTime (tHour, tMinute, times)

    if (!nextTime) {
        tHour = 0;
        tMinute = 0;        
        tDay++;
        if (tDay == 7) { tDay = 0; }
        times = getTimesForDay(tDay);
        nextTime = getNextTime (tHour, tMinute, times);
    }

    return { day: tDay, hour: nextTime[0], minute: nextTime[1] };

}

function getNextTime (tHour, tMinute, times) {

    for (var i in times) {
        if ((tHour < times[i][0]) || (tHour == times[i][0] && tMinute <= times[i][1])) {
            return times[i];
        }
    }

    return false;

}

function getTimesForDay(currentDay) {

    var times = false;

    for (var i in timeList) {
        var days = timeList[i].days;
        if (days.indexOf(currentDay) > -1) {
            times =  timeList[i].times;
        }
    }

    return times;

}

主要配置位于顶部，允许在不同的日期指定不同的时间。

每分钟一次，代码将检查是否在其中一个时间的半小时内;如果是，则显示按钮并设置setTimeout以在半小时结束时再次隐藏它（并重新开始轮询）。

请注意，如果代码在半小时内（例如20分钟内）开始，它将接收该代码，显示该按钮，并在10分钟后安排隐藏。

日期检查得到了相当好的测试，时间安排并没有那么多 - 随意建议更正！

需要javascript按钮在一天中的特定时间出现/消失

4 个答案: