纯js实现电子时钟特效

这是一款使用纯js实现电子时钟特效。该电子时钟可以显示时间，星期几，以及是上午还是下午。它使用简单，非常容易集成到项目中。

使用方法

在页面中引入电子时钟的样式文件main.css。

<link rel="stylesheet" type="text/css" href="css/main.css">
                

HTML结构

该电子时钟的基本HTML结构如下：

<main>
  <!-- 星期几 -->
  <div class="days">
    <div class="day">
      <p class="sunday">星期日</p>
    </div>
    <div class="day">
      <p class="monday">星期一</p>
    </div>
    <div class="day">
      <p class="tuesday">星期二</p>
    </div>
    <div class="day">
      <p class="wednesday">星期三</p>
    </div>
    <div class="day">
      <p class="thursday">星期四</p>
    </div>
    <div class="day">
      <p class="friday">星期五</p>
    </div>
    <div class="day">
      <p class="saturday">星期六</p>
    </div>
  </div>
  <!-- CLOCK -->
  <div class="clock">
    <!-- 小时 -->
    <div class="numbers">
      <p class="hours"></p>
      <p class="placeholder">88</p>
    </div>
    <div class="colon">
      <p>:</p>
    </div>
    <!-- 分 -->
    <div class="numbers">
      <p class="minutes"></p>
      <p class="placeholder">88</p>
    </div>

    <div class="colon">
      <p>:</p>
    </div>
    <!-- 秒 -->
    <div class="numbers">
      <p class="seconds"></p>
      <p class="placeholder">88</p>
    </div>
    <!-- 上午 / 下午 -->
    <div class="am-pm">
      <!-- AM -->
      <div>
        <p class="am">am</p>
      </div>
      <!-- PM -->
      <div>
        <p class="pm">pm</p>
      </div>
    </div>
  </div><!-- END CLOCK -->
</main>
                

JavaScript

该电子时钟通过下面的js代码来获取系统时间，并通过定时器来动态更新时间的显示。

window.onload = function(){
  time();
  ampm();
  whatDay();
  setInterval(function(){
    time();
    ampm();
    whatDay();
  }, 1000);
};


//gets current time and changes html to reflect it
function time(){
  var date = new Date(),
    hours = date.getHours(),
    minutes = date.getMinutes(),
    seconds = date.getSeconds();

  //make clock a 12 hour clock instead of 24 hour clock
  hours = (hours > 12) ? (hours - 12) : hours;
  hours = (hours === 0) ? 12 : hours;

  //invokes function to make sure number has at least two digits
  hours = addZero(hours);
  minutes = addZero(minutes);
  seconds = addZero(seconds);

  //changes the html to match results
  document.getElementsByClassName('hours')[0].innerHTML = hours;
  document.getElementsByClassName('minutes')[0].innerHTML = minutes;
  document.getElementsByClassName('seconds')[0].innerHTML = seconds;
}

//turns single digit numbers to two digit numbers by placing a zero in front
function addZero (val){
  return (val <= 9) ? ("0" + val) : val;
}

//lights up either am or pm on clock
function ampm(){
  var date = new Date(),
    hours = date.getHours(),
    am = document.getElementsByClassName("am")[0].classList,
    pm = document.getElementsByClassName("pm")[0].classList;
  
    
  (hours >= 12) ? pm.add("light-on") : am.add("light-on");
  (hours >= 12) ? am.remove("light-on") : pm.remove("light-on");
}

//lights up what day of the week it is
function whatDay(){
  var date = new Date(),
    currentDay = date.getDay(),
    days = document.getElementsByClassName("day");

  //iterates through all divs with a class of "day"
  for (x in days){
    //list of classes in current div
    var classArr = days[x].classList;

    (classArr !== undefined) && ((x == currentDay) ? classArr.add("light-on") : classArr.remove("light-on"));
  }
}                  
                

该电子时钟的github地址为：https://github.com/SlyTy7/clock

相关插件

jQuery和CSS3精美翻页式电子时钟特效

基于格林威治标准时间（GMT）的jQuery模拟时钟插件

jQuery超酷3D翻页式电子时钟特效插件

使用jQuery和css3制作逼真的数字时钟效果