纯js制作圆形时钟  
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        body{

            background: grey;

        }

        .box{

            width:320px;

            height: 320px;

            border: 5px solid darkred;

            border-radius: 160px;

            position: relative;

            margin:50px auto;

        }

        h2{

            width:500px;

            text-align: center;

            color: #FF2728;

            margin: 50px auto;

            border:5px groove darkgoldenrod;

        }

        #hour{

            width:3px;

            height:50px;

            background: red;

            position: absolute;

            top:100px;

            left:50%;

            transform-origin: left bottom;

        }

        #min{

            width:2px;

            height:100px;

            background: blue;

            position: absolute;

            top:50px;

            left:50%;

            transform-origin: left bottom;

        }

        #sed{

            width:1px;

            height:150px;

            background: yellow;

            position: absolute;

            left:50%;

            transform-origin: left bottom;

        }

        #point{

            width:16px;

            height: 16px;

            border-radius: 8px;

            background: black;

            position: absolute;

            top:144px;

            left:152px;

        }

        span{

            width: 16px;

            height: 16px;

            text-align: center;

            line-height: 16px;

            background: #fff;

            border-radius: 8px;

            font-weight: bold;

            position: absolute;

        }

        span:nth-of-type(1){

            left:232px;

        }

        span:nth-of-type(2){

            top:72px;

        }

        span:nth-of-type(3){

            left:312px;

            top:152px;

        }

        span:nth-of-type(4){

            top:232px;

        }

        span:nth-of-type(5){

            left:232px;

        }

        span:nth-of-type(6){

            left:152px;

            top:312px;

        }

        span:nth-of-type(7){

            left:72px;

        }

        span:nth-of-type(8){

            top:232px;

        }

        span:nth-of-type(9){

            top:152px;

            left:-8px;

        }

        span:nth-of-type(10){

            top:72px;

        }

        span:nth-of-type(11){

            left:72px;

        }

        span:nth-of-type(12){

            left:152px;

            top:-8px;

        }

    </style>

    <script type="text/javascript">

        window.onload=function () {

            show();

            setInterval(show,1000);

            function show() {

                var date = new Date();

                var year = date.getFullYear();

                var month = date.getMonth()+1;

                var day = date.getDate();

                var hour = date.getHours();

                var d = null;

                var g = null;

                if(hour>12){

                    g=hour-12;

                    d="PM";

                }else {

                    g=hour;

                    d="AM";

                }

                var h2= document.getElementsByTagName("h2")[0];

                var min = date.getMinutes();

                var sed = date.getSeconds();

                h2.innerHTML="当前时间为："+year+"年"+month+"月"+day+"日"+g+":"+min+":"+sed+d;

                var hour1 = document.getElementById("hour");

                var min1 = document.getElementById("min");

                var sed1 = document.getElementById("sed");

                var t= g*30+min*0.5;

                var s = min*6+sed*0.1;

                hour1.style="transform:rotate("+t+"deg)";

                min1.style="transform:rotate("+s+"deg)";

                sed1.style="transform:rotate("+sed*6+"deg)";

            }

            var span = document.getElementsByTagName("span");

            var x = Math.sqrt(3)

            span[0].style="top:"+(152-80*x)+"px";

            span[1].style="left:"+(152+80*x)+"px";

            span[3].style="left:"+(152+80*x)+"px";

            span[4].style="top:"+(152+80*x)+"px";

            span[6].style="top:"+(152+80*x)+"px";

            span[7].style="left:"+(152-80*x)+"px";

            span[9].style="left:"+(152-80*x)+"px";

            span[10].style="top:"+(152-80*x)+"px";

        }

    </script>

</head>

<body>

<h2></h2>

<div class="box">

<div id="hour"></div>

<div id="min"></div>

<div id="sed"></div>

<div id="point"></div>

    <span>1</span>

    <span>2</span>

    <span>3</span>

    <span>4</span>

    <span>5</span>

    <span>6</span>

    <span>7</span>

    <span>8</span>

    <span>9</span>

    <span>10</span>

    <span>11</span>

    <span>12</span>

</div>

</body>

</html>

js绘制圆形时钟的更多相关文章

  1. C#绘制圆形时钟

    本文由作者参考部分案例后加以修改完成: 参考链接如下: http://blog.csdn.net/xuemoyao/article/details/8001113 http://wenku.baidu ...

  2. canvas自适应圆形时钟绘制

    前面的话 前面介绍过canvas粒子时钟的绘制,本文将详细介绍canvas自适应圆形时钟绘制 效果演示 最终自适应圆形时钟的效果如下所示 功能分析 下面来分析一下该圆形时钟的功能 [1]静态背景 对于 ...

  3. canvas绘制简易时钟

    时钟绘制的非常简易,但该有的都有了. 效果图如下, <!DOCTYPE html> <html> <head lang="en"> <me ...

  4. 应用canvas绘制动态时钟--每秒自动动态更新时间

    使用canvas绘制时钟 下文是部分代码,完整代码参照:https://github.com/lemoncool/canvas-clock,可直接下载. 首先看一下效果图:每隔一秒会动态更新时间 一. ...

  5. js canvas 转动时钟实例

    源码:https://pan.baidu.com/s/1R12MwZYs0OJw3OWKsc8WNw 样本:http://js.zhuamimi.cn/shizhong/ 我的百度经验:https:/ ...

  6. [JS,Canvas]日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  7. jQuery ClockPicker 圆形时钟

    ClockPicker.js是一款时钟插件,其实还可以改进,里面的分可以改成短横线. 在线实例 实例预览  jQuery ClockPicker 圆形时钟 使用方法 <div class=&qu ...

  8. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  9. html5 canvas绘制圆形印章，以及与页面交互

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. laravel连sql server报invalid handle returned问题解决方案

    https://github.com/Microsoft/msphpsql/issues/116 4.1.1驱动下载地址 https://github.com/Microsoft/msphpsql/r ...

  2. [原]openstack-kilo--issue(二) openstack auth error

    /** 系统环境:redhat7.2 repo:163 openstack version : kilo author: lihaibo 本博客已经添加"打赏"功能,"打 ...

  3. Centos 安装yum，安装ansible

    今天使用centos安装ansible,发现域名默认安装是未注册的.提示: This system is not registered to Red Hat Subscription Manageme ...

  4. python nose测试框架全面介绍九---各种html报告插件对比

    一直在使用Nose-html-reporting,并输出html报告,但今天在使用时发出有点问题:于时,将python目前可能的html报告插件下载后进行对比,如下 一.Nose-html-repor ...

  5. [转]Android Path里FillType功能

    对于简单的封闭图形(路径无相交的现象),图形的外部和内部和容易判断,但如果路径有相交的情况,对应重叠的部分,使用不同的填充模式,内部和外部的定义有所不同.填充模式可以分为两类: EVEN_ODD 意味 ...

  6. Django---路由如何配置

    具体配置在项目配置文件夹下的 urls.py: from index import views urlpatterns = [ path('admin/', admin.site.urls), pat ...

  7. ThinkPHP widge使用示例

    1.widge一般用于公用模块的设计与使用,以便加强软件模块的复用性与重用性 一般使用include方法设计公共模块,比如<include file="home:header" ...

  8. java基础解析系列(一)---String、StringBuffer、StringBuilder

    java基础解析系列(一)---String.StringBuffer.StringBuilder 前言:本系列的主题是平时容易疏忽的知识点,只有基础扎实,在编码的时候才能更注重规范和性能,在出现bu ...

  9. CNN中的池化层的理解和实例

    池化操作是利用一个矩阵窗口在输入张量上进行扫描,并且每个窗口中的值通过取最大.取平均或其它的一些操作来减少元素个数.池化窗口由ksize来指定,根据strides的长度来决定移动步长.如果stride ...

  10. 选择排序之python

    选择排序( Selection sort) 1.算法描述: 通过n-i次关键字之间的比较,从n-i+1个记录中选出关键字最小的记录,并和第i(1<=i<=n)个记录进行交换. 对尚未完成排 ...