时钟效果

Posted 你七啊？

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了时钟效果相关的知识，希望对你有一定的参考价值。

时钟

原生js实现；

知识点：递归技巧或思想、window.onload页面加载完成后、Date对象、三元运算补零技巧。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试</title>
</head>
<body>

    <span class="year" id="data"></span>
    <span class="hour" id="now"></span>

<script type="text/javascript">

    window.onload = showTime;

    function showTime()
        {
          var today=new Date();
          var year=today.getFullYear();
          var month=today.getMonth()+1;
          var day=today.getDate();
          var hours=today.getHours();
          var minutes=today.getMinutes();
          var seconds=today.getSeconds();
          //如果是单位数字，前面补0
          month=month<10? "0"+month :month;
          day=day<10? "0"+day :day;
          hours=hours<10? "0"+hours :hours;
          minutes=minutes<10? "0"+minutes :minutes;
          seconds=seconds<10? "0"+seconds :seconds;
          //时间信息连成字符串
          var kk=year+"年"+month+"月"+day+"日 ";
          var now = hours+":"+minutes+":"+seconds;
          //获取id=result的内容
          var obj=document.getElementById("data");
          var hm=document.getElementById("now");
          obj.innerHTML=kk;
          hm.innerHTML=now;
          //延时器
          window.setTimeout("showTime()",1000);//自己内部调自己，递归思想，由于时钟一直存在，不需要递归出口；
        }
        
</script>
</body>
</html>

 

Jquery实现：引用jquery.jclock.js

注意 在引用jquery.jclock.js之前要先引用jquery

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试</title>
    
    <script src="../js/jquery-1.7.2.min.js"></script>
   <script src="../js/jquery.jclock.js"></script>
  
</head>
<body>

   <span id="clock"></span>

<script type="text/javascript">


     $(function(){

        $("#clock").jclock({withDate:true, withWeek:true});
 });



        
</script>
</body>
</html>

jquery.jclock.js 这个不好找；直接贴源码吧

(function($) {
  $.fn.jclock = function(options) {
    $.fn.jclock.timerID = null;
    $.fn.jclock.running = false;
    $.fn.jclock.el = null;
    var version = ‘0.1.1‘;
  // Download by http://www.codefans.net
    // options
    var opts = $.extend({}, $.fn.jclock.defaults, options);
         
    return this.each(function() {
      $this = $(this);
      $.fn.jclock.el = $this;

      var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

      $.fn.jclock.withDate = o.withDate;
    $.fn.jclock.withWeek = o.withWeek;
    $.fn.jclock.timeNotation = o.timeNotation;
      $.fn.jclock.am_pm = o.am_pm;
      $.fn.jclock.utc = o.utc;

      $this.css({
        fontFamily: o.fontFamily,
        fontSize: o.fontSize,
        backgroundColor: o.background,
        color: o.foreground
      });

      $.fn.jclock.startClock();

    });
  };
       
  $.fn.jclock.startClock = function() {
    $.fn.jclock.stopClock();
    $.fn.jclock.displayTime();
  }
  $.fn.jclock.stopClock = function() {
    if($.fn.jclock.running) {
      clearTimeout(timerID);
    }
    $.fn.jclock.running = false;
  }
  $.fn.jclock.displayTime = function(el) {
  var date = $.fn.jclock.getDate();
  var week = $.fn.jclock.getWeek();
  var time = $.fn.jclock.getTime();
    $.fn.jclock.el.html(date + week + time);
    timerID = setTimeout("$.fn.jclock.displayTime()",1000);
  }
  $.fn.jclock.getDate = function() {
  if($.fn.jclock.withDate == true) {
      var now = new Date();
      var year, month, date;
      
      if($.fn.jclock.utc == true) {
      year = now.getUTCFullYear();
    month = now.getUTCMonth() + 1;
    date = now.getUTCDate();
    } else {
      year = now.getFullYear();
        month = now.getMonth() + 1;
        date = now.getDate();
    }
      
      month = ((month < 10) ? "0" : "") + month;
      date = ((date < 10) ? "0" : "") + date;
      
      var dateNow = year + "-" + month + "-" + date + " ";
  } else {
      var dateNow = "";
  }
    return dateNow;
  }
  $.fn.jclock.getWeek = function() {
    if($.fn.jclock.withWeek == true) {
    var now = new Date();
    var week;
    
    if($.fn.jclock.utc == true) {
      week = now.getUTCDay();
    } else {
      week = now.getDay();
    }
    
    $.each(["日","一","二","三","四","五","六"],function(i,n) {
        if(i == week) {week = n; return;}
    });
    
    var weekNow = "周" + week + " ";
  } else {
    var weekNow = "";
  }
  return weekNow;
  }
  $.fn.jclock.getTime = function() {
    var now = new Date();
    var hours, minutes, seconds;

    if($.fn.jclock.utc == true) {
      hours = now.getUTCHours();
      minutes = now.getUTCMinutes();
      seconds = now.getUTCSeconds();
    } else {
      hours = now.getHours();
      minutes = now.getMinutes();
      seconds = now.getSeconds();
    }

    if ($.fn.jclock.timeNotation == ‘12h‘) {
      hours = ((hours > 12) ? hours - 12 : hours);
    } else {
      hours   = ((hours <  10) ? "0" : "") + hours;
    }

    minutes = ((minutes <  10) ? "0" : "") + minutes;
    seconds = ((seconds <  10) ? "0" : "") + seconds;

    var timeNow = hours + ":" + minutes + ":" + seconds;
    if ( ($.fn.jclock.timeNotation == ‘12h‘) && ($.fn.jclock.am_pm == true) ) {
      timeNow += (hours >= 12) ? " P.M." : " A.M."
    }

    return timeNow;
};
       
  // plugin defaults
  $.fn.jclock.defaults = {
  withDate:false,
  withWeek:false,
    timeNotation: ‘24h‘,
    am_pm: false,
    utc: false,
    fontFamily: ‘‘,
    fontSize: ‘‘,
    foreground: ‘‘,
    background: ‘‘
  };
})(jQuery);

 

以上是关于时钟效果的主要内容，如果未能解决你的问题，请参考以下文章

[12小时Javascript Clock显示24时间，错误的AM / PM

代码写响应式时钟效果

canvas实现的时钟效果

基于JS和JQuery实现的两种时钟效果

原生javascript实现网页显示日期时钟效果

h5简写时钟效果