网页动态时钟特效！一看就懂，附带效果图哦！！！

来源：互联网发布：上海兴安得力软件编辑：程序博客网时间：2024/06/05 01:05
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style>        #div1,#div2{            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><div id="div1">欢迎来到“指尖敲打着世界”的博客空间！现在时间：</div><div id="div2"></div></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("div2").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>
阅读全文
0 0