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


相关推荐

  • android图片拖动缩放

    这篇图片拖拽缩放也是我在项目中用到的,今天整理一下,将源码奉献给大家,希望对大家以后碰到相似的问题有帮助。android大图片拖拽缩放这篇就不做过多介绍了,直接上源码:因为是大图片,在onDes

    2021年12月23日
    63
  • java中数组初始化方法_java数组初始化赋值

    java中数组初始化方法_java数组初始化赋值java中初始化数组的方式有几种发布时间:2020-06-0116:12:45来源:亿速云阅读:153作者:鸽子三种初始化方式:1、静态初始化:创建+赋值2、动态初始化:先创建再赋值3、默认初始化:创建之后若不赋值则会被赋对应数据类型的默认值我们来看一下具体代码:publicclassTest3{publicstaticvoidmain(String[]args){//1、声明…

    2022年10月19日
    3
  • 织梦dede如何去除Power by DedeCms

    织梦dede如何去除Power by DedeCms自从dedecms织梦系统更新到6.7日的版本,底部版权信息调用标签{dede:global.cfg_powerby/}会自动加上织梦官方的链接[Power by DedeCms ],想必很多新用户使用中都想去除这个官方的链接,由于这是官方的作为,本文只是提供一个技术的交流,并不鼓励大家去除底部的链接。好了,回归正题,大家知道,进入后台在后台的系统-系统参数有个网站版权信息,在这里并不能找到官方的

    2022年7月15日
    12
  • 2020最新阿里美团Java面经

    小弟是97年出生,专科18年毕业,专升本在读。工作时间总计2年半2019年12月30号投了几个简历,收到了杭州阿里和北京美团的面邀阿里,31号电面,2020年元旦中午1点在线编程。最后挂了,面试官大哥说等我工作满三年再捞我北京美团2020年1月2号现场面,技术面过了,最后因为学历是大专遗憾离场接下来的面经将合并两场面试的问题,如果有都问到的会在问题后面标记(double)多线程死锁的条…

    2022年4月12日
    45
  • 华为模拟器ensp怎么安装_ensp模拟器网页版

    华为模拟器ensp怎么安装_ensp模拟器网页版华为模拟器说实话有时候真的是很烦人,总是莫名其妙的出问题,而且网上教程一般也解决不了因此我认为学会ensp的重装真的很重要,因此只要我们删除干净了,安装最多花不了20分钟的时间接下来我就来说说怎么安装华为ensp模拟器—————————————————————————–…

    2022年10月14日
    1
  • sql 语句查询 mysql 版本号「建议收藏」

    sql 语句查询 mysql 版本号「建议收藏」通过sql语句查询mysql版本号selectversion()fromdual;

    2022年10月7日
    3

发表回复

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

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