工作之余Happy一下（实现时钟特效）

样式

测试代码：


DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>时钟特效title>
    <style> 
    body{
        background: #000;
    }
        .content{
            width: 400px;
            margin: auto;
            color: #fff;
        }
        #title{
            font-size: 25px;
        }
        #myclock{
            margin-top: 30px;
            font-size: 60px;
            font-weight: 900;
        }
    
    
    style>
head>
<body>
<div class="content">
        <div id="title"> 二十四进制时钟div>
        <div id="myclock">div>
div>
<script type="text/javascript">
    function disptime(){
        
        var today = new Date();
        var year=today.getFullYear();
        var month=today.getMonth()+1;
        var date=today.getDate();
        var day=today.getDay();
        var week={
            0:"星期日",
            1:"星期一",
            2:"星期二",
            3:"星期三",
            4:"星期四",
            5:"星期五",
            6:"星期六",
            }
 
        document.getElementById("title").innerHTML=year +"年  "+month+"月  "+date+"日  "+week[day];
        var today = new Date();  		//获得当前时间
        var hh = today.getHours();	//获得小时、分钟、秒
        var mm = today.getMinutes();//获得分钟
        var ss = today.getSeconds();//获得秒
        /*设置div的内容为当前时间*/
        document.getElementById("myclock").innerHTML=hh +":"+mm+": "+ss;
        setTimeout(disptime,1000);//setTimeout非标准格式，"disptime()"标准格式应加入引号和括号。
    }
    disptime()
    /*使用setInterval()每间隔指定毫秒后调用disptime()*/
//    var myTime = setInterval("disptime()",1000);
script>
body>
html>

如果需要较好看的时钟特效，比如：

直接上代码:


DOCTYPE html>
    
    时钟特效