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


相关推荐

  • python resize函数怎么用_python cv2.resize函数high和width注意事项说明「建议收藏」

    在opencv中获取图片的尺寸的方法是:importcv2img=cv2.imread(path)img.shape返回的是三维数组(high,width,3),当我们需要对图像进行缩放时需要用到cv2.resize()函数:#缩放到原来的二分之一img=cv.resize(img,(int(width/2),int(high/2)))此时需要传入的形状又是(width,…

    2022年4月14日
    147
  • hibernate sql查询_sql server查询命令

    hibernate sql查询_sql server查询命令一.SQLQuery简介SQLQuery接口用于接受一个sql语句进行查询,然后调用list()或uniqueResult()进行查询。但是sql语句不会直接封装到实体对象里,需要手写代码才可以封装到实体中。二.SQLQuery常用接口方法addEntity()方法:该方法用于将查询到的结果集转换为你设置的实体类setter()方法:Query接口中提供了一系列的setter方法用于设置…

    2022年9月30日
    3
  • rfid-rc522模块中文资料_驱动模块

    rfid-rc522模块中文资料_驱动模块文章目录一.S50(M1)卡介绍1.S50(M1)卡基础知识2.内部信息3.存取控制4.数据块的存取控制5.控制块的存取控6.工作原理7.M1与读卡器的通信一.S50(M1)卡介绍1.S50(M1)卡基础知识1.每张卡有唯一的序列号,32位2.卡的容量是8Kbit的EEPROM3.分为16个扇区,每个扇区分为4块,每块16个字节,以块为存取单位4.每个扇区都有独立的一组密码和访问控制…

    2026年1月27日
    6
  • 常用第三方接口「建议收藏」

    常用第三方接口「建议收藏」作者:知乎用户链接:https://www.zhihu.com/question/21608863/answer/123009622来源:知乎著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。聚合数据、百度APIStore、Apix、通联数据、HaoService、数说聚合、datasift等等。1.功能上对比<imgsrc=&qu

    2022年4月29日
    54
  • pycharm 中文乱码_pycharm中文字体设置

    pycharm 中文乱码_pycharm中文字体设置问题:pycarm里面的中文,没有办法正常显示原因:因为Pycharm会使用系统默认的字体,所以当系统中没有这个字体的时候,他就没法显示解决办法:sudoyum-yinstallfontconfig(安装字体库)安装完成后,在/usr/share目录就可以看到fonts和fontconfig目录了寻找中文字体(可以在windows里面找,路径:C:\Windows\Fonts)cd/usr/share/fonts&&sudomakedirchinese

    2022年8月29日
    6
  • Java 基础练习题

    Java 基础练习题1.java类名命名规则答:1.大驼峰命名法2.不能以数字开头3.不能使用关键字,但是可以包含关键字4.数字.字母._,$5.见名知意2.java变量名(标识符)的命名规则和注意事项1.小驼峰命名法2.不能以数字开头3.不能使用关键字,但是可以包含关键字4.数字.字母._,$5.见名知意注意事项:1.相同作用域中不允许重复定义2.变量未经初始化,不允许使用3.一条语句可以定义多个相同类型的变量3.求成绩占总成绩的百分比doublescore=90;double

    2022年7月7日
    19

发表回复

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

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