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

时间:2014-05-04 13:11:47

标签: javascript jquery html html5

您好我有一个倒计时系统我想知道如何将其作为变量,这是脚本:在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>

我通过输入“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 />

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

请告诉我如何。

1 个答案:

答案 0 :(得分:0)

我认为你所追求的是一些服务器端代码,它将获取pageone.html上的表单提交的数据,并在提交时将其传递给secondpage.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>

...和secondpage.html将成为secondpage.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标记,通过在secondpage.php顶部的PHP中设置为变量的值

希望有所帮助