之前在网上看了一些使用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. 【JAVA】FOR UPDATE 和 FOR UPDATE NOWAIT 区别 （转）

    1.for update 和 for update nowait 的区别:首先一点,如果只是select 的话,Oracle是不会加任何锁的,也就是Oracle对 select 读到的数据不会有任何限 ...

  2. Redis 数据类型总结—String

    1.1 数据类型 Redis常用五种数据类型:string,   hash,   list,   set,    zset(sorted set). Redis内部使用一个redisObject对象来 ...

  3. java分享第八天-01（线程）

     创建线程:1 可以实现Runnable接口.2 可以扩展Thread类本身. 通过实现Runnable创建线程:创建一个线程,最简单的方法是创建一个实现Runnable接口的类.为了实现Runnab ...

  4. 【转】安装第三方库出现 Python version 2.7 required, which was not found in the registry

    安装第三方库出现 Python version 2.7 required, which was not found in the registry 建立一个文件 register.py 内容如下. 然 ...

  5. java 输入年月，获取日历表

    /* 做日历作业: 输入一个时间如: 2016-11 就显示2016年11月的日历显示 */ import java.util.*; class calendar { public static vo ...

  6. jQuery 中的事件冒泡和阻止默认行为

    1.事件冒泡 <%@ page language="java" import="java.util.*" pageEncoding="utf-8 ...

  7. 安卓中級教程（9）：pathbutton中的animation.java研究（2）

    src/geniuz/myPathbutton/composerLayout.java package geniuz.myPathbutton; import com.nineoldandroids. ...

  8. PHP中获取星期的几种方法

    PHP中获取星期的几种方法   PHP星期几获取代码: 1 date(l); 2 //data就可以获取英文的星期比如Sunday 3 date(w); 4 //这个可以获取数字星期比如123,注意0 ...

  9. 《UML大战需求分析》阅读笔记04

    在学习了前面的几种UML图并不能满足所有情况的建模,如当流程图涉及到多种角色,并且通过对多种角色交互展开时,顺序图才是不二选择.顺序图就如同中文语法的说话语言相似,描述的是一种事件发生的顺序.顺序图分 ...

  10. C++ 用RGB 三种颜色绘图

    #include <iostream> #include <cmath> #include <cstdlib> #define DIM 1024 #define D ...