web开发的第一个小作品--html svg +css+js时钟效果

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

Iris_plus

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

阅读量2.1k

点赞数 2

分类专栏： web开发文章标签： svg html css web javascript

本文链接：https://blog.csdn.net/iris_plus/article/details/48598437

版权

web开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

先上最后效果图：

html结构中使用SVG path来模拟时钟的轮廓，时钟动起来的js代码简单的使用js定时器来制作：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>时钟页面在线演示</title>
    <link type="text/css" rel="stylesheet" href="clock.css">
</head>
<body>

   
    <svg height="200" width="200" viewBox="0 0 1000 1000">
        <path d="M978,500c0,263.99-214.01,478-478,478s-478-214.01-478-478,214.01-478,478-478,478,214.01,478,478zm-888.93,237.25,20.179-11.65m779.16-449.85l22.517-13m-648.18,648.18,11.65-20.18m449.85-779.16l13-22.517m-711.75,410.93h23.305m899.7,0h26m-885.43-237.25,20.179,11.65m779.16,449.85,22.517,13m-648.18-648.18l11.652,20.183m449.85,779.16,13,22.517m-237.25-885.43v23.305m0,899.7,0,26" />
        <path d="M500,500,500,236" id="hour" />
        <path d="M500,500,500,120" id="min" />
        <path d="M500,500,500,90" id="sec" />
    </svg>

    

  

    <script type="text/javascript">
        setInterval(function () {
            function r(el, deg) {
                el.setAttribute('transform', 'rotate(' + deg + ' 500 500)')
            }
            var d = new Date()
            r(sec, 6 * d.getSeconds())
            r(min, 6 * d.getMinutes())
            r(hour, 30 * (d.getHours() % 12) + d.getMinutes() / 2)
        }, 1000)

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

插件中的CSS样式简单的渲染时钟的轮廓，给时针、分针和秒针添加不同的颜色：

html {
  background: #0e2e3a;  
}
svg {
  position: absolute;
  top: 10%;
  width: 95%;
  height: 80%;
}
path {
  stroke: #09151b;
  stroke-linecap:round;
  stroke-width: 42;
  fill:none;
}
#sec {
  stroke: #6f7f24;
  stroke-width: 20;
}
#min {
  stroke: #3d601b;
  stroke-width: 38;
}
#hour {
  stroke: #13441e;
  stroke-width: 38;
}

js代码使用setInterval来包含整个脚本，在里面的代码每1000毫秒运行一次。

d是一个date()对象变量。为了代码的简洁，html结构中给每一个元素都设置了一个ID。虽然不建议这样做，但这是将时针、分针和秒针与SVG元素匹配的最有效的方法。

r函数关注两个参数：元素的改变和旋转的角度。注意，我们讨论的是SVG元素的旋转，而不是CSS旋转，不用加各个厂商的前缀。

对应于sec的旋转角度，r函数通过ID和当前时间的6倍来计算。例如，如果当前时间的秒数为0，那么角度为0度，即不旋转。如果当前时间的秒数为30秒，那么30 x 6 = 180°，即秒针将旋转180°。（两个50 50是为了确保它们以SVG为中心进行旋转）。sec的旋转角度道理相同。hour则有一点不同：它使用的是当前的小时数除以12的余数乘以30，然后加上当前的分钟数除以2的值来旋转时针

ps: 让页面动态显示系统时间的方法：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
<div id="time"></div>

<script type="text/javascript">
change();
function change()
{
        var today;
        today = new Date();
        timeString = today.toLocaleString();
        document.getElementById("time").innerHTML = timeString;
        setTimeout("change();", 1000);
}
</script>

</body>