Javascript实践之时间显示效果

来源：互联网发布：网络兼职被骗如何解决编辑：程序博客网时间：2024/06/05 22:07

那么我们如何使用这个对象呢？
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>

这样的话，时间就正常的显示了：
这里写图片描述

0 0