javascript - 实现 javascript 倒计时时,其他 html 元素消失

标签 javascript html css

我做了一个布局并设置了所有内容,当我在我的文本下实现计数器部分时,所有其他 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>

最佳答案

您的 HTML 内容因以下行而消失:

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

document.body.innerHTML 会将内容写入 body 元素,替换那里的任何内容。您可以将 document.body.innerHTML 替换为 document.write

要回答你的第二个问题,没有 JavaScript 不能自己发送电子邮件,但它可以通过 AJAX 调用你服务器上的脚本来发送电子邮件。

关于javascript - 实现 javascript 倒计时时,其他 html 元素消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11745022/

相关文章:

javascript - jQuery Datepicker 输出格式化日期减去 1 个月

javascript - 将函数绑定(bind)到页面加载时不在 DOM 上的元素

javascript - 将鼠标悬停在选项上时更改颜色

javascript - 为什么注释掉这段代码的alert()行会导致它失败?

html - 子导航移动

html - CSS - 一个元素中的下划线、删除线和上划线(带有样式和颜色)

jquery - 图像随机淡入和淡出

javascript - 如何添加动画效果以淡入/淡出文本?

javascript - 如何设置事件的 css 选项卡菜单?

javascript - 如何确保 DOM 元素在包含 Flash 对象时触发鼠标悬停