html炫酷动态时钟代码,HTML5动态时钟代码

html炫酷动态时钟代码,HTML5动态时钟代码HTML5动态时钟代码#clock{stroke:black;stroke-linecap:square;fill:#fcfcfc;width:500px;height:500px;}#face{stroke-width:2px;}#ticks{stroke-width:1px;}#hour{stroke-width:3px;stroke:#00…

大家好,又见面了,我是你们的朋友全栈君。

ca56232b3bbedf9a539d07f37fffb99a.gif

3144d8b7615c79d9f638db40d5689d26.gif

a218af6549b45ee526caf607ebff1358.gif

0f8df0e29816ae721419de940fb833d1.gif

HTML5动态时钟代码

#clock { stroke: black; stroke-linecap:square; fill: #fcfcfc; width: 500px; height: 500px; }

#face { stroke-width: 2px; }

#ticks { stroke-width: 1px; }

#hour { stroke-width: 3px; stroke: #000; }

#minute { stroke-width: 2px; stroke: #333; }

#second { stroke-width: 1px; stroke: #f23; }

#numbers { font-family: sans-serif; font-size: 8px; font-weight: bold; text-anchor: middle; stroke: none; fill: black; }

12

3

6

9

setInterval(function () {

var now = new Date(), min = now.getMinutes(), hour = now.getHours(), sec = now.getSeconds(),

mangle = min * 6, hangle = (hour + min / 60) * 30, sangle = sec * 6,

mhand = document.getElementById(‘minute’), hhand = document.getElementById(‘hour’), shand = document.getElementById(‘second’);

hhand.setAttribute(‘transform’, ‘rotate(‘ + hangle + ‘,50,50)’);

mhand.setAttribute(‘transform’, ‘rotate(‘ + mangle + ‘,50,50)’);

shand.setAttribute(‘transform’, ‘rotate(‘ + sangle + ‘,50,50)’);

}, 1000);

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/154096.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • MySQL——MySQL 图形化管理工具的介绍「建议收藏」

    MySQL——MySQL 图形化管理工具的介绍「建议收藏」文章目录MySQL——MySQL图形化管理工具的介绍1、MySQLWorkbench2、Navicat3、SQLyog4、DBeaver5、DataGripMySQL——MySQL图形化管理工具的介绍MySQL图形化管理工具极大地方便了数据库的操作与管理,常用的图形化管理工具有:MysQLWorkbench、phpMyAdmin、NavicatPreminum、MySQLDumper、SQLyog、dbeaver、MysQLODBcConnector、DataGrip。1、MySQL

    2022年6月30日
    31
  • 二进制小数转十进制方法_小数进制转换

    二进制小数转十进制方法_小数进制转换知识点一:一个数的负次方即为这个数的正次方的倒数。方法一、转换分数法参考文章:https://jingyan.baidu.com/article/597a0643614568312b5243c0.html参考文章:https://zhidao.baidu.com/question/1308562360873359899.html举例:将二进制0.1111转换成十进制数二进制…

    2022年9月16日
    0
  • pytest skipif_pytest如何循环执行用例

    pytest skipif_pytest如何循环执行用例前言pytest.mark.skip可以标记无法在某些平台上运行的测试功能,或者您希望失败的测试功能Skip和xfail:处理那些不会成功的测试用例你可以对那些在某些特定平台上不能运行的测试用

    2022年8月6日
    3
  • 白话经典算法系列之六 高速排序 高速搞定

    白话经典算法系列之六 高速排序 高速搞定

    2021年12月3日
    44
  • bzero函数使用方法_bzero函数

    bzero函数使用方法_bzero函数bzero原型:externvoidbzero(void*s,intn);用法:#include

    2022年10月13日
    1
  • 通信端口感叹号_PCI简易通讯控制器有黄色感叹号怎么办?

    通信端口感叹号_PCI简易通讯控制器有黄色感叹号怎么办?近日有网友新安装了Win7系统,安装完成后感觉电脑都顺畅了很多,不过在打开设备管理器的时候发现,在其他设备下的PCI简易通讯控制器有个黄色感叹号,出现这个感叹号也意味着这个控制器的驱动未安装,对此我们该如何解决呢?解决方法1、打开设备管理器,右键点击“PCI简易通讯控制器”,在下拉菜单中点击属性;2、在打开的“PCI简易通讯控制器属性”窗口显示:该设备的驱动程序未被安装,我们点击更新驱动程序;3…

    2022年5月25日
    192

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号