获取当前日期

362 阅读1分钟

1.获取当前时间

var date = new Date();                //得到当前日期原始模式
var newyear = date.getFullYear();     //得到当前日期年份
var newmonth = date.getMonth() + 1;   //得到当前日期月份(注意: getMonth()方法一月为 0, 二月为 1, 以此类推。)
var day = date.getDate();            //得到当前某日日期(1-31)
newmonth = (newmonth<10 ? "0"+newmonth:newmonth);  //10月以下的月份自动加0
var newdate = newmonth + "月" + day +"日" + nweyear + "年";
$("#sysday span").html(newdate)

Snipaste_2021-07-08_15-52-08.png

function getFormatDate(){
    var nowDate = new Date();
    var year = nowDate.getFullYear();
    var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1;
    var date = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
    var hour = nowDate.getHours()< 10 ? "0" + nowDate.getHours() : nowDate.getHours();
    var minute = nowDate.getMinutes()< 10 ? "0" + nowDate.getMinutes() : nowDate.getMinutes();
    var second = nowDate.getSeconds()< 10 ? "0" + nowDate.getSeconds() : nowDate.getSeconds();
    return year + "-" + month + "-" + date+" "+hour+":"+minute+":"+second;
}
var str = getFormatDate();
console.log(str);

Snipaste_2021-07-08_15-48-38.png

2、 获取当前时间时间戳:

(new Date()).getTime()

3、获取并截取时间戳:

var global_time = ((new Date()).getTime() + '').substring(0, 10);
((new Date()).getTime() + '')  是将整形变成字符串。
substring(0, 10) 只用于截取字符串,是从第0个开始截取,截取10个。

练习:实现一个倒计时页面

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #2a3852;
        }

        #box {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-top: 300px;
        }

        #box h1 {
            letter-spacing: 3px;
            font-weight: 500;
            color: #fff;
        }

        #time {
            display: flex;
            flex-direction: row;
            line-height: 50px;
        }

        #time span {
            font-size: 20px;
            color: #fff;
        }

        #time strong {
            text-align: center;
            margin-left: 20px;
            background-color: #3f5174;
            border-radius: 10px;
            width: 70px;
            height: 50px;
            display: block;
        }
    </style>
</head>

<body>
    <div id="box">
        <h1>距离国庆节,还有</h1>
        <div id="time">
            <span id="day">**天</span>
            <strong><span id="hour">**时</span></strong>
            <strong><span id="minute">**分</span></strong>
            <strong><span id="second">**秒</span></strong>
        </div>
    </div>

   <script>

        function my$(id) {
            return document.getElementById(id);
        }
        var daySpan = my$('day');
        var hourSpan = my$('hour');
        var minuteSpan = my$('minute');
        var secondSpan = my$('second');

        // 处理innerText和textContent的兼容性问题
        // 设置标签之间的内容
        function setInnerText(element, content) {
            // 判断当前浏览器是否支持 innerText
            if (typeof element.innerText === 'string') {
                element.innerText = content;
            } else {
                element.textContent = content;
            }
        }
        
        TimeRow();
        setInterval(TimeRow, 1000)

        function TimeRow() {
            var end = new Date('2021-10-1 0:0:0');
            var start = new Date();
            var time = getInterval(start, end);
            setInnerText(daySpan, time.day + '天');
            setInnerText(hourSpan, time.hour + '时');
            setInnerText(minuteSpan, time.minute + '分');
            setInnerText(secondSpan, time.second + '秒');
        }

        function getInterval(start, end) {
            // 两个日期对象,相差的毫秒数
            var interval = end - start;
            // 求 相差的天数/小时数/分钟数/秒数
            var day, hour, minute, second;

            // 两个日期对象,相差的秒数
            // interval = interval / 1000;
            interval /= 1000;

            day = parseInt(interval / 60 / 60 / 24);
            hour = parseInt(interval / 60 / 60 % 24);
            minute = parseInt(interval / 60 % 60);
            second = parseInt(interval % 60);

            return {
                day: day,
                hour: hour,
                minute: minute,
                second: second
            }
        }


    </script>
</body>

</html>