Javascript 将html选项设置为基于当前时间的默认值_Javascript_Php_Html_Mysql

Javascript 将html选项设置为基于当前时间的默认值

javascript php html mysql

Javascript 将html选项设置为基于当前时间的默认值,javascript,php,html,mysql,Javascript,Php,Html,Mysql,我制作了一个基本的punchclock网页&MySQL数据库，唯一的问题是，当人们在一天结束时不小心打卡而不是打卡，反之亦然，这会留下很多空白我需要一些代码，默认startfinish值在10:30之前开始，在14:30之后结束，但是如果需要，仍然允许用户更改选项请注意，确实要确定从何处开始，以及是否应该使用javascript或php。php作为表单操作在一个单独的文件中以下是需要更改选项的当前html代码： <select name="startfinish" id="star

我制作了一个基本的punchclock网页&MySQL数据库，唯一的问题是，当人们在一天结束时不小心打卡而不是打卡，反之亦然，这会留下很多空白

我需要一些代码，默认startfinish值在10:30之前开始，在14:30之后结束，但是如果需要，仍然允许用户更改选项

请注意，确实要确定从何处开始，以及是否应该使用javascript或php。php作为表单操作在一个单独的文件中

以下是需要更改选项的当前html代码：

<select name="startfinish" id="startend" required>
                <option selected="selected" disabled selection>Please select</option>
                <option value="Start">Start</option>
                <option value="End">End</option>

任何帮助都将不胜感激

谢谢

Danial

您可以使用Date对象和一点jQuery来获得您想要的结果：

如果您不反对PHP，可以检查当前时间，并将其与指定的时间进行比较。但是，这必须放在您正在使用的文件中，而不是您的操作文件中

<?php

// Set the default timezone so you don't run into timezone issues
// You can set this to whatever suits your application best
// Full list of supported timezones here: http://php.net/manual/en/timezones.php
date_default_timezone_set('America/Vancouver');

// Compare the current time to the start and end times
// This reads: if current time is before start time, option is selected, otherwise it's not
$start = (strtotime('now') < strtotime('10:30 AM today') ? 'selected="selected"' : '');
// This reads: if current time is after end time, option is selected, otherwise it's not
$end   = (strtotime('now') > strtotime(' 2:30 PM today') ? 'selected="selected"' : '');

?>

要在select控件中使用此选项，您需要在选项中回显以简写形式显示的变量。如果日期计算正确，将选择该选项，否则将保持不变。我从占位符中删除了所选内容，因为此设置将确保始终选择“开始”或“结束”

<select name="startfinish" id="startend" required>
  <option disabled selection>Please select</option>
  <option <?=$start?> value="Start">Start</option>
  <option <?=$end?> value="End">End</option>
</select>

在这种情况下使用PHP的好处是它运行服务器端而不是客户端，因此您不必担心用户禁用Javascript并破坏表单设计。不过，如果您已经在应用程序中依赖jQuery，这可能不是问题。

如果您不反对PHP，您可以检查当前时间，并将其与指定的时间进行比较。但是，这必须放在您正在使用的文件中，而不是您的操作文件中

<?php

// Set the default timezone so you don't run into timezone issues
// You can set this to whatever suits your application best
// Full list of supported timezones here: http://php.net/manual/en/timezones.php
date_default_timezone_set('America/Vancouver');

// Compare the current time to the start and end times
// This reads: if current time is before start time, option is selected, otherwise it's not
$start = (strtotime('now') < strtotime('10:30 AM today') ? 'selected="selected"' : '');
// This reads: if current time is after end time, option is selected, otherwise it's not
$end   = (strtotime('now') > strtotime(' 2:30 PM today') ? 'selected="selected"' : '');

?>

<select name="startfinish" id="startend" required>
  <option disabled selection>Please select</option>
  <option <?=$start?> value="Start">Start</option>
  <option <?=$end?> value="End">End</option>
</select>

在这种情况下使用PHP的好处是它运行服务器端而不是客户端，因此您不必担心用户禁用Javascript并破坏表单设计。不过，如果您已经在应用程序中依赖jQuery，那么这可能不是问题。

我假设该站点是静态生成的，在这种情况下，PHP不会从这个特定的苹果中得到好处。这里有一个只支持JS的方法

<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
function byId(e){return document.getElementById(e);}

window.addEventListener('load', onDocLoaded, false);

function onDocLoaded()
{
    initSelectElement();
}

function makeItemSelected(listElem, index)
{
    var i, n = listElem.options.length;

    for (i=0; i<n; i++)
    {
        if (index == i)
            listElem.options[i].setAttribute('selected','');
        else
            listElem.options[i].removeAttribute('selected');
    }
}

function initSelectElement()
{
    var curTime = new Date();
    var curHour = curTime.getHours();
    var curMin = curTime.getMinutes();

    if ((curMin <= 30) && (curHour <= 10))
    {
        makeItemSelected(byId('startend'), 1);
    }

    else if ((curMin >= 30) && (curHour >= 2))
    {
        makeItemSelected(byId('startend'), 2);
    }
}
</script>
<style>
</style>
</head>
<body>
    <select name="startfinish" id="startend" required>
                <option selected disabled>Please select</option>
                <option value="Start">Start</option>
                <option value="End">End</option>
    </select>
</body>
</html>

我假设该站点是静态生成的，在这种情况下，PHP不会从这个特定的苹果中获益。这里有一个只支持JS的方法

<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
function byId(e){return document.getElementById(e);}

window.addEventListener('load', onDocLoaded, false);

function onDocLoaded()
{
    initSelectElement();
}

function makeItemSelected(listElem, index)
{
    var i, n = listElem.options.length;

    for (i=0; i<n; i++)
    {
        if (index == i)
            listElem.options[i].setAttribute('selected','');
        else
            listElem.options[i].removeAttribute('selected');
    }
}

function initSelectElement()
{
    var curTime = new Date();
    var curHour = curTime.getHours();
    var curMin = curTime.getMinutes();

    if ((curMin <= 30) && (curHour <= 10))
    {
        makeItemSelected(byId('startend'), 1);
    }

    else if ((curMin >= 30) && (curHour >= 2))
    {
        makeItemSelected(byId('startend'), 2);
    }
}
</script>
<style>
</style>
</head>
<body>
    <select name="startfinish" id="startend" required>
                <option selected disabled>Please select</option>
                <option value="Start">Start</option>
                <option value="End">End</option>
    </select>
</body>
</html>

这似乎对我的Chrome不起作用，但是谢谢。这对我的Chrome不起作用，但是谢谢。这对我的Chrome不起作用，但是谢谢。非常好。谢谢你没有意识到你可以像这样在html中插入东西，下次我做得很好的时候会记住这一点谢谢你没有意识到你可以像这样在html中插入东西下次我做得很好的时候会记住这一点谢谢你没有意识到你可以像这样在html中插入东西下次我做这一次的时候会记住这一点，使用Chrome似乎对我不起作用。谢谢你的回答，虽然我试过这个，但使用Chrome似乎对我不起作用。谢谢你的回答，虽然我试过这个，但使用Chrome似乎对我不起作用。谢谢你的回答