HTML5时钟制作-CSDN博客

本文链接：https://blog.csdn.net/sxc1414749109/article/details/79470249

普通无特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Time</title>
    <style>
        html,body{
            background: black;
            height: 100%;
            margin: 0;
            /* 开启弹性布局 */
            display: flex;
            /* 水平居中 */
            justify-content: center;
            /* 垂直居中 */
            align-items: center;
        }
        main{

            /* border: 1px solid red; */
            text-align: center;
        }
        #time_div{
            font-size: 150px;
            color: chartreuse;
            font-family: 草书;
        }
        #date_div{
            font-size: 40px;
            color: peru;
            font-family: 草书;
        }
    </style>
</head>
<body>
    <main>
        <div id="time_div">12:12:12</div>
        <div id="date_div">2012年12月12日 星期二</div>
    </main>

    <!-- js代码块，获取当前时间 -->
    <script>
        // var varible 变量
        // document 文档：网页
        var time_msg = document.getElementById('time_div');
        var date_msg = document.getElementById('date_div');
        // 创建方法的格式
        // function+方法名称
        function showTime(){
            // 获取当前最新时间
            var newTime = new Date();
            // console输出log日志
            // 在控制台输出日志信息
            console.log(newTime)
            // alert弹出框
            // alert(newTime);

            var hours = newTime.getHours();
            var minutes = newTime.getMinutes();
            var second = newTime.getSeconds();
            // + 字符串拼接
            // + 如果是数字表示相加
            hours = hours < 10?'0' + hours : hours;
            minutes = minutes < 10? '0' + minutes : minutes;
            second = second < 10? '0' + second : second;
            // alert(hours);
            time_msg.innerText = hours + ':' + minutes + ':' + second;

            var year = newTime.getFullYear();
            var month = newTime.getMonth()+1;
            // 获取日
            var date = newTime.getDate();
            // 获取星期
            var day = newTime.getDay();
            if(day==0){
                day = '日'
            }
            else if(day==1){
                day = '一'
            }
            else if(day==2){
                day = '二'
            }
            else if(day==3){
                day = '三'
            }
            else if(day==4){
                day = '四'
            }
            else if(day==5){
                day = '五'
            }
            else{
                day = '六'
            }
            date_msg.innerText = year + '年' + month + '月' + date + '日 星期' + day; 
        }
        // 调用方法
        showTime();
        // invterval 时间间隔
        // 参数1：调用的方法
        // 参数2：间隔时间 单位默认是毫秒
        // 1000毫秒刷新一次
        setInterval(showTime,1000);
    </script>
</body>
</html>

带简单特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
</head>
<body>
    <header>
        <h1>时钟</h1>
    </header>
    <artical>
        <section>
            <figure>
                <canvas id="one" width="800" height="800"></canvas>
            </figure>
        </section>
    </artical>
    <script>
        var one=document.getElementById("one");
        var context=one.getContext("2d");
        function clock() {
            var sec=new Date().getSeconds();
            var min=new Date().getMinutes();
            var hour=new Date().getHours();
            //设置表盘
            //圆形渐变色参数分别为两个圆心和半径
            var g1 = context.createRadialGradient(400, 400, 0, 400, 400, 200);
            //设置两个渐变色的参数
            g1.addColorStop(0, "#fcfcfc");
            g1.addColorStop(1, "#defdff");
            //设置线宽
            context.lineWidth = 2;
            context.fillStyle = g1;
            context.beginPath();
            context.arc(400, 400, 200, 0,360, false);
            context.closePath();
            context.fill();
            context.stroke();
            context.fillStyle="yellow";
            context.beginPath();
            context.arc(400,400,10,0,360, false);
            context.closePath();
            context.fill();

            //时针刻度盘
            for (var i = 0; i < 12; i++) {
                context.save();
                //将坐标原点位置移动到圆心处
                context.translate(400, 400);
                context.rotate(i*30*Math.PI/180);
                context.beginPath();
                context.moveTo(0, -200);
                context.lineTo(0, -180);
                context.closePath();
                context.stroke();
                context.restore();//不重置会少两个刻度？？？
            }
            //分针刻度盘和秒针刻度盘
            for (var i = 0; i < 60; i++) {
                if (i%5!=0) {
                    context.save();
                    context.strokeStyle="red";
                    context.translate(400, 400);
                    context.rotate(i*6*Math.PI/180);
                    context.beginPath();
                    context.moveTo(0, -200);
                    context.lineTo(0, -190);
                    context.closePath();
                    context.stroke();
                    context.restore();
                }

            }
            //秒针
            context.save();
            context.fillStyle="red";
            context.translate(400, 400);
            context.rotate(sec*6*Math.PI/180);
            context.beginPath();
            context.moveTo(0, -170);
            context.lineTo(-5, -30);
            context.lineTo(0, -10);
            context.lineTo(5, -30);
            context.closePath();
            context.fill();
            context.restore();


            //分针
            context.save();
            context.fillStyle="blue";
            context.translate(400,400);
            context.rotate(min*6*Math.PI/180);
            context.beginPath();
            context.moveTo(0, -150);
            context.lineTo(-5, -30);
            context.lineTo(0, -10);
            context.lineTo(5, -30);
            context.closePath();
            context.fill();
            context.restore();

            //时针
            context.save();
            context.lineWidth=2;
            context.fillStyle="black";
            context.translate(400,400);
            context.rotate(hour*30*Math.PI/180);
            context.beginPath();
            context.moveTo(0, -130);
            context.lineTo(-8,-30);
            context.lineTo(0,-10);
            context.lineTo(8,-30);
            context.closePath();
            context.fill();
            context.restore();

        }
        context.clearRect(0,0,800,800);//清除画布
        clock();
        setInterval(clock,1000);

    </script>
</body>
</html>