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

相关推荐

  • python 字符转数字函数_excel将字符串转数字

    python 字符转数字函数_excel将字符串转数字chr(i)数字转ascii范围的字符unichr(i)数字转unicode字符ord(c)字符转成unicode码点

    2022年10月12日
  • 饿了么是阿里巴巴旗下的吗_阿里巴巴收购饿了么分析

    饿了么是阿里巴巴旗下的吗_阿里巴巴收购饿了么分析饿了么是阿里巴巴公司的,2018年4月2日,阿里巴巴以95亿美元全资收购饿了么。饿了么创始人张旭豪曾公开表示,这是饿了么的“最佳选择”。整体加入阿里之后,阿里的多元流量将为其带来更多收益。作为阿里新零

  • 以太坊硬件钱包原理_以太坊区块链怎么挣钱

    以太坊硬件钱包原理_以太坊区块链怎么挣钱这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好!这是你第一次使用Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar

  • SpringBoot 源码编译「建议收藏」

    SpringBoot 源码编译「建议收藏」SpringBoot源码编译1、从GitHub上下载源码https://github.com/spring-projects/spring-boot/tree/2.1.x下载源码的下面有关于编译源码的介绍:SpringBoot官方建议使用./mvnwcleaninstall或者标准的mvncleaninstall命令来编译源代码,如果要使用标准的mvn命令的话…

  • 6.25科技新闻4

    6.25科技新闻4Lytro光场相机体验评测Lytro光场相机是一款可以先拍照,后对焦的相机。当时一出现就引起挺大的反响的,现在就随小编一起来体验一下这款光场相机吧! 关于光场相机的外观,小编不再累述了。各位可以到之前的《先拍后对焦LYTRO光场相机图赏》里面观看完整外观图。 首先我们来看看官方介绍:小编大概把图中的意思翻译了一下,翻译都在图上,看

  • 图解后缀表达式的计算过程

    为了解释后缀表达式的好处,我们先来看看,计算机如何应用后缀表达式计算出最终的结果20的。后缀表达式:9 3 1-3*+ 10 2/+规则:从左到右遍历表达式的每个数字和符号,遇到是数字就进栈,遇到是符号,就将处于栈顶两个数字出栈,进行运算,运算结果进栈,一直到最终获得结果。下面是详细的步骤:1. 初始化一个空栈。此桟用来对要运算的数字进出使用。

发表回复

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

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