js简单实现动态刷新时间

TNT，cnd 2019-01-18 08:59:46

开发工具与关键技术：Visual Studio2015
作者：华境聪
撰写时间：2019/1/18
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
先说下这个代码的实在意义：动态获取当前时间，可以为我们的项目提供时间的动态显示功能，让自己的项目展示更加可观性，下面开始讲解代码。
首先，创建一个用于显示时间的”p”标签，在”body”标签给一个onload 自动加载事件，写一个time()方法，在下面定义该方法，获取当前时间，进行判断，再通过setInterval方法每隔1s自动执行获取id为time的html的值，即可实现。

@{    

    Layout = null;    

}    

    

<!DOCTYPE html>    

    

<html>    

<head>    

    <meta name="viewport" content="width=device-width" />    

    <title>时间动态显示</title>    

</head>    

<body onload ="time()">    

    <div>     

        <p id="Time"></p>    

    </div>    

    <script>    

        function time() {    

            var time = new Date();    

            if (time.getHours() >= 6 && time.getHours() < 12) {    

                setInterval("document.getElementById('Time').innerHTML = new Date().getFullYear() + '年' +  new Date().getMonth()+1 + '月'+  new Date().getDate() + '日' + ' 上午' + new Date().getHours() + '点' + new Date().getMinutes() + '分' + new Date().getSeconds() + '秒';", 1000);    

                //setInterval：每隔1000毫秒执行一次方法    

            }    

            else if (time.getHours() > 12 && time.getHours() <= 18) {    

                setInterval("document.getElementById('Time').innerHTML = new Date().getFullYear() + '年' +  new Date().getMonth()+1 + '月'+  new Date().getDate() + '日' + ' 下午' + new Date().getHours() + '点' + new Date().getMinutes() + '分' + new Date().getSeconds() + '秒';", 1000);    

            } else if (time.getHours() > 18) {    

                setInterval("document.getElementById('Time').innerHTML = new Date().getFullYear() + '年' +  new Date().getMonth()+1 + '月'+  new Date().getDate() + '日' + ' 晚上' + new Date().getHours() + '点' + new Date().getMinutes() + '分' + new Date().getSeconds() + '秒';", 1000);    

            } else if ( time.getHours() < 6) {    

                setInterval("document.getElementById('Time').innerHTML = new Date().getFullYear() + '年' +  new Date().getMonth()+1 + '月'+  new Date().getDate() + '日' + ' 凌晨' + new Date().getHours() + '点' + new Date().getMinutes() + '分' + new Date().getSeconds() + '秒';", 1000);    

            }    

        }      

    </script>    

</body>    

</html>