0

レイアウトを作成し、すべてを設定しました。テキストの下にカウンター部分を実装すると、他のすべての HTML 要素が消えるのはなぜですか? また、カウンターが特定の時間になったときに電子メールでアラートを出す方法はありますか?

<!doctype html>
<html lang="en">

    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-
        scalable=0, width=device-width;">
        <title>Welcome to Tiffany &amp; Co.</title>
        <link rel="stylesheet" href="index.css"
        type="text/css" media="screen" />
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <!--Enable media queries in some unsupported subrowsers-->
        <script type="text/javascript" src="css3-mediaqueries.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>

    <body>
        <div id="wrapper">
            <h1>Welcome to Store</h1>
            <p>The WiFi Password is:</p>
            <h2 align=center>
                <font color="red">Diamonds</font>
            </h2>
            <p>It will change in:</p>
            <p>
                <script type="text/JavaScript">
                    window.document.onload = function () {
                        tick();
                        setInterval(tick, 1000);
                    };

                    function tick() {
                        var d = new Date();
                        var currentDate = new Date(d.getUTCFullYear(),
                        d.getUTCMonth(), d.getUTCDate(), d.getUTCHours(),
                        d.getUTCMinutes(), d.getUTCSeconds(),
                        d.getUTCMilliseconds());
                        var endDate = new Date(currentDate.getFullYear(),
                        currentDate.getMonth(), currentDate.getDate() + (30
                        /* 
                                saturday */
                        - currentDate.getDay()), 16
                        /* 9 AM Mountain 
                                Time = 4 PM GMT */
                        );
                        var secondsUntilSaturday = Math.floor((endDate.getTime() - currentDate.getTime()) / 1000);
                        var timeUntilSaturday = secondsToTime(secondsUntilSaturday);
                        document.body.innerHTML = (timeUntilSaturday.h + " hours, " + timeUntilSaturday.m + " minutes, " + timeUntilSaturday.s + " 
                                seconds");
                    }

                    function secondsToTime(secs) {
                        var hours = Math.floor(secs / (60 * 60));
                        var divisor_for_minutes = secs % (60 * 60);
                        var minutes = Math.floor(divisor_for_minutes / 60);
                        var divisor_for_seconds = divisor_for_minutes % 60;
                        var seconds = Math.ceil(divisor_for_seconds);
                        var obj = {
                            "h": hours,
                            "m": minutes,
                            "s": seconds
                        };
                        return obj;
                    }
                </script>
                <div id="logo">
                    <img src="logo.png" width="108" height="14" alt="Tiffany &amp; Co." />
                </div>
        </div>
    </body>

</html>
4

3 に答える 3

2

次の行が原因で、HTML コンテンツが表示されなくなります。

document.body.innerHTML = (timeUntilSaturday.h + " hours, " + timeUntilSaturday.m + " minutes, " + timeUntilSaturday.s + " seconds");

document.body.innerHTML はコンテンツを body 要素に書き込み、そこにあるものをすべて置き換えます。document.body.innerHTMLと交換できますdocument.write。

2 番目の質問に答えると、JavaScript はそれ自体で電子メールを送信できませんが、AJAX を介してサーバー上のスクリプトを呼び出して電子メールを送信できます。

于 2012-07-31T16:46:05.377 に答える
1

これは、全身のコンテンツをタイマーに置き換えているためです。

document.body.innerHTML = (
    timeUntilSaturday.h +" hours, "+ 
    timeUntilSaturday.m +" minutes, "+ timeUntilSaturday.s +" 
    seconds"
);

これの代わりにタイマーを追加<div>し、タイマーでコンテンツを設定します

<div id="timer"></div>
<script>
document.getElementById('timer').innerHTML = (
        timeUntilSaturday.h +" hours, "+ 
        timeUntilSaturday.m +" minutes, "+ timeUntilSaturday.s +" 
        seconds"
    );
</script>
于 2012-07-31T16:45:53.517 に答える
0

あなたはJQueryを参照しているので、私はそれをあなたのために使用しましたが、実際には1か所だけです...

これはあなたがする必要があることをするはずです: ここにフィドルがあります

また、そのフィドルのコードは次のとおりです。

<script>
//start your interval to update your timer.
setInterval(function() {
    //get ms until Saturday 9AM.
    var ms = untilTimeOfWeek(6, 9, 0, 0);
    $('#timer').text(getHours(ms) + ' hours ' + getMinutes(ms) + ' minutes ' + getSeconds(ms) + ' seconds');
}, 100);

//gets the time left until a specific time of week.


function untilTimeOfWeek(day, hour, min, sec) {
    var currdate = new Date();
    var currday = currdate.getDay();
    var daydiff = (day - currdate.getDay()) * 86400000;
    var hourdiff = (hour - currdate.getHours()) * 3600000;
    var mindiff = (min - currdate.getMinutes()) * 60000;
    var secdiff = (sec - currdate.getSeconds()) * 1000;
    return daydiff + hourdiff + mindiff + secdiff;
}
//get the hours from some milliseconds.

function getHours(ms) {
    return Math.floor(ms / 3600000);
}

//get the minutes from some milliseconds.

function getMinutes(ms) {
    return Math.floor((ms % 3600000) / 60000);
}

//get the seconds from some milliseconds.

function getSeconds(ms) {
    return Math.floor(((ms % 3600000) % 60000) / 1000);
};​
</script>
<div id="timer"></div>

注:+new Dateは、JavaScript で Date を数値型に変換するための省略形です。

それが役立つことを願っています。

編集: 次の土曜日の午前 9 時に更新されます。

于 2012-07-31T17:20:11.660 に答える