JS+CSS3实现的简易钟表效果示例

本文实例讲述了JS+CSS3实现的简易钟表效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>www.jb51.net js+css3简易钟表</title>
    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      #wrap{
        width: 300px;
        height: 300px;
        background-color: aliceblue;
        margin: 200px auto;
        position: relative;
        box-sizing: border-box;
      }
      #wrap > div{
        position: absolute;
        top: 50%;
        left: 50%;
      }
      #hour{
        width: 6px;
        height: 60px;
        background-color: #000000;
        margin: -60px -3px;
        transform-origin: 3px 60px;
      }
      #min{
        width: 4px;
        height: 80px;
        background-color: #000000;
        margin: -80px -2px;
        transform-origin: 2px 80px;
      }
      #sec{
        width: 2px;
        height: 100px;
        background-color: red;
        margin: -100px -1px;
        transform-origin: 1px 100px;
      }
      #point{
        width: 20px;
        height: 20px;
        background-color: burlywood;
        margin: -10px -10px;
        border-radius: 50%;
      }
      #circle{
        width: 300px;
        height: 300px;
        position: relative;
      }
      #circle li{
        list-style: none;
        width: 2px;
        height: 6px;
        background-color: #000000;
        position: absolute;
        transform-origin: 1px 150px;
        left: 149px;
        top: 0px;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <div id="hour"></div>
      <div id="min"></div>
      <div id="sec"></div>
      <div id="point"></div>
      <ul id="circle"></ul>
    </div>
  </body>
  <script type="text/javascript">
    var hourDom=document.getElementById('hour');
    var minDom=document.getElementById('min');
    var secDom=document.getElementById('sec');
    var cricle=document.getElementById('circle');
    //创建表盘,ul宽高为wrap宽高,以wrap中心点为变换基点,动态分配6°的li
    for (var i=0;i<60;i++) {
      var li=document.createElement('li');
      cricle.appendChild(li);
      li.style.transform='rotate('+i*6+'deg)';
    }
    //延时函数,确保每一秒更新一次最新时间。并且计算时间准确值。
    setInterval(function(){
    var date=new Date();
    var hour=date.getHours();
    var min=date.getMinutes();
    var sec=date.getSeconds();
    min+=sec/60;
    hour+=min/60;
    //当前时间*每个单位时间走的角度=指针指向
    hourDom.style.transform='rotate('+hour*30+'deg)';
    minDom.style.transform='rotate('+min*6+'deg)';
    secDom.style.transform='rotate('+sec*6+'deg)';
    },1000)
  </script>
</html>

运行效果:

感兴趣的朋友可使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试一下运行效果。

PS:这里再为大家推荐几款时间及日期相关工具供大家参考使用:

在线日期/天数计算器:
http://tools.jb51.net/jisuanqi/date_jisuanqi

在线日期计算器/相差天数计算器:
http://tools.jb51.net/jisuanqi/datecalc

在线日期天数差计算器:
http://tools.jb51.net/jisuanqi/onlinedatejsq

Unix时间戳(timestamp)转换工具:
http://tools.jb51.net/code/unixtime

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript时间与日期操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

(0)

相关推荐

  • 原生JS实现的简单小钟表功能示例

    本文实例讲述了原生JS实现的简单小钟表功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>www.jb51.net 钟表</title> <style type="text/css"> body { background-color:#00A2D

  • 五步轻松实现JavaScript HTML时钟效果

    学了一段时间的HTML.CSS和JS后,给大家做一款漂亮的不像实力派的HTML时钟,先看图: 涉及到的知识点有: CSS3动画.DOM操作.定时器.圆点坐标的计算(好多人是不是已经还给自己的老师了~)  接下来,我们用5步来制作它 step1.准备HTML 首先,我们需要准备HTML结构,背景.表盘.指针(时针.分针.秒针).数字. <div id="clock"> <div class="bg"> <div class="p

  • js+SVG实现动态时钟效果

    本文实例为大家分享了js+SVG实现动态时钟效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE HTML> <html> <meta charset="utf-8"> <head> <title>Analog Clock</title> <script> function updateTime() { var now = new Date(); // 当前时间 var min = now.

  • 利用css+原生js制作简单的钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分 html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期以及时间,至于钟表上的刻度.数字等元素,因为量比较多,采用jvascript生成 <!doctype html> <html> <head> <meta charset="UTF-8"> <link rel='stylesheet'

  • JS+H5 Canvas实现时钟效果

    用JavaScript+Canvas来实现最简单的时钟效果,供大家参考,具体内容如下 效果图: 先看html代码: <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/demo3.js" ></script> </head>

  • js+css3制作时钟特效

    我们先来看看效果图吧 再来奉上源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3 钟表</title> <style> .clock{ position: relative; width: 200px; height: 200px; border-radius: 110px; bo

  • JS+CSS实现滚动数字时钟效果

    本篇内容我们用js配合css样式表来实现一个滚动时钟的动画效果,这个效果一般都是用在网页开场动画以及区域的时间显示中,非常好看,动画效果也很个性,我们先来看下运行后的效果: 下面就是这个滚动时钟动画的全部代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &

  • 详解JavaScript的Date对象(制作简易钟表)

    JS提供了Date类型来处理时间和日期.Date类型内置一系列获取和设置日期时间信息的方法.下面我们简单的 概述一下这个Date类型.        大概看了一下Date类型的方法,下面给出: 上面的方法自己尝试即可,我只简单的演示一下JS正确输出的格式: var today=new Date();//创建一个时间日期对象 document.write("<h4>下面的是世界标准的时间输出:</h4>"); document.write(today+"

  • vue.js实现带日期星期的数字时钟功能示例

    本文实例讲述了vue.js实现带日期星期的数字时钟功能.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net vue.js带日期星期数字时钟</title> <style type="text/css"> html, body { height: 100%;

  • Javascript实现动态时钟效果

    本文实例为大家分享了js实现动态时钟效果的具体代码,供大家参考,具体内容如下 1.css代码 <style type="text/css"> #box{ width:200px; height:200px; background:pink; margin:100px auto; line-height:200px; text-align:center; border-radius:50%; box-shadow:0 0 100px pink; color:black; }

随机推荐