SVG时钟

最新推荐文章于 2023-10-18 19:39:51 发布

转载最新推荐文章于 2023-10-18 19:39:51 发布 · 440 阅读

文章标签：

#javascript #svg

JS权威指南笔记专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用SVG和JavaScript创建动态时钟的方法。通过定义SVG元素和应用JavaScript来更新时针、分针和秒针的位置，实现了时钟的实时显示效果。同时，还加入了阴影效果增强视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<title>SVG clock</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<!-- <link rel="stylesheet" type="text/css" href="canvas.css" media="all" />-->
<style type="text/css">
    #clock {
        stroke: #adcd3c;
        stroke-linecap: round;
        fill: #f2fddb;
    }
    #face {
        stroke-width: 3px;
    }
    #ticks {
        stroke-width: 2px;
    }
    #hands line {
        stroke-linejoin: bevel;
    }
    #hourhand {
        stroke-width: 4px;
    }
    #minutehand {
        stroke-width: 3px;
    }
    #numbers {
        font-size: 16px;
        text-anchor: middle;
        stroke: none;
        fill:  #92b0dd;
    }
</style>
<script type="text/javascript">
    function updateTime() {
        var now = new Date();
        var second = now.getSeconds();
        var min = now.getMinutes();
        var hour = (now.getHours() % 12) + min / 60;
        var secondangle = second * 6; //6 degrees for every minute
        var minangle = min * 6;        //6 degrees for every minute
        var hourangle = hour * 30;    //30 degrees for every hour

        var minhand = document.getElementById('minutehand');
        var hourhand = document.getElementById('hourhand');
        var secondhand = document.getElementById('secondhand');
        var shadhand = document.getElementById("shadow");
        var clocks = document.getElementById("clock");
        if(second%2==0){
            //alert(clocks);
            clocks.style.stroke="#adcd3c";
        }else{
            //alert(secondangle);
            clocks.style.stroke="#ad223c";
        }

        minhand.setAttribute('transform', 'rotate(' + minangle + ', 50, 50)');
        hourhand.setAttribute('transform', 'rotate(' + hourangle + ', 50, 50)');
        secondhand.setAttribute('transform', 'rotate(' + secondangle + ', 50, 50)');
        for (var i = shadhand.childElementCount - 1; i >= 0; i--) {
            var chr = shadhand.children[i];
            switch (chr.tagName)
            {
                case "feGaussianBlur":
                    /*if(secondangle/2)==1){
                     chr.setAttribute(dx=-1)
                     }else{
                     chr.setAttribute(dx=1)
                     }
                     alert(chr.tagName);*/
                    break;
                case "feOffset":
                    if(second%2==0){
                        //alert(secondangle);
                        chr.setAttribute("dx","-3");
                    }else{
                        //alert(secondangle);
                        chr.setAttribute("dx","3");
                    }
                    //alert(chr.tagName);
                    break;
                case "feMerge":
                    /*for (var i = 0; i < chr.childElementCount -1; i++) {
                     chr.children[i].
                     };*/
                    //alert(chr.tagName);
                    break;
                default:
                    alert("could not found the Attribute");
            }
        };

        setTimeout(updateTime, 1000); //update time for every second
    }
</script>
<body onload="updateTime()">
<svg id="clock" viewBox="0 0 100 100" width="500" height="500">
    <defs>
        <!-- define an filter use to add shadow of some element -->
        <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" />
            <feOffset in="blur" dx="-1" dy="1" result="shadow" lighting-color = "#adcd3c"/>
            <feMerge>
                <feMergeNode in="SourceGraphic"/>
                <feMergeNode in="shadow" />
            </feMerge>
        </filter>
    </defs>
    <!-- clock face -->
    <circle id="face" cx="50" cy="50" r="45" />
    <!-- mark time lines -->
    <g id="ticks">
        <line x1="50.00" y1="5.000" x2="50.00" y2="10.00" />
        <line x1="72.50" y1="11.03" x2="70.00" y2="15.36" />
        <line x1="88.97" y1="27.50" x2="84.64" y2="30.00" />
        <line x1="95.00" y1="50.00" x2="90.00" y2="50.00" />
        <line x1="88.97" y1="72.50" x2="84.64" y2="70.00" />
        <line x1="72.50" y1="88.90" x2="70.00" y2="84.64" />
        <line x1="50.00" y1="95.00" x2="50.00" y2="90.00" />
        <line x1="27.50" y1="88.90" x2="30.00" y2="84.64" />
        <line x1="11.03" y1="72.50" x2="15.36" y2="70.00" />
        <line x1="5.000" y1="50.00" x2="10.00" y2="50.00" />
        <line x1="11.03" y1="27.50" x2="15.36" y2="30.00" />
        <line x1="27.50" y1="11.00" x2="30.00" y2="15.36" />
    </g>
    <!-- mark some important numbers -->
    <g id="numbers">
        <text x="50" y="20">12</text>
        <text x="85" y="55">3</text>
        <text x="50" y="88">6</text>
        <text x="15" y="55">9</text>
    </g>
    <!-- show hands -->
    <g id="hands" filter="url(#shadow)">
        <line id="hourhand" x1="50" y1="50" x2="50" y2="24" />
        <line id="minutehand" x1="50" y1="50" x2="50" y2="20" />
        <line id="secondhand" x1="50" y1="50" x2="50" y2="16" />
    </g>
</svg>
</body>
</html>