首页手记 Date对象输出时间的易错点，到底有哪些？

Date对象输出时间的易错点，到底有哪些？

标签：

Html/CSS JavaScript

关于输出年月日、星期几、时分秒的易错点：
  1.年份要通过getFullYear()获取，如果用getYear(),那么要加上1900
  2.月份要通过getMonth()获取，并且要加上1，因为它返回的值是0-11
  3.星期返回的值是0-6，因此要创建一个数组存放星期日到星期一，把返回值作为索引获取相应的字符串。
  4.分钟数和秒数为一位时，要在其前补零，这才符合习惯，而时钟数则不用。

   代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>利用Date对象输出时间</title>
<style type="text/css">
*{
    padding:0px;   
    margin:0px;}
.date{
    position:absolute;
    top:80px;
    left:80px;
    color:green;}
</style>
</head>
<body>
<script type="text/javascript">
    var weekdays=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];//建立数组，保存星期
    //动态创建div元素，将其添加入页面，并设置类名以添加样式。
    var div=document.createElement("div");
    document.body.appendChild(div);
    div.className="date";
        //通过函数获取时间
    function getMyTime(){
        var myDate=new Date();
        var year=myDate.getFullYear(),
            month=myDate.getMonth()+1,//注意：月份返回的是0-11，所以要加1
            date=myDate.getDate(),
            weekday=weekdays[myDate.getDay()],//将星期几保存到weekday中
            hours=myDate.getHours()//时钟数无需补零
            minutes=myDate.getMinutes()>=10?myDate.getMinutes():'0'+myDate.getMinutes(),//若分钟数只有一位，在其前补0
            seconds=myDate.getSeconds()>=10?myDate.getSeconds():'0'+myDate.getSeconds();//若秒数只有一位，在其前补0
        var y_m_d=year+"年"+month+"月"+date+"日";//将年月日字符串用变量y_m_d保存
        var h_m_s=hours+"时"+minutes+"分"+seconds+"秒";//将时分秒字符串用变量h_m_s保存
        div.innerHTML=y_m_d+"   "+weekday+"     "+h_m_s;//将时间写入div标签
    }
    window.onload = getMyTime();
    setInterval(getMyTime,500); //设置定时器，每隔0.5秒调用一次
</script>
</body>
</html>

几点说明：
    1.div元素也可以直接在body中创建，需添加class属性和id属性，以便样式的的设置和DOM操作
    2.样式的设置取决于具体的项目需要，实际项目中尽量不要使用*选择器来初始化样式
    3.getMyTime函数的最后三句话可以合并为一句，从而省去两个中间变量，本人觉得句子有点长，所有才拆分为三句
    4.关于定时器，也可以采用setTimeout，但要把它写到函数的内部。

点击查看更多内容