我在一个提供有限选项的 CMS 中工作 - 我需要一个 Javascript 或 JQuery 方法来创建按钮，这些按钮每隔 30 分钟出现一次，每天大约 5 次。更复杂的是，周末的时间会发生变化。我是那些编码语言的初学者，但我被我的 CMS 逼着使用它们。
从逻辑上讲，这就是我认为我需要做的事情：找到一周中的哪一天（周一至周五导致一个时间表，周六至周日导致另一个）找到一天中的时间并在触发时间的 30 分钟内显示。
任何有关代码或方法的指导将不胜感激。谢谢！
问问题
3229 次
4 回答
0
这是一个解决方案，取决于服务器是否应该显示按钮。
我注意到其他答案很大程度上取决于留在页面上的用户来确定按钮是否应该出现/消失。如果用户在一天中的不同时间访问页面并且按钮必须可见或不可见，情况会怎样？
该解决方案将在查看页面时运行，而不仅仅是每nn分钟（由用户的浏览器确定）。因此，它适用于新访问者，但也可以配置为对页面上已有的访问者定期运行（通过 setInterval - 请参阅代码示例的其他答案）。
请注意，我添加了一些不必要的位（例如覆盖当前时间），因此 OP 可以强制模拟一天中的不同时间。
这是一个完整的示例；只需复制/粘贴到两个文件中：
1. index.php（或任何.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的代码示例：
于 2013-09-04T17:29:34.453 回答
0
鉴于我之前对依赖客户端时间的警告，我决定冒险尝试，并编写一个纯 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 分钟后。
日期检查经过了相当好的测试，日程安排没有那么多 - 随时提出更正建议！
于 2013-09-05T11:26:20.777 回答
0
这将为您提供当前时间：
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();
}
}
于 2013-09-04T16:13:03.590 回答
0
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()
于 2013-09-04T16:06:45.963 回答