之前在网上看了一些使用js写的时钟，但感觉实现的方法有点麻烦，所以就自己重新写了一个例子，样子有点丑，但方法比较简单，大家就凑合看吧

其中采用的主要方法是原生js里面的Data（时期）对象，以及它的.getSeconds()、.getMinutes()、.getHours()以及css3之中关于旋转部分的内容，以下是所写的代码：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>translate</title>

    <style>

    * {

        margin: 0;

        padding: 0;

    }

    .biao {

        width: 200px;

        height: 200px;

        margin: 0 auto;

        border: 5px solid #000;

        border-radius: 50%;

        position: relative;

    }

    ul {

        list-style: none;

        position: relative;

    }

    li {

        width: 3px;

        height: 10px;

        background: #000;

        position: absolute;

    }

    .li1 {

        left: 99px;

        top: 0px;

    }

    .li2 {

        left: 147px;

        top: 12px;

        transform: rotate(30deg);

    }

    .li3 {

        left: 182px;

        top: 49px;

        transform: rotate(60deg);

    }

    .li4 {

        left: 195px;

        top: 97px;

        transform: rotate(90deg);

    }

    .li5 {

        left: 182px;

        top: 143px;

        transform: rotate(120deg);

    }

    .li6 {

        left: 147px;

        top: 178px;

        transform: rotate(150deg);

    }

    .li7 {

        left: 99px;

        top: 192px;

        transform: rotate(180deg);

    }

    .li8 {

        left: 49px;

        top: 178px;

        transform: rotate(210deg);

    }

    .li9 {

        left: 13px;

        top: 143px;

        transform: rotate(240deg);

    }

    .li10 {

        left: 1px;

        top: 97px;

        transform: rotate(270deg);

    }

    .li11 {

        left: 13px;

        top: 49px;

        transform: rotate(300deg);

    }

    .li12 {

        left: 49px;

        top: 12px;

        transform: rotate(330deg);

    }

    .zx {

        position: absolute;

        width: 10px;

        height: 10px;

        border-radius: 50%;

        left: 95px;

        top: 95px;

        background: #f00;

        z-index: 10;

    }

    .zo {

        position: absolute;

        transform-origin: 50% bottom;

    }

    .miao {

        width: 3px;

        height: 80px;

        left: 99px;

        top: 20px;

        background: #f00;

        z-index: 8;

    }

    .fen {

        width: 7px;

        height: 60px;

        left: 97px;

        top: 40px;

        background: #0f0;

        z-index: 5;

    }

    .shi {

        width: 11px;

        height: 40px;

        left: 95px;

        top: 60px;

        background: #00f;

        z-index: 2;

    }

    .text {

        position: absolute;

        font-size: 30px;

    }

    .text1 {

        top: 18px;

        left: 93px;

    }

    .text2 {

        top: 86px;

        left: 165px;

    }

    .text3 {

        top: 150px;

        left: 93px;

    }

    .text4 {

        top: 86px;

        left: 25px;

    }

    </style>

</head>

<body>

    <div class="biao">

        <ul>

            <li class="li1"></li>

            <li class="li2"></li>

            <li class="li3"></li>

            <li class="li4"></li>

            <li class="li5"></li>

            <li class="li6"></li>

            <li class="li7"></li>

            <li class="li8"></li>

            <li class="li9"></li>

            <li class="li10"></li>

            <li class="li11"></li>

            <li class="li12"></li>

        </ul>

        <div class="text text1">0</div>

        <div class="text text2">3</div>

        <div class="text text3">6</div>

        <div class="text text4">9</div>

        <div class="zx"></div>

        <div class="zo shi" id="shi"></div>

        <div class="zo fen" id="fen"></div>

        <div class="zo miao" id="miao"></div>

    </div>

<script>

var shi = document.getElementById("shi");

var fen = document.getElementById("fen");

var miao = document.getElementById("miao");

var interval = setInterval(function(){

    var now = new Date();

    var s = now.getSeconds();

    var f = now.getMinutes();

    var h = now.getHours();

    miao.style.transform = "rotate("+s/60*360+"deg)";

    fen.style.transform = "rotate("+f/60*360+"deg)"

    shi.style.transform = "rotate("+h/24*360+"deg)"

},1000);

</script>

</body>

</html>

纯html、css3、js的时钟的更多相关文章

  1. 【CSS3】纯CSS代码实现模拟时钟，+js对时功能。

    使用CSS3纯代码来实现模拟时钟,及指针动画功能. 在这里主要使用到css3一些基本元素: border-radius:圆角边框,画圆形:表盘 Transform:变换,旋转,扭曲:刻度盘,指针形状 ...

  2. 使用jQuery和CSS3制作数字时钟(jQuery篇) 附源码下载

    HTML 和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的. <div id="clock" ...

  3. js 动态时钟

    js 动态时钟 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  4. JS实现时钟特效

    <!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"& ...

  5. vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  6. 纯css、js 的H5页面对接echarts

    做项目时,会遇到一些零碎的技术点.记录下来以防忘记 需求:做可视化界面,但是需要兼容ie8,需要用纯css.js 的H5页面对接echarts,下面为效果图(带定时器循环显示tooltip). 实现方 ...

  7. 转 CSS3+js实现多彩炫酷旋转圆环时钟效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 21个CSS3 / JS 时钟

    收集了21个酷炫的CSS / JS实现的时钟效果https://oktools.net/clocks 预览 :https://clocks.oktools.net/0/ 源码 :https://cod ...

  9. 纯Shading Language绘制HTML5时钟

    今天是2014年的最后一天,这个时刻总会让人想起时钟,再过几个小时地球人都要再老了一岁,于是搞个HTML5版的时钟就是我们今天要完成的任务,实现HTML5的时钟绘制一般会采用三种方式,第一种采用CSS ...

随机推荐

  1. NOI2015 题解

    [NOI2015]程序自动分析 离散化+并查集. [NOI2015]软件包管理器 [Noi2015]寿司晚宴 [Noi2015]荷马史诗 [NOI2015]品酒大会 [Noi2015]小园丁与老司机

  2. Codeforces Round #107 (Div. 2)

    D题 并查集+组合 #include <iostream> #include <cstdio> #include <cstring> using namespace ...

  3. JavaScript必须了解的知识点总结【转】

    整理的知识点不全面但是很实用. 主要分三块: (1)JS代码预解析原理(包括三个段落): (2)函数相关(包括 函数传参,带参数函数的调用方式,闭包): (3)面向对象(包括 对象创建.原型链,数据类 ...

  4. ZeroMQ接口函数之 ：zmq_msg_init_data - 从一个指定的存储空间中初始化一个ZMQ消息对象的数据

    ZeroMQ 官方地址 :http://api.zeromq.org/4-1:zmq_msg_init_data zmq_msg_init_data(3) ØMQ Manual - ØMQ/3.2.5 ...

  5. VS2013 - 自定义新建文件模版

    一直想统一下项目中的关于-(新建文件时,添加个人信息,如:创建者,创建时间等个性化信息). 从网络上学习到方法很简单,只需要把IDE安装目录下的模板进行修改保存,即可每次创建拥有固定的模板呈现. 具体 ...

  6. Ubuntu播放yuv文件

    mplayer -demuxer rawvideo -rawvideo w=176:h=144 test.yuv mplayer -fps 30 test.264 ffmpeg采集摄像头视频数据 ff ...

  7. JavaScript：Location

    读取.设置url 在url中输入:http://www.cnpiont.com:8090/index.html?user=like&pwd=123#title Console输入: docum ...

  8. swif-throws异常抛出

    import UIKit enum VendingMachineError: Error { case invalidSelection //选择无效 case insufficientFunds(c ...

  9. SSH整合（Struts2+hibernate+spring）

    1.创建表 create table t_user( id int primary key auto_increment, username varchar(50), password varchar ...

  10. track message forwards, avoiding request loops, and identifying the protocol capabilities of all senders along the request/response chain

    https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html The TRACE method is used to invoke a remote, ...