LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

JAVASCRIPT COUNTDOWN

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

:

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

THE MOST SIMPLE WAY YOU WOULD HAVE FOUND.

NOW, WITH 12:34

CSS
* {
  margin: 0;
  padding: 0;
  font-family: 'Arimo', sans-serif;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body {
  background: #d7d7d7;
  color: white;
}

/*=================
* TIMER
*=================*/
.timer {
  width: 550px;
  height: 248px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -275px;
  margin-top: -124px;
  color: white;
}
.timer * {
  cursor: default;
}
.timer h3 {
  width: 100%;
  font-size: 26px;
  letter-spacing: 4px;
  text-align: center;
}
.timer--clock {
  width: 100%;
  position: relative;
  padding-left: 6px;
  margin-top: 22px;
  overflow: hidden;
}
.timer--clock .clock-display-grp {
  width: 100%;
  position: relative;
}
.timer--clock .clock-display-grp .number-grp {
  width: auto;
  display: block;
  height: 156px;
  float: left;
  overflow: hidden;
}
.timer--clock .clock-display-grp .number-grp .number-grp-wrp {
  width: 100%;
  position: relative;
}
.timer--clock .clock-display-grp .number-grp .number-grp-wrp .num {
  width: 100%;
  position: relative;
  height: 156px;
}
.timer--clock .clock-display-grp .number-grp .number-grp-wrp .num p {
  width: auto;
  display: table;
  font-size: 205px;
  line-height: 150px;
  font-weight: bold;
}
.timer--clock .clock-separator {
  width: auto;
  float: left;
  display: block;
  height: 156px;
}
.timer--clock .clock-separator p {
  width: auto;
  display: table;
  font-size: 205px;
  line-height: 150px;
  font-weight: bold;
}
.timer h4 {
  width: 100%;
  font-size: 10px;
  letter-spacing: 6px;
  text-align: center;
  padding-top: 25px;
  float: left;
}

.reload {
  width: 125px;
  height: 14px;
  position: absolute;
  bottom: 50vh;
  left: 50%;
  margin-left: -62.5px;
  opacity: 0;
  display: none;
  cursor: pointer;
  z-index: 9999;
}
.reload:hover svg path {
  fill: #666666;
}
.reload:hover p {
  color: #666666;
}
.reload svg {
  width: 12px;
  height: 12px;
  float: left;
  margin-right: 10px;
}
.reload p {
  color: #2b2b2b;
  font-size: 12px;
  float: left;
  line-height: 11px;
}
JS
TweenLite.defaultEase = Expo.easeOut;

initTimer("00:11"); // other ways --> "0:15" "03:5" "5:2"

var reloadBtn = document.querySelector('.reload');
var timerEl = document.querySelector('.timer');

function initTimer (t) {
   
   var self = this,
       timerEl = document.querySelector('.timer'),
       minutesGroupEl = timerEl.querySelector('.minutes-group'),
       secondsGroupEl = timerEl.querySelector('.seconds-group'),

       minutesGroup = {
          firstNum: minutesGroupEl.querySelector('.first'),
          secondNum: minutesGroupEl.querySelector('.second')
       },

       secondsGroup = {
          firstNum: secondsGroupEl.querySelector('.first'),
          secondNum: secondsGroupEl.querySelector('.second')
       };

   var time = {
      min: t.split(':')[0],
      sec: t.split(':')[1]
   };

   var timeNumbers;

   function updateTimer() {

      var timestr;
      var date = new Date();

      date.setHours(0);
      date.setMinutes(time.min);
      date.setSeconds(time.sec);

      var newDate = new Date(date.valueOf() - 1000);
      var temp = newDate.toTimeString().split(" ");
      var tempsplit = temp[0].split(':');

      time.min = tempsplit[1];
      time.sec = tempsplit[2];

      timestr = time.min + time.sec;
      timeNumbers = timestr.split('');
      updateTimerDisplay(timeNumbers);

      if(timestr === '0000')
         countdownFinished();

      if(timestr != '0000')
         setTimeout(updateTimer, 1000);

   }

   function updateTimerDisplay(arr) {

      animateNum(minutesGroup.firstNum, arr[0]);
      animateNum(minutesGroup.secondNum, arr[1]);
      animateNum(secondsGroup.firstNum, arr[2]);
      animateNum(secondsGroup.secondNum, arr[3]);

   }

   function animateNum (group, arrayValue) {

      TweenMax.killTweensOf(group.querySelector('.number-grp-wrp'));
      TweenMax.to(group.querySelector('.number-grp-wrp'), 1, {
         y: - group.querySelector('.num-' + arrayValue).offsetTop
      });

   }
   
   setTimeout(updateTimer, 1000);

}

function countdownFinished() {
   setTimeout(function () {
      TweenMax.set(reloadBtn, { scale: 0.8, display: 'block' });
      TweenMax.to(timerEl, 1, { opacity: 0.2 });
      TweenMax.to(reloadBtn, 0.5, { scale: 1, opacity: 1 }); 
   }, 1000);
}

reloadBtn.addEventListener('click', function () {
   TweenMax.to(this, 0.5, { opacity: 0, onComplete:
      function () { 
         reloadBtn.style.display= "none";
      } 
   });
   TweenMax.to(timerEl, 1, { opacity: 1 });
   initTimer("12:35");
});
Host Instantly Drag and Drop Website Builder

 

Description

Simple Javascript countdown example using TweenMax.
Term
Mon, 11/27/2017 - 21:49

Related Codes

Pen ID
Pen ID
Pen ID