学习使用js实现日期时间动态显示的方法_时动态时间轴 js-优快云博客

本文链接：https://blog.youkuaiyun.com/guo_qiangqiang/article/details/122193269

学习使用js实现日期时间动态显示的方法

解决方案

得到当前时间

var date = new Date();

格式化为本地时间

var d1 = date.toLocaleString();

//使页面每秒显示一次时间

setInterval()  定时器实现

显示到页面
获取div标签并将时间写入

示例1

在这里插入图片描述

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>动态显示时间</title>
    <style type="text/css">
        #times {
            width: 200px;
            height: 20px;
            border: 3px solid gray; /*如果不加实线无法显示边框*/
        }
    </style>
</head>
<body>

欢迎~~当前时间：
<span id="nowDataTimeSpan"></span>

<script type="text/javascript">
   
    function showTime() {
        var today = new Date();
        var ye = today.getFullYear();	//年year
        var mo = today.getMonth() + 1;	//月month
        var da = today.getDate();		//日day
        var ho = today.getHours();		//小时hour
        var mi = today.getMinutes();	//分钟minute
        var se = today.getSeconds();	//秒second

        mo = checkTime(mo);
        da = checkTime(da);
        mi = checkTime(mi);
        se = checkTime(se);

        var weekday;
        if (today.getDay() == 0) weekday = "星期日";
        if (today.getDay() == 1) weekday = "星期一";
        if (today.getDay() == 2) weekday = "星期二";
        if (today.getDay() == 3) weekday = "星期三";
        if (today.getDay() == 4) weekday = "星期四";
        if (today.getDay() == 5) weekday = "星期五";
        if (today.getDay() == 6) weekday = "星期六";

        document.getElementById("nowDataTimeSpan").innerHTML = ye + "-" + mo + "-" + da + " " + ho + ":" + mi + ":" + se + " " + weekday;
        setTimeout("showTime()", 1000);	//每一秒重新加载

        function checkTime(i) {
            if (i < 10)
                i = "0" + i;
            return i;
        }	//时间格式
    }
    showTime();
</script>
</body>
</html>

示例2

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>动态显示时间</title>

    <style type="text/css">
        #times {
            width: 200px;
            height: 20px;
            border: 3px solid gray; /*如果不加实线无法显示边框*/
        }
    </style>
</head>

<body>
<div id="times">

</div>

<script type="text/javascript">
    //得到时间并写入div
    function getDate() {
        //获取当前时间
        var date = new Date();
        //格式化为本地时间格式
        var date1 = date.toLocaleString();
        //获取div
        var div1 = document.getElementById("times");
        //将时间写入div
        div1.innerHTML = date1;
    }

    //使用定时器每秒向div写入当前时间
    setInterval("getDate()", 1000);

</script>
</body>
</html>