Javascript实践之时间显示效果

最新推荐文章于 2022-07-04 19:41:46 发布

2_NARUTO_2

最新推荐文章于 2022-07-04 19:41:46 发布

阅读量293

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Little_Frog_Prince/article/details/72066883

版权

那么我们如何使用这个对象呢？
var mediate = new Date()
先通过程序试下小试牛刀：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>当前系统时间</title>
    <script language="javascript" type="text/javascript">
        window.onload = function(){
            var myDate = new Date();
            alert(myDate);
        }
    </script>
</head>
<body>
    <div class = "content1">
        <div id = "show">显示时间的位置</div>
    </div>
</body>
</html>

这里写图片描述
如果我们想获取年份，代码可以这样编写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>当前系统时间</title>
    <script language="javascript" type="text/javascript">
        window.onload = function(){
            var myDate = new Date();
            alert(myDate.getFullYear());
        }
    </script>
</head>
<body>
    <div class = "content1">
        <div id = "show">显示时间的位置</div>
    </div>
</body>
</html>

实现的效果如下：
这里写图片描述
那么现在我们就可以显示年月日了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>当前系统时间</title>
    <script language="javascript" type="text/javascript">
        window.onload = function(){
            var myDate = new Date();
            var year = myDate.getFullYear();
            var month = myDate.getMonth() + 1;
            var date = myDate.getDate();
            document.getElementById('show').innerHTML = year +      '年' + month + '月' + date + '日';
        }
    </script>
</head>
<body>
    <div class = "content1">
        <div id = "show">显示时间的位置</div>
    </div>
</body>
</html>

效果如下：
这里写图片描述
再看下getDay函数

现在我们就可以做显示年月日时分秒的程序了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>当前系统时间</title>
    <script language="javascript" type="text/javascript">
        window.onload = function(){
            var myDate = new Date();
            var year = myDate.getFullYear();
            var month = myDate.getMonth() + 1;
            var date = myDate.getDate();
            var weekday = new Array(7);
            var d = myDate.getDay();
            var h = myDate.getHours();
            var m = myDate.getMinutes();
            var s = myDate.getSeconds();
            weekday[0] = "星期日";
            weekday[1] = "星期一";
            weekday[2] = "星期二";
            weekday[3] = "星期三";
            weekday[4] = "星期四";
            weekday[5] = "星期五";
            weekday[6] = "星期六";
            document.getElementById('show').innerHTML = year + '年' + month + '月' + date + '日' + weekday[d]
            + h + ':' + m + ":" + s;
        }
    </script>
</head>
<body>
    <div class = "content1">
        <div id = "show">显示时间的位置</div>
    </div>
</body>
</html>

效果如下：
这里写图片描述
但是我们发现时间是静止的，并没有动起来。
接下来我们就开始处理一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>当前系统时间</title>
    <script language="javascript" type="text/javascript">
        window.onload = function(){
            showTime();
        }
        function showTime(){
            var myDate = new Date();
            var year = myDate.getFullYear();
            var month = myDate.getMonth() + 1;
            var date = myDate.getDate();
            var weekday = new Array(7);
            var d = myDate.getDay();
            var h = myDate.getHours();
            var m = myDate.getMinutes();
            var s = myDate.getSeconds();
            weekday[0] = "星期日";
            weekday[1] = "星期一";
            weekday[2] = "星期二";
            weekday[3] = "星期三";
            weekday[4] = "星期四";
            weekday[5] = "星期五";
            weekday[6] = "星期六";
            document.getElementById('show').innerHTML = year + '年' + month + '月' + date + '日' + weekday[d]
                + h + ':' + m + ":" + s;
            setTimeout(showTime,500);  //每隔500ms执行一次
        }
    </script>
</head>
<body>
    <div class = "content1">
        <div id = "show">显示时间的位置</div>
    </div>
</body>
</html>

这样的话，时间确实会正常的走动并显示出来，但是如果是一位数的时候会出现这样的效果：这里写图片描述
于是，我们需要编写一个函数来检测是否为一位数并补全：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>当前系统时间</title>
    <script language="javascript" type="text/javascript">
        window.onload = function(){
            showTime();
        }
        function checkTime( i ) {
            if( i < 10 ){
                i = "0" + i;
            }
            return i;
        }
        function showTime(){
            var myDate = new Date();
            var year = myDate.getFullYear();
            var month = myDate.getMonth() + 1;
            var date = myDate.getDate();
            var weekday = new Array(7);
            var d = myDate.getDay();
            var h = myDate.getHours();
            var m = myDate.getMinutes();
            var s = myDate.getSeconds();
            m = checkTime( m );
            s = checkTime( s );
            weekday[0] = "星期日";
            weekday[1] = "星期一";
            weekday[2] = "星期二";
            weekday[3] = "星期三";
            weekday[4] = "星期四";
            weekday[5] = "星期五";
            weekday[6] = "星期六";
            document.getElementById('show').innerHTML = year + '年' + month + '月' + date + '日' + weekday[d]
                + h + ':' + m + ":" + s;
            setTimeout(showTime,500);  //每隔500ms执行一次
        }
    </script>
</head>
<body>
    <div class = "content1">
        <div id = "show">显示时间的位置</div>
    </div>
</body>
</html>