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


相关推荐

  • eclipse怎么配置svn插件_dip插件有哪几种

    eclipse怎么配置svn插件_dip插件有哪几种Eclipse安装插件的几种方法(eclipse安装SVN插件)在这里啰嗦一句,其实更新的版本mar2更好用。但是由于在低电压版的本本上,mar2跑不起来,经常假死,kepler可以很流畅。 so,如果为了携带了轻便低电压版CPU的本本,mar2跑不起来,就用kepler吧。以Eclipse(Kepler)安装SVN插件为例,记录eclipse安装插件的几种方法。 1eclipsemarket…

    2022年10月10日
    0
  • springbatch 批处理框架的介绍

    springbatch 批处理框架的介绍springbatch批处理框架的介绍(还在整理中。。。。。。。。有点乱,待更新)SpringBatch是什么?官网中介绍SpringBatchisalightweight,comprehensivebatchframeworkdesignedtoenablethedevelopmentofrobustbatchapplicationsvital…

    2022年5月27日
    70
  • getClassLoader能否为null

    getClassLoader能否为null前言我们Javaer都知道类想要被加载是需要一个个ClassLoader来执行的,并且类加载的方案叫双亲委派模式,说是双亲,其实就是单亲,可能我们最初的翻译人想让我们的加载器的家庭更完整吧,所以翻译成双亲。默认的类加载器包括BootstrapClassLoader、ExtClassLoader、AppClassLoader,他们都定义在在rt.jar中的sun….

    2022年5月9日
    32
  • 运行出现Server Tomcat v8.5 Server at localhost failed to start.和A child container failed during start…[通俗易懂]

    出现问题:解决方法:1、看servlet文件中的@WebServlet“()”,里面是否少了/字符,如图:加上即可,有问题随时留言,欢迎您的咨询!转载于:https://www.cnblogs.com/weibanggang/p/9303015.html…

    2022年4月8日
    45
  • 理解VUE响应式原理[通俗易懂]

    理解VUE响应式原理[通俗易懂]1、响应式原理基础响应式原理基础是基于Object.defineProperty(obj,prop,descriptor),descriptor里面可以定义get和set方法,可以在获取属性值事触发get方法(可以收集依赖),设置属性值时触发set方法(更新依赖)。扩展:上面是vue2.0的基础原理,vue3.0的基础原理是:2、核心对象:Dep与WatcherDep:vue在data里申明的每一个属性都会生成一个Dep的实例对象,De…

    2022年4月30日
    31
  • java setscale_java BigDecimal.setScale()的一些问题

    java setscale_java BigDecimal.setScale()的一些问题环境:Eclipse3.6jdk:1.6程序:packagecom.test.doubletest;importjava.math.BigDecimal;publicclassDoubleDataType{/***@paramargs*/publicstaticvoidmain(String[]args){Doubled_0=newDouble(0.00929…

    2022年10月20日
    0

发表回复

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

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