实现javascript倒计时时，其他html元素消失_Javascript_Html_Css

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

javascript html css

实现javascript倒计时时，其他html元素消失,javascript,html,css,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.

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


欢迎来到Tiffany&；有限公司。
欢迎光临本店
WiFi密码为：
钻石
它将在以下方面发生变化：

window.document.onload=函数（）{
勾选（）；
设置间隔（刻度，1000）；
};
函数tick（）{
var d=新日期（）；
var currentDate=新日期（d.getUTCFullYear（），
d、 getUTCMonth（），d.getUTCDate（），d.getUTCHours（），
d、 getUTCMinutes（），d.getUTCSeconds（），
d、 getutcmillesons（））；
var endDate=新日期（currentDate.getFullYear（），
currentDate.getMonth（），currentDate.getDate（）+（30
/* 
星期六*/
-currentDate.getDay（）），16
/*上午9点山
时间=格林尼治标准时间下午4点*/
);
var secondsUntilSaturday=Math.floor（（endDate.getTime（）-currentDate.getTime（））/1000）；
var timeUntilSaturday=第二时间（第二时间至周六）；
document.body.innerHTML=（timeuntillsaturday.h+“小时，+timeuntillsaturday.m+“分钟，+timeuntillsaturday.s+”
秒）；
}
功能秒至秒（秒）{
var小时=数学楼层（秒/（60*60））；
分钟的var除数=s%（60*60）；
var minutes=数学下限（除数为分钟/60）；
var除数为秒=除数为分钟%60；
var seconds=Math.ceil（除数为秒）；
var obj={
“h”：小时，
“m”：分钟，
“s”：秒
};
返回obj；
}

这是因为你正在用计时器替换全身内容

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

<div id="timer"></div>
<script>
document.getElementById('timer').innerHTML = (
        timeUntilSaturday.h +" hours, "+ 
        timeUntilSaturday.m +" minutes, "+ timeUntilSaturday.s +" 
        seconds"
    );
</script>

而不是为计时器添加

，并使用计时器设置内容

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

<div id="timer"></div>
<script>
document.getElementById('timer').innerHTML = (
        timeUntilSaturday.h +" hours, "+ 
        timeUntilSaturday.m +" minutes, "+ timeUntilSaturday.s +" 
        seconds"
    );
</script>


document.getElementById（'timer'）。innerHTML=(
timeuntillsaturday.h+“小时，”+
timeuntillsaturday.m+“分钟，+timeuntillsaturday.s+”
秒“
);

这是因为你正在用计时器替换全身内容

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

<div id="timer"></div>
<script>
document.getElementById('timer').innerHTML = (
        timeUntilSaturday.h +" hours, "+ 
        timeUntilSaturday.m +" minutes, "+ timeUntilSaturday.s +" 
        seconds"
    );
</script>

而不是为计时器添加

，并使用计时器设置内容

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

<div id="timer"></div>
<script>
document.getElementById('timer').innerHTML = (
        timeUntilSaturday.h +" hours, "+ 
        timeUntilSaturday.m +" minutes, "+ timeUntilSaturday.s +" 
        seconds"
    );
</script>


document.getElementById（'timer'）。innerHTML=(
timeuntillsaturday.h+“小时，”+
timeuntillsaturday.m+“分钟，+timeuntillsaturday.s+”
秒“
);

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

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

document.body.innerHTML将向body元素写入内容，替换其中的任何内容。您可以将

document.body.innerHTML

替换为

document.write

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

你的HTML内容会因为以下行而消失：

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

document.body.innerHTML将向body元素写入内容，替换其中的任何内容。您可以将

document.body.innerHTML

替换为

document.write

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

既然你在引用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>


//启动时间间隔以更新计时器。
setInterval（函数（）{
//星期六上午9点前获得ms。
var ms=每周的非最长时间（6,9,0,0）；
$（“#计时器”）.text（getHours（ms）+“hours”+getMinutes（ms）+“minutes”+getSeconds（ms）+“seconds”）；
}, 100);
//获取一周中某个特定时间之前的剩余时间。
函数直到星期五（天、小时、分钟、秒）{
var currdate=新日期（）；
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；
返回daydiff+hourdiff+mindiff+secdiff；
}
//从毫秒数中获取小时数。
功能时间（毫秒）{
返回数学楼层（ms/3600000）；
}
//从毫秒数中获取分钟数。
功能获取分钟数（毫秒）{
返回数学楼层（（ms%3600000）/60000）；
}
//从毫秒数中获取秒数。
函数getSeconds（毫秒）{
返回数学楼层（（ms%3600000）%60000）/1000）；
};

注意：

+newdate

只是在JavaScript中将日期转换为数字类型的简写

我希望这有帮助

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

既然您正在引用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>


//启动时间间隔以更新计时器。
setInterval（函数（）{
//星期六上午9点前获得ms。
var ms=未超时