之前在网上看了一些使用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. 2016 ccpc 网络选拔赛 F. Robots

    Robots Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Subm ...

  2. 关于Openlayer3的菜鸟认识

    什么是OpenLayers? OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包,用于实现标准格式发布的地图数据访问.从OpenLayers2.2版本以后,O ...

  3. Hive_数据倾斜处理

    Hive中三种join map join (小表join大表,将小表加入到内存) 设置map join: hive.auto.convert.join=true hive.mapjoin.smallt ...

  4. python 安装nltk，使用（英文分词处理，词干化等）（Green VPN）

    安装pip命令之后: sudo pip install -U pyyaml nltk import nltk nltk.download() 等待ing 目前访问不了,故使用Green VPN htt ...

  5. this和super的区别

    this和super的区别 1.this和super都代表什么 * this:代表当前对象的引用,谁来调用我,我就代表谁 * super:本类当前对象的父类内存空间标识 2.this和super的使用 ...

  6. C#_技巧：窗口抖动

    原理 * 窗口抖动:即每隔一段很小的时间,窗口位置发生变化  * 时间控制:利用for循环||利用timer * 窗口位置发生变化:控件Left/Top属性或Location属性, 注:Left/To ...

  7. 从网页上抓取Windows补丁信息然后整型输出（Python）

    Powershell实现:http://www.cnblogs.com/IvanChen/p/4488246.html 今天通过Python实现: # coding=utf-8 import re i ...

  8. HDU 5965 枚举模拟 + dp(?)

    ccpc合肥站的重现...一看就觉得是dp 然后强行搞出来一个转移方程 即 根据第i-1列的需求和i-1 i-2列的枚举摆放 可以得出i列摆放的种类..加了n多if语句...最后感觉怎么都能过了..然 ...

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

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

  10. javascript 判断为true false

    如果逻辑对象无初始值或者其值为 0.-0.null."".false.undefined 或者 NaN,那么对象的值为 false.否则,其值为 true(即使当自变量为字符串 & ...