纯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. truncate表恢复

    Fy_Recover_Data 2014.03.07 更新 -- 现在可以从离线文件中恢复被Truncated的数据了 2014新版本的恢复思路 与 2012的不同 2014年是离线恢复 http:/ ...

  2. [原]linux下将网卡设置为混杂模式

    设置为混杂模式ifconfig eth2 promisc取消设置ifconfig eth2 -promisc ------------------------------------------ 下面 ...

  3. 神奇的thrust::device_vector与nvcc编译选项

    在C++的GPU库thrust中,有两种vector thrust::device_vector<int> D; //GPU使用的内存中的向量 thrust::host_vector< ...

  4. MUI音乐播放html5+audio模块

    html5+ audio 模块MUI播放音频 Audio模块用于提供音频的录制和播放功能,可调用系统的麦克风设备进行录音操作,也可调用系统的扬声器设备播放音频文件.通过plus.audio获取音频管理 ...

  5. Shell脚本导入外部脚本内容

    vim subscript.sh #!/bin/bash tool="ApacheSpark" vim main.sh #!/bin/bash source /home/wx/su ...

  6. 重写jquery serialize 方法

    /**取表单中的对象 *attrName:为元素的的属性名称不设置则默认为name */ $.fn.serialize = function (attrName) { var ret = {}; if ...

  7. hdu6393Traffic Network in Numazu【树状数组】【LCA】

    Traffic Network in Numazu Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 262144/262144 K (J ...

  8. 基础知识系列☞C#中→委托

    有些.NET中的高级特性,比如:委托! 有一种怎么也搞不懂的赶脚... 博客读了好几篇,代码也动手写了,书中的一些介绍也看了, 各种搜索关于委托的,至今还处于"会用"的阶段. 该怎 ...

  9. 基于express + express-myconnection 的请求处理模板

    前提: 开发APP时经常会用到后台提供的接口,作为一个一直搞前端的程序员.如何写后台这事不能真的一窍不通把.所以还是多多少少了解一些后台. 以前尝试过用java 的spring + springMVC ...

  10. [Error] 'for' loop initial declarations are only allowed in C99 or C11 mode

    #include <stdio.h> #include <stdlib.h> #define LIST_INIT_SIZE 100 //线性表存储空间的初始分配量 #defin ...