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

Question

Hi i have a countdown system i want to know how to make it as a variable, this is the script: in secondpage.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>

i had solved the start year by putting "new date()", but the problem is with the end date, i want endYer, endMonth and endDay to be a variables that the user can input them, the input page 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 />

i want these input to be transfer to secondpage.html to use it in the countdown script

please tell me how.

Answer 1

I think what you're after is some server side code that will take the data submitted by a form on pageone.html and pass it through to secondpage.html when you submit it, which would require something like PHP (or another server side language of your choosing).

This would mean pageone.html would look something like this:

<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>

...and secondpage.html would become secondpage.php and would look something like this:

<?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>

Note the php tags in the countdown settings section passing through the values set as variables in the PHP at the top of secondpage.php

Hope that helps