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

前端技术 2023/09/02 JavaScript

本文实例讲述了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 ? 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 ? 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 ? 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 ? 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 ? \'\" >\' : \'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 ? \"0\" + hour : hour;
      minute = minute < 10 ? \"0\" + minute : minute;
      second = second < 10 ? \"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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/4638

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案