• 工信部:17年12批新能源车推荐车型目录 2019-05-11
  • 美国再挑贸易战,中方强力回击,全球市场跌声一片 2019-05-11
  • 四川都江堰再现野生大熊猫踪迹 比3月拍到的更肥 2019-05-10
  • 坚持和发展马克思主义的宣言书 2019-05-10
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-04-26
  • 众星云集 “欧洲红魔”能否用战绩兑现黄金一代的天赋 2019-04-26
  • 比如最高检的12309检查服务中心,原来还有显示信访处理进程,不过没有几天就取消了。[上火][上火] 也就是说办与不办也没有人知道,下边省事了,上边也就轻松了。 2019-04-16
  • 男女差别有多大?河北省首次公开发布分性别统计分析报告 2019-04-05
  • 菲律宾媒体和网民热议"中国剧场"开播 2019-04-05
  • 坚持和完善我国基本经济制度的两条新经验 2019-04-02
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产济南 2019-04-02
  • [洞见]草榴死了 欲望还活着草榴性 2019-04-02
  • 回顾:五年来习近平的“两会金句” 2019-04-02
  • 云南省2018年度国家社科基金项目申报工作的几点做法 2019-04-01
  • 地理君的专栏作者中国国家地理网 2019-04-01

    河北省彩票20选5:SVG圆形钟表效果

    燕赵风采20选5走势图 www.fllv.net 2018-6-2 20:10| 作者: 蚂蚁小编| 查看: 1778| 评论: 0|来自: 蚂蚁部落

    分享一段代码实例,它实现了圆形钟表效果。

    代码实例如下:

    [HTML] 纯文本查看 复制代码运行代码
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="author" content="//www.fllv.net/" />
    <title>蚂蚁部落</title>
    <style type="text/css">
    #clock {
      width: 200px;
      height: 200px;
      font-family: "微软雅黑";
      font-weight: 800;
      -moz-user-select: none;
      -webkit-user-select: none;
    }
    </style>
    <script src="//libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script type="text/javascript">
    $(function() {
      var $clock = $('#clock');
      var currentdate = new Date();
      var hours = currentdate.getHours();
      hours = hours > 12 ? hours - 12 : hours;
      var minutes = currentdate.getMinutes();
      var seconds = currentdate.getSeconds();
      var $hours = $clock.find('#hours'),
        $minutes = $clock.find('#minutes'),
        $seconds = $clock.find('#seconds');
      $hours.attr('transform', 'rotate(' + hours * 30 + ' 100 100)');
      $minutes.attr('transform', 'rotate(' + minutes * 6 + ' 100 100)');
      $seconds.attr('transform', 'rotate(' + seconds * 6 + ' 100 100)');
      setInterval(function() {
        var currentdate = new Date();
        var hours = currentdate.getHours();
        hours = hours > 12 ? hours - 12 : hours;
        var minutes = currentdate.getMinutes();
        var seconds = currentdate.getSeconds();
        var $hours = $clock.find('#hours'),
          $minutes = $clock.find('#minutes'),
          $seconds = $clock.find('#seconds');
        $hours.attr('transform', 'rotate(' + hours * 30 + ' 100 100)');
        $minutes.attr('transform', 'rotate(' + minutes * 6 + ' 100 100)');
        $seconds.attr('transform', 'rotate(' + seconds * 6 + ' 100 100)');
      }, 1000);
    });
    </script>
    </head>
    <body>
    <svg id="clock">
      <defs>
        <filter id="f1" x="0" y="0">
          <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
        </filter>
      </defs>
      <circle id="clockcircle" cx="100" cy="100" r="88" fill="#999" />
      <circle filter="url(#f1)" id="clockcircle" cx="100" cy="100" r="85" fill="#000" />
      <circle cx="100" cy="100" r="5" fill="#fff" />
      <!--1点整-->
      <circle cx="137" cy="36" r="3" fill="#fff" />
      <!--2点整-->
      <circle cx="164" cy="63" r="3" fill="#fff" />
      <!--3点整-->
      <circle cx="175" cy="100" r="3" fill="#fff" />
      <!--4点整-->
      <circle cx="164" cy="137" r="3" fill="#fff" />
      <!--5点整-->
      <circle cx="137" cy="165" r="3" fill="#fff" />
      <!--6点整-->
      <circle cx="100" cy="175" r="3" fill="#fff" />
      <!--7点整-->
      <circle cx="63" cy="165" r="3" fill="#fff" />
      <!--8点整-->
      <circle cx="36" cy="137" r="3" fill="#fff" />
      <!--9点整-->
      <circle cx="25" cy="100" r="3" fill="#fff" />
      <!--10点整-->
      <circle cx="36" cy="63" r="3" fill="#fff" />
      <!--11点整-->
      <circle cx="63" cy="36" r="3" fill="#fff" />
      <!--12点整-->
      <circle cx="100" cy="26" r="3" fill="#fff" />
     
      <text font-size="16" x="90" y="46" fill="#fff">12</text>
      <text font-size="16" x="31" y="105" fill="#fff">9</text>
      <text font-size="16" x="94" y="170" fill="#fff">6</text>
      <text font-size="16" x="160" y="105" fill="#fff">3</text>
      <!--秒针-->
      <line id="seconds" x1="100" y1="110" x2="100" y2="28" stroke-width="2" stroke="#FFF" />
      <!--分针-->
      <line id="minutes" x1="100" y1="110" x2="100" y2="50" stroke-width="3" stroke="#fff" />
      <!--时针-->
      <line id="hours" x1="100" y1="110" x2="100" y2="60" stroke-width="4" stroke="#fff" />
    </svg>
    </body>
    </html>

    最新评论

    返回顶部
  • 工信部:17年12批新能源车推荐车型目录 2019-05-11
  • 美国再挑贸易战,中方强力回击,全球市场跌声一片 2019-05-11
  • 四川都江堰再现野生大熊猫踪迹 比3月拍到的更肥 2019-05-10
  • 坚持和发展马克思主义的宣言书 2019-05-10
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-04-26
  • 众星云集 “欧洲红魔”能否用战绩兑现黄金一代的天赋 2019-04-26
  • 比如最高检的12309检查服务中心,原来还有显示信访处理进程,不过没有几天就取消了。[上火][上火] 也就是说办与不办也没有人知道,下边省事了,上边也就轻松了。 2019-04-16
  • 男女差别有多大?河北省首次公开发布分性别统计分析报告 2019-04-05
  • 菲律宾媒体和网民热议"中国剧场"开播 2019-04-05
  • 坚持和完善我国基本经济制度的两条新经验 2019-04-02
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产济南 2019-04-02
  • [洞见]草榴死了 欲望还活着草榴性 2019-04-02
  • 回顾:五年来习近平的“两会金句” 2019-04-02
  • 云南省2018年度国家社科基金项目申报工作的几点做法 2019-04-01
  • 地理君的专栏作者中国国家地理网 2019-04-01
  • pk10论坛 海南飞鱼历史开奖记录 湖北福彩网 3d彩票走势图 好运快3赚钱是真的吗 北京pk10赛车计划软件 竟彩直播比分直播 竞彩足球比分中大奖 澳洲幸运8开奖直播 飞艇开奖直播网址 篮球让分胜负4串1中奖 北京快乐8现在开奖结果 pc蛋蛋28 北京赛车pk10基本玩法 14场胜负彩投注 北京赛车计划