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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • phpstorm激活码2021【2021最新】[通俗易懂]

    (phpstorm激活码2021)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年3月27日
    54
  • maven—奇怪的bug「建议收藏」

    maven—奇怪的bug「建议收藏」 使用Mavenue构建项目时。需要使用@Aspect、@Before注解,但是一直报错,但时Maven项目中确实导入进但还是报错。然后百度也找不出所以然,浪费了好久时间,查找了下Maven仓库中的jar包,感觉这个jar包有问题,于是删除重新进行下载,最后一个就是重新下载后的jar包,对比还是发现了不同,至于为什么下载的不一样,我想着可能是网络问题吧。…

    2022年6月13日
    26
  • 图书销售管理系统需求分析,各种功能图部分

    图书销售管理系统需求分析,各种功能图部分负责人:大佬(20160402122)DEDRAGON(20160401094)完成部分:3.2有关功能图3.2.1层次图:3.2.2ipo图3.2.3e-r图3.2.4主数据流图3.2.5子功能图进货管理图库存管理图:销售管…

    2022年5月23日
    37
  • 怎么完全卸载赛门铁克_Symantec卸载方法,赛门铁克卸载「建议收藏」

    怎么完全卸载赛门铁克_Symantec卸载方法,赛门铁克卸载「建议收藏」1、首先在服务里面设置所有Symantec开头的系统服务为禁止(控制面板-管理工具-服务),重启后在命令行运行:smc-stop;(stop需要密码就关掉先)2、删除HKEY_LOCAL_MACHINE/SOFTWARE/Symantec/SymantecEndpointProtection/SMC下的SmcInstData子键;(删除后F5刷新下,如果这个子键又自己出现了,说明有Syman…

    2022年4月27日
    122
  • Android Studio提交项目到github

    Android Studio提交项目到github

    2021年10月2日
    51
  • python中encode和decode的区别_python rindex

    python中encode和decode的区别_python rindex1.基本语法1.encode()和decode()都是字符串的函数decode解码encode编码str———>str(Unicode,byte类型)———>str2.decode()与encode()方法可以接受参数,其声明分别为:其中的encoding是指在解码编码过程中使用的编码(此…

    2022年10月6日
    3

发表回复

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

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