jQuery addClass example

Change class name on click in jQuery

by joshmoto

HTML

<div class="clock">

  <!-- Hours -->
  <div class="hours">
    <div class="s-1">
      <div class="n-off">
        <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-off">
        <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>
  
  <!-- Minutes -->
  <div class="minutes">
    <div class="s-1">
      <div class="n-off">
       ...

SCSS

/* vars */
$body-color: white;
$hand-color: black;
$face-color: #eee;
$hand-width: 2px;

$clock-style: horizontal !default; /* values: vertical, horizontal */
$clock-width: 100%;

/* digit hand times...

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(' '));
};

let sec = 0,
  min = 0,
  hour = 0;

getValue();

var interval = setInterval(function() {
  getValue();
}, 1000);

function getValue() {
  var date = new Date();
   sec = date.getSeconds();
   min = date.getMinutes();
   hour = date.getHours();

  sec = getSec(sec);
  min = getSec(min);
  hour = getSec(hour);
  
  setSec(sec);
  setMin(min);
  setHour(hour);
}

function setSec(val) {
  $('.seconds .s-1 > div, .seconds .s-2 > div').removeClassRegEx('n-');
  $('.seconds .s-1 > div').addClass('n-' + parseInt(val / 10));
  $('.seconds .s-2 > div').addClass('n-' + parseInt(val % 10));
}
function setMin(val) {
  $('.minutes .s-1 > div, .minutes .s-2 > div').removeClassRegEx('n-');
  $('.minutes .s-1 > div').addClass('n-' + parseInt(val / 10));
  $('.minutes .s-2 > div').addClass('n-' + parseInt(val % 10));
}
function setHour(val) {
  $('.hours .s-1 > div, .hours .s-2 > div').removeClassRegEx('n-');
  $('.hours .s-1 > div').addClass('n-' + parseInt(val / 10));
  $('.hours .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;
}