之前在网上看了一些使用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. css input[type=file] 样式美化，input上传按钮美化

    css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh

  2. asp.net三层架构详解

    一.数据库 /*==============================================================*/ /* DBMS name:      Microsof ...

  3. Ubuntu install Docker

    首先需要说明的是,根据Docker的官方文档,Docker的安装必须在64位的机子上.这里只说明Ubuntu 14.04与16.04,我成功安装成功过Ubuntu 14.04,16.04还没有测试过, ...

  4. osgAnimation例子的注释的注释

    osgAnimation例子的注释的注释 转自:http://www.cnblogs.com/sunliming/archive/2011/12/12/2284995.html #include &l ...

  5. springboot与shiro配置

    详情参考:  http://blog.csdn.net/catoop/article/details/50520958 http://blog.csdn.net/qiuqiupeng/article/ ...

  6. CentOS7 编译安装 Mariadb (实测 笔记 Centos 7.0 + Mariadb 10.0.15)

    环境: 系统硬件:vmware vsphere (CPU:2*4核,内存2G,双网卡) 系统版本:CentOS-7.0-1406-x86_64-DVD.iso 安装步骤: 1.准备 1.1 显示系统版 ...

  7. 第一章-第四题（ACM 比赛的程序是软件么？ “写程序” 和 ”做软件“ 有区别么？软件工程是不是教那些不怎么会写程序的人开发软件? 你怎么看?这个游戏团队， 有很好的软件，但是商业模式和其他软件之外的因素呢？有没有考虑到）--By梁旭晖

    引用 http://baike.baidu.com/link?url=z_phkcEO4_HjFG_Lt163dGFAubdb68IbfcfzWscTOrrZ55WbJEQKzyMQ5eMQKyatD ...

  8. 最难面试的IT公司之ThoughtWorks代码挑战——FizzBuzzWhizz游戏(C#解法)

    原题 看到那么多人看到前面这么糟粕的代码各种不忍直视后,楼主还是把最终实现放在页首吧.             Console.WriteLine("说出三个不同的特殊数,用','隔开 &q ...

  9. 视频直播点播nginx-rtmp开发手册中文版

    2016年8月18日12:42:35 参照官方文档https://github.com/arut/nginx-rtmp-module/wiki/Directives 请注意这个是粗翻译版,仅供参考,不 ...

  10. 2016.10.14,英语,《American Accent Training》

    这本书是讲述美语发音训练的.已经看了一段时间了,决定向周叶学习,记录读书笔记.计划每天花半个小时,学习3节左右的音频(按照CD TRACK),并完成训练. CD1 Track1 What is Acc ...