之前在网上看了一些使用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. BZOJ1097: [POI2007]旅游景点atr

    ..k次最短路后,考虑如何满足先走一些点 用状压dp,每一个点考虑它所需要经过的点a[i],当当前走过的点包含a[i]时,i 这个点才可以到达. 写的时候用记忆化搜索. #include<bit ...

  2. java分享第十一天（接口测试）

     HTTP协议的接口测试中,使用到最多的就是GET请求与POST请求,其中POST请求有FORM参数提交请求与RAW请求( post请求时有一个选项是form-data,或者raw,使用raw可以请求 ...

  3. JavaScript获取当前日期，昨天，今天日期以及任意天数间隔日期

    <script language="JavaScript" type="text/javascript"> function GetDateStr( ...

  4. WPF整理-使用逻辑资源

    "Traditional application resources consist of binary chunks of data, typically representing thi ...

  5. finally类

    finally叫做最后的执行快,什么是最后的执行快?他的意思是这样的 他是写在try catch 的后面但是只能写一个,他设计这个finally的意思就是,如果try里面出错肯定会往陷阱里 面跑.没有 ...

  6. C# 方法返回值的个数

    方法返回值类型总的来说分为值类型,引用类型,Void 有些方法显示的标出返回值 public int Add(int a,int b) { return a+b; } 有些方法隐式的返回返回值,我们可 ...

  7. 高仿中国银行ATM系统

    温馨提示由于代码太多只是上传了ATM客户端部分,管理员和超级管理员还有数据库部分上传了工程包,可以直接点击https://i.cnblogs.com/Files.aspx去里面找.package At ...

  8. Linux从零单排（二）：setuptools、pip、anaconda2的环境配置

    为了更方便的使用Python的类库,需要进行相应的配置 (一)setuptools的配置 1.setuptools的下载 命令行输入wget https://pypi.python.org/packa ...

  9. zookeeper+jstorm的集群搭建

    zookeeper的配置: zookeeper有三种配置方式:单机式/伪分布式/集群式 其中伪分布式是在一台电脑上通过不同的端口来模拟分布式情形,需要N份配置文件和启动程序,而集群式是多个zookee ...

  10. HTML5web存储之localStorage

    localStorage与cookie的作用类似,只能存储字符串,以键值对的方式进行存储:与cookie不同的是,可以存储更多的数据. localStorage用于持久化的本地存储. var skey ...