jQuery css实现的时钟效果(兼容各浏览器)

首页

web前端

js教程

jQuery css实现的时钟效果(兼容各浏览器)_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:17 PM

css jquery 时钟

本文实例讲述了jQuery css实现的时钟效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

这里没有做太多的修饰，简单的实现了一下功能，另外，用的是js的setTimeout方法，当时间长了之后，会有一定的延时，建议，在每隔多少分钟执行一次时钟校准！哈哈，都有误差的嘛，反正我是没给你校。

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
  <script type="text/javascript" >
    var addRadian = Math.PI / 30;
    var wrapper = null;
    var minutes = 0;
    var hours = 0;
    var secondsLineLength = 14;
    var secondLineLength = 20;
    function cloneObj(obj1) {
      var tempObj = {};
      for (var i in obj1) {
        if (obj1.hasOwnProperty(i)) {
          tempObj[i] = obj1[i];
        }
      }
      return tempObj;
    }
    function createMinute(po, r, text) {
      var minute = [];
      minute.push('<div class="minute" style="left:');
      minute.push(po.x);
      minute.push('px; top:');
      minute.push(po.y);
      minute.push('px;" >');
      minute.push(text);
      minute.push('</div>');
      wrapper.append(minute.join(''));
    }
    function createHour(po, r, text) {
      var minute = [];
      minute.push('<div class="hour" style="left:');
      minute.push(po.x);
      minute.push('px; top:');
      minute.push(po.y);
      minute.push('px;" >');
      minute.push(text);
      minute.push('</div>');
      wrapper.append(minute.join(''));
    }
    function initSeconds(text, center, range) {
      var now_seconds = new Date().getSeconds();
      now_seconds = now_seconds > 0 &#63; now_seconds - 1 : 0;
      for (var i = 0; i < secondsLineLength + 1; i++) {
        createFlower(center, '●', range, (i + 1) * secondLineLength, Math.PI / 2 + (now_seconds) * addRadian, true, i == secondsLineLength &#63; true : false);
      }
    }
    function initMinutes(r, text, center) {
      var x = 0,
        y = 0;
      for (var i = 0; i < 60; i++) {
        x = center.x - Math.cos(Math.PI / 2 + i * addRadian) * (r + secondLineLength);
        y = center.y - Math.sin(Math.PI / 2 + i * addRadian) * (r + secondLineLength); 
        createMinute({x: x,y: y}, r, text);
      }
      minutes = new Date().getMinutes();
      waldedMinute(minutes);
    }
    function initHours(r, text, center) {
      var x = 0,
        y = 0;
      for (var i = 0; i < 60; i+=5) {
        x = center.x - Math.cos(Math.PI / 2 + i * addRadian) * (r + secondLineLength);
        y = center.y - Math.sin(Math.PI / 2 + i * addRadian) * (r + secondLineLength);
        createHour({ x: x, y: y }, r, text);
      }
      hours = new Date().getHours();
      waldedHour(hours);
    }
    function waldedMinute(index) {
      var index = Math.floor((index % 60)) > 0 &#63; Math.floor((index % 60)) + 1 : 0;
      wrapper.find(".minute:lt(" + index + ")").css('color', "green");
      if (index > 0) {
        wrapper.find(".minute:eq(0)").css('color', '#DDDDDD');
      }
    }
    function waldedHour(index) {
      var index = Math.floor((index%12)) > 0 &#63; Math.floor((index%12)) + 1:0;
      wrapper.find(".hour:lt(" + index + ")").css('color', "green");
      if(index > 0) {
        wrapper.find(".hour:eq(0)").css('color', '#494949');
      }
    }
    function animation(obj, r, radian, range, center, text, last) {
      logNowTime();
      radian += addRadian;
      var x = center.x - Math.cos(radian) * r;
      var y = center.y - Math.sin(radian) * r;
      obj.css({ "left": x, "top": y });
      if (last && radian > Math.PI * 5 / 2 - 0.1) {
        radian = Math.PI / 2;
        minutes++;
        if (minutes < 60) {
        } else {
          if (minutes % 60 == 0) {
            hours++;
            if (hours % 12 != 0) {
            } else {
              wrapper.find(".hour").css('color', "#494949");
            }
            waldedHour(hours);
          } else {
            wrapper.find(".minute").css('color', "#DDDDDD");   
          }
        }
        waldedMinute(minutes); 
      }
      setTimeout(function () {
        animation(obj, r, radian, range, center, text, last);
      }, 1000);
    }
    function createFlower(center, text, range, r, radian, autoAnimate, last) {
      var flower = [];
      flower.push('<div class="second"');
      flower.push(' style="left:');
      flower.push(center.x);
      flower.push('px; top:');
      flower.push(center.y);
      flower.push('px;');
      flower.push(autoAnimate &#63; '" >' : 'color:red;" >');
      flower.push(text);
      flower.push('</div>');
      flower = $(flower.join(''));
      flower.appendTo(wrapper);
      //var r = (index + 1) * secondLineLength;
      if (autoAnimate) {
        animation(flower, r, radian, range, center, text, last);
      }
    }
    // 查看当前时间
    function logNowTime() {
      var date = new Date(),
        hour = date.getHours(),
        minute = date.getMinutes(),
        second = date.getSeconds();
      hour = hour < 10 &#63; "0" + hour : hour;
      minute = minute < 10 &#63; "0" + minute : minute;
      second = second < 10 &#63; "0" + second : second;
      $("#time").html("当前时间-" + hour + ":" + minute + ":" + second);
    }
    $(document).ready(function () {
      wrapper = $("#wrapper"),
        width = wrapper.width(),
        height = wrapper.height(),
        offLeft = parseInt(wrapper.offset().left),
        range = {
          x: offLeft,
          y: 0,
          x1: offLeft + width,
          y1: height
        },
        center = {
          x: Math.round(width / 2) + offLeft,
          y: Math.round(height / 2)
        };
      initHours(secondLineLength * secondsLineLength + 40, '●', center);
      initMinutes(secondLineLength * secondsLineLength + 20, '●', center);
      initSeconds('●', center, range);
    });  
  </script>
  <style type="text/css" >
    body { margin:0; padding:0; }
    #wrapper { margin:0 auto; width:1000px; height:780px; background:black; }
    .second { width:12px; height:12px; position:absolute; text-shadow:1px 1px 1px green; color:Green; } 
    .minute { color:#DDDDDD; position:absolute;}
    .hour { color:#494949; position:absolute;}
    #time { font-size:30px; line-height:30px; text-shadow:2px 2px 2px green; text-align:center; }
  </style>
</head>
<body>
<div id="time"></div>
<div id="wrapper" >
</div>
</body>
</html>

登录后复制

更多关于jQuery特效相关内容感兴趣的读者可查看本站专题：《jQuery常见经典特效汇总》及《jQuery动画与特效用法总结》

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

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7884

Java教程

1649

CakePHP 教程

1410

Laravel 教程

1301

PHP教程

1245

显示更多

Related knowledge

vue中怎么用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分为五个步骤：安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选：自定义样式。可选：使用插件。

HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

了解HTML，CSS和JavaScript：初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎么写分割线 Apr 07, 2025 pm 03:12 PM

创建 Bootstrap 分割线有两种方法：使用标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。

bootstrap怎么设置框架 Apr 07, 2025 pm 03:27 PM

要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。

bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。