纯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. rabbitmq在centos 7上的安装

    一.安装步骤 参考了官网文档: http://www.rabbitmq.com/install-rpm.html#package-dependencies 这里大概介绍下. rabbitmq-serv ...

  2. Ubuntu下Chrome运行Silverlight程序

    Ubuntu 14.04.1下运行Terminal,安装Pipelight输入以下命令: sudo add-apt-repository ppa:pipelight/stable sudo apt-g ...

  3. [算法]Bobmer

    package com.company; import com.sun.org.apache.bcel.internal.generic.AASTORE; import java.awt.*; imp ...

  4. MVC4.0 IIS 7.5 详细错误 - 404.0 - Not Found

    出现环境:win7 + IIS7.5 问题如下: 1.IIS的根节点->右侧“ISAPI和CGI限制”->把禁止的DotNet版本项设置为允许 如果不行就进行下一步 2.选择站点-> ...

  5. java如何把文件转化成oracle的blob

    import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.IO ...

  6. 有哪些sql优化工具

    https://www.oschina.net/p/soar-xiaomi https://www.oschina.net/news/101034/xiaomi-opensource-soar SOA ...

  7. OpenCV学习笔记之课后习题练习3-4

    练习:创建一个大小为100*100的三通道RGB图像.将它的元素全部置0.使用指针算法以(20,5)与(40,20)为顶点绘制一个绿色平面. 参考博文:blog.csdn.net/qq_2077736 ...

  8. Pyplot tutorial，Pyplot官方教程自翻译

      matplotlib.pyplot is a collection of command style functions that make matplotlib work like MATLAB ...

  9. hihocoder 1320 - 压缩字符串 - [hiho一下160周]

    这道题目可以说是一道非常好非常一颗赛艇的DP题了. 需要注意的是,其中情形3),字符串必然能完全转化为 N(str)形式,如果有N(str1)M(str2)等等另外样式,应该首先使用拼接形式对其进行划 ...

  10. GraphLab GraphLab和MapReduce的区别

    https://turi.com/ GraphLab和MapReduce的区别 https://baike.baidu.com/item/GraphLab/16423125 2. GraphLab和M ...