javascript - 如何从文本框中获取用户输入以在倒计时脚本中使用它？

Question

嗨，我有一个倒计时系统，我想知道如何将其作为变量，这是脚本:在 secondarypage.html 中

<script>

    var message = new Array();
    message[0] = "status: just started";
    message[10] = "status: drinking a coffe";
    message[20] = "status: just finished setting up the database";
    message[30] = "status: brainstorming about the template";
    message[50] = "status: choosing the color scheme";
    message[80] = "status: thinking about the future";
    message[90] = "status: nearly done";
    message[100] = "status: finished";

    jQuery(document).ready(function () {


        function callback() {
            alert("finish");
        }
        $("#flipit").coffeetime({
            /* COUNTDOWN SETTINGS */
            message: message, // the message array with the array keys as percent values
            startYear: 2013,
            startMonth: 8,
            startDay: 1,
            endYear: 2015,
            endMonth: 0,
            endDay: 0,
            soundControlCssClass: 'icon sound margin-top-20  body-google-font',
            messageBoxId: "percent-message",
            callbackFinish: callback,
        });


        $(".flip-title-subheading").html("was created in: " + new Date() + " and we`ll finish after: " + window.endDate);

    });
    jQuery(document).ready(function () {
        setTimeout(function () {
            $(".flip-container").animate({
                "height": 105 + "px"
            }, 1000, "swing");
        }, 1000);
    });
</script>

我已经通过放置“new date()”解决了开始年份，但问题在于结束日期， 我希望 endYer、endMonth 和 endDay 成为用户可以输入的变量， 输入页面pageone.html:

Year: <input type="text" name="Year" id="Year" size="4"><br />
    Month: <input type="text" name="Month" id="Month" size="2"><br />
    Day: <input type="text" name="Day" id="Year" size="2"><br />

我希望将这些输入传输到 secondarypage.html 以在倒计时脚本中使用它

请告诉我怎么做。

Answer 1

我认为您需要的是一些服务器端代码，它将获取 pageone.html 上的表单提交的数据，并在提交时将其传递到 secondarypage.html，这需要 PHP 之类的东西(或其他您选择的服务器端语言)。

这意味着 pageone.html 看起来像这样:

<form method="post" action="secondpage.php">
    Year: <input type="text" name="Year" id="Year" size="4"><br />
    Month: <input type="text" name="Month" id="Month" size="2"><br />
    Day: <input type="text" name="Day" id="Year" size="2"><br />
    <input type="submit" value="submit" />
</form>

...第二页.html 将成为第二页.php，看起来像这样:

<?php
$end_year = (int) $_POST['Year'];
$end_month = (int) $_POST['Month'];
$end_day = (int) $_POST['Day'];
?>

<script type="text/javascript">

var message = new Array();
message[0] = "status: just started";
message[10] = "status: drinking a coffe";
message[20] = "status: just finished setting up the database";
message[30] = "status: brainstorming about the template";
message[50] = "status: choosing the color scheme";
message[80] = "status: thinking about the future";
message[90] = "status: nearly done";
message[100] = "status: finished";

jQuery(document).ready(function () {


    function callback() {
        alert("finish");
    }
    $("#flipit").coffeetime({
        /* COUNTDOWN SETTINGS */
        message: message, // the message array with the array keys as percent values
        startYear: 2013,
        startMonth: 8,
        startDay: 1,
        endYear: <?php echo $end_year; ?>,
        endMonth: <?php echo $end_month; ?>,
        endDay: <?php echo $end_day; ?>,
        soundControlCssClass: 'icon sound margin-top-20  body-google-font',
        messageBoxId: "percent-message",
        callbackFinish: callback,
    });


    $(".flip-title-subheading").html("was created in: " + new Date() + " and we'll finish after: " + window.endDate);

});
jQuery(document).ready(function () {
    setTimeout(function () {
        $(".flip-container").animate({
            "height": 105 + "px"
        }, 1000, "swing");
    }, 1000);
});
</script>

请注意倒计时设置部分中的 php 标记，它传递了在 secondarypage.php 顶部的 PHP 中设置为变量的值

希望有帮助