简单的倒计时

一、基础知识

首先，我们需要掌握一些关于js的基本知识

1.JavaScript Date 对象

Date 对象用于处理日期与时间，创建 Date 对象：new Date( )。
方法 | 描述

getDate( )	返回一个月中的某一天 (1 ~ 31)
getDay( )	返回一周中的某一天 (0 ~ 6)
getFullYear( )	以四位数字返回年份
getMonth( )	返回月份 (0 ~ 11)
getHours( )	返回小时 (0 ~ 23)
getMinutes( )	返回分钟 (0 ~ 59)
getSeconds( )	返回秒数 (0 ~ 59)
getTime( )	返回 1970 年 1 月 1 日至今的毫秒数

2.setTimeout( )函数

该方法用于在指定的毫秒数后调用函数或计算表达式。
语法： (提示：1000ms = 1s)
setTimeout(要执行的代码, 等待的毫秒数)
setTimeout(JavaScript函数, 等待的毫秒数)

3.setInterval()函数

可按照指定的周期（以毫秒计）来调用函数或计算表达式。
js中的setInterval( )每隔指定的时间就执行对应的函数
setInterval()函数的语法如下：
setInterval ( code, milliseconds[, args...] )
例：setInterval('alert("Hello");', 3000); 即3秒执行一次alert
setInterval( )与setTimeout( )的区别在于，只不过后者执行一次，而前者可以执行多次。

二、代码展示

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="css/countdown.css" />
        <title>倒计时</title>
    </head>
    <body onload="nowTime()">
        <div id="now">
            <script>
                function nowTime(){
                    var today=new Date(); //创建 Date 对象
                    var h=today.getHours(); //返回 Date 对象的小时 (0 ~ 23)
                    var m=today.getMinutes(); //返回 Date 对象的分钟 (0 ~ 59)
                    var s=today.getSeconds(); //返回 Date 对象的秒数 (0 ~ 59)
                    m=Addzero(m); //调用Addzero函数
                    s=Addzero(s);
                    document.getElementById('now').innerHTML="当前时间:"+h+":"+m+":"+s;
                    t=setTimeout(function(){nowTime()},1000);
                    //1秒后调用一次nowTime()函数
                }
                function Addzero(i){
                    //在小于10的数字前加一个‘0’
                    if (i<10) {i="0" + i;}
                    return i;
                }
            </script>
        </div>
        
        <div id="time">  
            <script>
                function count(y,m,d){ //参数ymd为截止时间的年月日
                    var now = Date.now();  //返回自1970年1月1日到当前时间的毫秒数
                    //返回从1970年1月1日至截止日期的毫秒数
                    var end = new Date(y,m-1,d).getTime();
                    var ms = end - now;
                    var s = Math.floor(ms/1000);   //floor()向下取整
                    var sec = Math.floor(s % 60 )  //秒数
                    var min = Math.floor(s / 60 % 60 );  //分钟
                    var hour = Math.floor(s / 60 / 60 % 24);  //小时
                    var day = Math.floor(s / 60 / 60 / 24);  //天数

                    var text1 = "距离CET-6还有"+day+"天"+hour+"时"+min+"分"+sec+"秒";
                    time.innerHTML = text1;  //获取内容
                }
                count(2019,12,14);  //设置截止日期
                //循环：每隔1秒执行一次function
                setInterval(function(){count(2019,12,14);},1000);
            </script>
        </div>  
        <p>Keep on going , never give up!</p>
    </body>
</html>

CSS:

body{
    text-align: center;
    width: 100%;
    background-image: url(../img/3.jpg);
    background-repeat: no-repeat;   /*不重复背景图像*/
    background-size:100% auto;     /*规定背景图片的尺寸*/
    
}
#now{
    font-size: 50px;
    margin: 90px 0 100px 0;
}
#time
{
    font-size: 60px;
    margin: 10px 0 10px 0;
}
p{
    font-size: 35px;
    margin: 140px 0 10px 0;
}

简单的倒计时

一、基础知识

1.JavaScript Date 对象

2.setTimeout( )函数

3.setInterval()函数

二、代码展示

三、效果

Aiolei

引用和评论

Assignment1_Divide_and_Conquer