jQuery addClass example

Change class name on click in jQuery

by joshmoto

HTML

<div class="clock">

  <div class="seconds">
    <div class="s-1">
      <div class="n-5">
        <time class="t-01"></time>
        <time class="t-02"></time>
        <time class="t-03"></time>
        <time class="t-04"></time>
        <time class="t-05"></time>
        <time class="t-06"></time>
        <time class="t-07"></time>
        <time class="t-08"></time>
        <time class="t-09"></time>
        <time class="t-10"></time>
        <time class="t-11"></time>
        <time class="t-12"></time>
        <time class="t-13"></time>
        <time class="t-14"></time>
        <time class="t-15"></time>
        <time class="t-16"></time>
        <time class="t-17"></time>
        <time class="t-18"></time>
        <time class="t-19"></time>
        <time class="t-20"></time>
        <time class="t-21"></time>
        <time class="t-22"></time>
        <time class="t-23"></time>
        <time class="t-24"></time>
      </div>
    </div>

    <div class="s-2">
      <div class="n-6">
        <time class="t-01"></time>
        <time class="t-02"></time>
        <time class="t-03"></time>
        <time class="t-04"></time>
        <time class="t-05"></time>
        <time class="t-06"></time>
        <time class="t-07"></time>
        <time class="t-08"></time>
        <time class="t-09"></time>
        <time class="t-10"></time>
        <time class="t-11"></time>
        <time class="t-12"></time>
        <time class="t-13"></time>
        <time class="t-14"></time>
        <time class="t-15"></time>
        <time class="t-16"></time>
        <time class="t-17"></time>
        <time class="t-18"></time>
        <time class="t-19"></time>
        <time class="t-20"></time>
        <time class="t-21"></time>
        <time class="t-22"></time>
        <time class="t-23"></time>
        <time class="t-24"></time>
      </div>
    </div>
  </div>

</div>

SCSS

BODY {
  background: black;
  overflow: hidden;
  height: 100vh;
}

.clock {
  padding: 40px;
  margin: 40px auto;
  max-width: 600px;
  overflow: hidden;
  
  .h-1,.h-2,
  .m-1,.m-2,
  .s-1,.s-2 {
    margin-bottom: 0px;
    width: 50%;
    float: left;
    position: relative;
    &:before {
      content: "";
      padding-top: 150%;
      display: block;
    }
    >DIV {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
  TIME {
    /* clock */
    float: left;
    width: calc(100%/4);
    height: calc(100%/6);
    display: block;
    // background: #eeeeee;
    border-radius: 50%;
    position: relative;
    
    /* the hands */
    $hand-w : 2px;
    &:before,
    &:after {
      border-radius: $hand-w/2;
      content: "";
      display: block;
      width: $hand-w;
      height: 50%;
      background: white;
      left: 50%;
      position: absolute;
      transform: translateX(-($hand-w/2));
      transform-origin: center bottom;
      transition: all .5s;
    }
 ...

JavaScript

// remove class regex
$.fn.removeClassRegEx = function(regex) {
  var classes = $(this).attr('class');
  if (!classes || !regex) return false;
  var classArray = [];
  classes = classes.split(' ');
  for (var i = 0, len = classes.length; i < len; i++)
    if (!classes[i].match(regex)) classArray.push(classes[i]);
  $(this).attr('class', classArray.join(' '));
};
var val = 0;
getValue();
var interval = setInterval(function() {
  getValue();
}, 1000);

function getValue() {
  var date = new Date();
  val = date.getSeconds();
  val = parseInt(val) + 1;
  val = getSec(val);
  setValue(val);
}

function setValue(val) {
  $('.s-1 > DIV, .s-2 > DIV').removeClassRegEx('n-');
  $('.s-1 > DIV').addClass('n-' + parseInt(val / 10));
  $('.s-2 > DIV').addClass('n-' + parseInt(val % 10));
}

function getSec(num) {
  if (num < 10 || num == 0) {
    num = '0' + num;
  } else if (num >= 60) {
    num = num % 60;
  }
  return num;
}