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


相关推荐

  • 微信小程序宠物论坛2[通俗易懂]

    微信小程序宠物论坛2[通俗易懂]微信小程序宠物论坛2发帖模块界面展示填写标题、内容和选择图片之后,点击确定图片,然后点击发布即可。JS部分//import{promisify}from’../../utils/promise.util’import{$init,$digest}from’../../utils/common.util’//constwxUploadFile=promisify(wx.cloud.uploadFile)constdb=wx.cloud.databa

    2022年10月7日
  • React路由重定向Redirect[通俗易懂]

    React路由重定向Redirect[通俗易懂]react路由重定向<Switch>{/*<Routepath=”/”exactcomponent={NewsPage}/>*/}<Routepath=”/my”component={MyPage}/><Routepath=”/news…

    2022年4月30日
  • .NET框架体系结构

    刚开始接触.NET很疑惑,看完视频也不是太懂,通过总结和反复,从概括和概念入手,慢慢变得清晰了。这篇博客主要是我对.NET基础知识的了解,算作积累吧。.NET框架体系结构由四个主要部分组成公共语

    2021年12月23日
  • postGresql_oracle生成uuid函数

    postGresql_oracle生成uuid函数之前用sqlserver,获取uuid,获取直接selectnewid()就好了,但是postgresql没有这种函数,只好自己写个了。如下:CREATEORREPLACEFUNCTIONuuid() RETURNStextAS$$declarestr1text;str2text;Mactext;begin–MAC地址Mac=’aa:aa:a…

    2022年8月9日
  • 关于RuntimeException[通俗易懂]

    关于RuntimeException[通俗易懂]关于RuntimeException今天在写一个异常类的时候继承了RuntimeException,想一探究竟。RuntimeException:在定义方法时不需要声明会抛出runtimeException。Exception:定义方法时必须声明所有可能会抛出的exception。于是去查看了一翻api。publicRuntimeException() 提出了一种新的null运行时异常的详细信息。原因是没有初始化,初始化后可通过调用Throwable.initCause(..

    2022年7月24日
  • Hadoop 中xsync集群分发脚本

    Hadoop 中xsync集群分发脚本大数据集群中使用xsync脚本分发文件到集群中的所有机器

    2022年5月24日

发表回复

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

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