原生js电子表

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
</head>
    <style>
        #clock{
            width: 245px;
            height: 60px;
            border: 1px solid #ccc;
            background: rgba(118,95,206,.6);

        }
        #time{
            font-size: 22px;
            float: left;
            margin: 10px;
        }
        #box{
            float: right;
            margin: 10px;
        }
    </style>
</style>
<body>
    <div id="clock">
        <div id="time"></div>
        <div id="box">
            <div id="date"></div>
            
            <div id="day"></div>
        </div>
    </div>
</body>
<script type="text/javascript">
   
        function $(id){
            return document.getElementById(id);
        }
        var mon=["1","2","3","4","5","6","7","8","9","10","11","12"];
        var week=["日","一","二","三","四","五","六"];
        clock();
        function clock(){
            var d=new Date();
        //获取年，月，日，星期
            var y=d.getFullYear();
            var m=d.getMonth();
            var r=d.getDate();
            var w=d.getDay();
        // 显示日期在date上  
            $("date").innerHTML=y+"年"+mon[m]+"月"+r+"日";
            $('day').innerHTML="星期"+week[w];
            //三元运算符
            var h=d.getHours()<10?"0"+d.getHours():d.getHours();
            var min=d.getMinutes()<10?"0"+d.getMinutes():d.getMinutes();
            var s=d.getSeconds()<10?"0"+d.getSeconds():d.getSeconds();

            $('time').innerHTML=h+":"+min+":"+s;

        }
        setInterval(clock,1000);

</script>
</html>
最后编辑于：2017.12.08 00:20:28
原生js电子表

推荐阅读更多精彩内容
