纯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. Spark学习笔记--Linux安装Spark集群详解

    本文主要讲解如何在Linux环境下安装Spark集群,安装之前我们需要Linux已经安装了JDK和Scala,因为Spark集群依赖这些.下面就如何安装Spark进行讲解说明. 一.安装环境 操作系统 ...

  2. 解决Win7启动时出现“windows未能启动。原因可能是最近更改了硬件或软件”的问题

    昨天公司终于大发慈悲,统一更换电脑配置,终于要摆脱“手扶拖拉机”的时代了,赶上“动车时代”了.不过不想换硬盘,因为重新要安装太多东西,环境配置一大堆,所以就硬盘没有换,不过当我开机启动的时候,悲剧发生 ...

  3. thinkphp 构建子查询

      thinkphp构建子查询sql语句写法        从3.0版本开始新增了子查询支持,有两种使用方式: 1.使用select方法 当select方法的参数为false的时候,表示不进行查询只是 ...

  4. Windows Server 2012设置WinDbg Kernel Debugging Local

    网上主要提到了以下两点: 1.cmd窗口输入bcdedit /debug on,重新启动计算机. 2.下载对应版本Windows符号文件,并添加环境变量_NT_SYMBOL_PATH. 其实根据环境不 ...

  5. 使用COSBench工具对ceph s3接口进行压力测试--续

    之前写的使用COSBench工具对ceph s3接口进行压力测试是入门,在实际使用是,配置内容各不一样,下面列出 压力脚本是xml格式的,套用UserGuide文档说明,如下 有很多模板的例子,在co ...

  6. Android 模糊效果 FastBlur

    import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Paint; impor ...

  7. poj 2125 Destroying The Graph 最小割+方案输出

    构图思路: 1.将所有顶点v拆成两个点, v1,v2 2.源点S与v1连边,容量为 W- 3.v2与汇点连边,容量为 W+ 4.对图中原边( a, b ), 连边 (a1,b2),容量为正无穷大 则该 ...

  8. Luogu 3373 - 【模板】线段树 2 - [加乘线段树]

    题目链接:https://www.luogu.org/problemnew/show/P3373 题目描述 如题,已知一个数列,你需要进行下面三种操作: 1.将某区间每一个数乘上x 2.将某区间每一个 ...

  9. SHU 413 - 添加好友

    题目链接:http://acmoj.shu.edu.cn/problem/413/ 不难发现,这题是求C(n,1)+C(n,2)+C(n,3)+……+C(n,n-1)+C(n,n) 根据二项展开式有( ...

  10. mysql数据库的相关练习题及答案

    表结构示意图: 表结构创建语句: class表创建语句 create table ) not null)engine=innodb default charset=utf8; student表创建语句 ...