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

2019-11-20 10:40:23

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：JS实现动态生成表格并提交表格数据向后端

下一篇：jQuery实现的分子运动小球碰撞效果