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


相关推荐

  • (一)easyUI之第一个demo

    (一)easyUI之第一个demo一、下载官网下载:http://www.jeasyui.net/download/同时并下载官方中文API文档。解压后的目录结构:二、第一个demo1新建工程并导入包1新建工程并导

    2022年7月2日
    24
  • ajax出现”parsererror”错误

    ajax出现”parsererror”错误1.后台控制器方法上加了@ResponseBody注解,但AJAX未加dataType:“JSON”2.后台控制器方法的返回值与指定的返回值类型不同

    2022年6月20日
    35
  • tar 命令详解「建议收藏」

    tar 命令详解「建议收藏」tar命令[root@linux~]#tar[-cxtzjvfpPN]文件与目录….参数:-c:建立一个压缩文件的参数指令(create的意思);-x:解开一个压缩文件的参数指令!-t:查看tarfile里面的文件!-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能

    2022年6月5日
    28
  • 《大厂面试》面试官看了直呼想要的简历

    《大厂面试》面试官看了直呼想要的简历

    2022年2月12日
    66
  • 内外网数据库同步方式「建议收藏」

    内外网数据库同步方式「建议收藏」项目环境:公司中心有一个数据库,产品部署地有多个,每个部署地是一个局域网,部署地内有一台对外通讯的服务器(可能会断网)。项目需要将每个部署地的部分数据,同步到中心数据库。基本思路:在需要同步的数据库的说明中添加Update标识,在需要同步的表中添加UpdateDate字段。在每一天的0点时候,会执行一次同步,根据UpdateDate字段进行时间比对,同步会遍历当前数据库的所以后表,如果表中包含

    2022年10月16日
    2
  • spgwr | R语言与地理加权回归(Ⅰ-1):线性地理加权回归[通俗易懂]

    spgwr | R语言与地理加权回归(Ⅰ-1):线性地理加权回归[通俗易懂]地理加权回归(GeographicallyWeightedRegression,GWR)经过多年发展,已经具备了多种形式,在R语言中也对应着多个工具包,其中spgwr是一个开发较早、…

    2022年9月27日
    2

发表回复

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

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