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.

要回答您的第二个问题，没有 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，我已经为你使用了它，但实际上只在一个地方......

这应该做你需要做的事情： 这是一个小提琴

这也是那个小提琴的代码：

<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只是将 Date 转换为 JavaScript 中的数字类型的简写。

我希望这会有所帮助。

编辑：更新到下周六早上 9 点。

于 2012-07-31T17:20:11.660 回答