纯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. Word 2010 小技巧篇

    1.选择文本的妙招

  2. maven中properties标签定义变量

    在pom.xml中添加依赖时语法如下 <dependency> <groupId>org.springframework</groupId> <artifac ...

  3. 2015.7.12js-11(DOM基础)

    1.childNodes,获取子节点,本身就是一个数组,可以通过下标childNodes[i]来获取某个子节点. alert(obj.childNodes.length); //高级浏览器会有空白节点 ...

  4. 基本类型算法题目学习（EPI）

    1.关于奇偶校验的方法中,如何快速的求取一个64-bit的数字的奇偶校验位.(如果1的位数为奇数,则奇偶校验位为1,如果1的位数为偶数,则奇偶校验位为0) a.暴力枚举法采用一位一位进行计算,一位一位 ...

  5. 【CF618G】Combining Slimes 概率+矩阵乘法

    [CF618G]Combining Slimes 题意:一个长度为$1\times n$的网格,每次从最右侧往里推入一个数字1或2(数字会一直跑到最左边的空格子里),加入1的概率为p,2的概率为1-p ...

  6. Thinkphp框架下PHPExcel实现Excel数据的批量化导入导出

    第一步:下载官方的PHPExcel文件,下载地址https://github.com/PHPOffice/PHPExcel 第二步:解压打开,将PHPExcel\Classes\全部文件拷贝到thin ...

  7. iOS8新特性(1)——UIAlertController

    一.iOS8介绍 iOS8 新特性,主要是UI上进行了统一 1.UIAlertController 2.UIPresentaionController:管理所有通过modal出来的控制器(看笔记) 3 ...

  8. web.xml之context-param,listener,filter,servlet加载顺序及其周边

    先以加载spring为例子看看加载顺序的作用: Spring加载可以利用ServletContextListener 实现,也可以采用load-on-startup Servlet 实现,但比如fil ...

  9. 7.24 IO多路复用和协程代码笔记

    1. 复习 # !/usr/bin/env python # !--*--coding:utf-8 --*-- # !@Time :2018/7/23 11:49 # !@Author TrueNew ...

  10. Nginx通过header转发

    假设添加自定义头 "my-header",当"my-header"等于test时,转发到192.168.1.113 请求如下 wget --header=&qu ...