您现在的位置：首页 >> 前端 >> 内容

网页动态时钟特效实现教程

时间：2017/10/31 15:35:34 点击：

　　核心提示：网页动态时钟特效实现教程!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8style#p1,#p2{float: left;background-color...

网页动态时钟特效实现教程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #p1,#p2{
            float: left;
            background-color: #F2AD0A;
            margin-left: 30px;
            margin-top: 300px;
            padding: 20px;
            border: dashed red 3px;
            border-radius: 8px;
        }
    </style>
    <title>时间对象制作时钟特效</title>
</head>
<body>
<p id="p1">欢迎来到“指尖敲打着世界”的博客空间！现在时间：</p>
<p id="p2"></p>
</body>
<script>
    function getTime() {
        var date = new Date();
        var year = date.getFullYear();
        console.log(year);/*年*/
        var month = date.getMonth()+1;
        console.log(month);/*月*/
        month =format(month);
        var today = date.getDate();
        console.log(today);
        today=format(today);
        var day = date.getDay();
        console.log(day);
        day =  formatWeek(day);
        var hour = date.getHours();
        console.log(hour);
        hour=format(hour)
        var min = date.getMinutes();
        console.log(min);
        min=format(min);
        var second = date.getSeconds();
        console.log(second);
        second=format(second);
        if (hour>12){
            hour-=12;
            add = "PM"
        }else {
            hour = hour;
            add = "AM"
        }
//        if (second<10){
//            ad= "0";
//        }else {
//            ad = "";
//        }
        var str = year+"&nbsp;&nbsp;"+"年"+"&nbsp;&nbsp;"+month+"&nbsp;&nbsp;"+"&nbsp;&nbsp;"+"月"+"&nbsp;&nbsp;"+today+"&nbsp;&nbsp;"+"日"+"&nbsp;&nbsp;"+hour+"&nbsp;&nbsp;"+":"+"&nbsp;&nbsp;"+min+":"+"&nbsp;&nbsp;"+second+"&nbsp;&nbsp;"+add+"&nbsp;&nbsp;"+"星期"+"&nbsp;&nbsp;"+day;
        document.getElementById("p2").innerHTML = str;
        setTimeout(getTime ,1000);
    }
    setTimeout(getTime ,1000);

    /*时间的格式化*/
    function format(data) {
        if (data<10){
            return "0"+data;

        }else {
            return data
        }
    }
    function formatWeek(data) {
        switch (data){
            case 0:
                return "天";
                break;
            case 1:
                return "一";
                break;
            case 2:
                return "二";
                break;
            case 3:
                return "三";
                break;
            case 4:
                return "四";
                break;
            case 5:
                return "五";
                break;
            case 6:
                return "六";
                break;
        }
    }
</script>
</html>