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);

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • js中三种弹出框[通俗易懂]

    js中三种弹出框[通俗易懂]javascript的三种对话框是通过调用window对象的三个方法alert(),confirm()和prompt()来获得,可以利用这些对话框来完成js的输入和输出,实现与用户能进行交互的js代码

  • 关于数组元素(ArrayPlug)的增减使用,逻辑索引和物理索引,MArrayDataBuilder

    关于数组元素(ArrayPlug)的增减使用,逻辑索引和物理索引,MArrayDataBuilder

  • 图像处理入门教程[通俗易懂]

    图像处理入门教程[通俗易懂]  最近有人问我图像处理怎么研究,怎么入门,怎么应用,我竟一时语塞。仔细想想,自己也搞了两年图像方面的研究,做个两个创新项目,发过两篇论文,也算是有点心得,于是总结总结和大家分享,希望能对大家有所帮助。在写这篇教程之前我本想多弄点插图,让文章看起来花哨一点,后来我觉得没必要这样做,大家花时间沉下心来读读文字没什么不好,况且学术和技术本身也不是多么花哨的东西。  一、图像处理的应用  这个其实没什么…

  • HTML基础教程_网页编程html示范

    HTML基础教程_网页编程html示范1.一般我都是在记事本中写HTML文件,也有很多人用DreamWeaver,这个随意~~2.HTML的一般结构如下:—-以开始,以结束,表示之间的文档是HTML—-HTML文档的头部,主要放文档的标题信息未使用CSS的HTML文件—-HTML的主体部分 未使用CSS的HTML文件—-在网页中插入一条水平线未使用CSS的HTML文件

  • 10种用于渗透测试的漏洞扫描工具有哪些_渗透测试和漏洞扫描区别

    10种用于渗透测试的漏洞扫描工具有哪些_渗透测试和漏洞扫描区别漏洞扫描工具是IT部门中必不可少的工具之一,因为漏洞每天都会出现,给企业带来安全隐患。漏洞扫描工具有助于检测安全漏洞、应用程序、操作系统、硬件和网络系统。黑客在不停的寻找漏洞,并且利用它们谋取利益。网络中的漏洞需要及时识别和修复,以防止攻击者的利用。漏洞扫描程序可连续和自动扫描,可以扫描网络中是否存在潜在漏洞。帮助It部门识别互联网或任何设备上的漏洞,并手动或自动修复它。在本文中,我们将介绍市场上可用的十大最佳漏洞扫描工具。1.OpenVAS漏洞扫描工具OpenVAS漏洞扫描器是

  • IntelliJ IDEA常用快捷键汇总

    IntelliJ IDEA常用快捷键汇总在使用IntelliJIdea的时候,使用快捷键是必不可少的。掌握一些常用的快捷键能大大提高我们的开发效率。有些快捷键可以熟练的使用,但是还有另外一些快捷键虽然很好用,但是由于因为没有形成使用习惯或者没有理解快捷键的用法,甚至之前对一些快捷键根本没有概念,导致不会去使用。对于这些快捷键,如果能够用好,编辑代码的效率必能提高一个水平。所以在此梳理出来,加强自己的使用,形成习惯。(注:有些操作的快捷键

发表回复

您的电子邮箱地址不会被公开。

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