Таймер обратного отчета

ObjectOne > JavaScript > Таймер обратного отчета

Таймер обратного отчета

Акция, событие, или просто ради баловства, таймер обратного отчёта на сайт с помощью ооп javascript. Писал не я честно, в коде не разберусь, честно, возможно в каком то экзотическом браузере не будет работать. Но в гугле всё норм. Забирайте!

function CountdownTimer(elm,tl,mes){
 this.initialize.apply(this,arguments);
}
CountdownTimer.prototype={
 initialize:function(elm,tl,mes) {
  this.elem = document.getElementById(elm);
  this.tl = tl;
  this.mes = mes;
 },countDown:function(){
  var timer='';
  var today=new Date();
  var day=Math.floor((this.tl-today)/(24*60*60*1000));
  var hour=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*60*1000));
  var min=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*1000))%60;
  var sec=Math.floor(((this.tl-today)%(24*60*60*1000))/1000)%60%60;
  var me=this;

  if( ( this.tl - today ) > 0 ){
   timer += '<span class="number-wrapper"><div class="line"></div><div class="caption">ДНЕЙ</div><span class="number day">'+day+'</span></span>';
   timer += '<span class="number-wrapper"><div class="line"></div><div class="caption">ЧАСОВ</div><span class="number hour">'+hour+'</span></span>';
   timer += '<span class="number-wrapper"><div class="line"></div><div class="caption">МИНУТ</div><span class="number min">'+this.addZero(min)+'</span></span><span class="number-wrapper"><div class="line"></div><div class="caption">СЕКУНД</div><span class="number sec">'+this.addZero(sec)+'</span></span>';
   this.elem.innerHTML = timer;
   tid = setTimeout( function(){me.countDown();},10 );
  }else{
   this.elem.innerHTML = this.mes;
   return;
  }
 },addZero:function(num){ return ('0'+num).slice(-2); }
}
function CDT(){

 // Set countdown limit
 var tl = new Date('2015/08/11 00:00:00');

 // You can add time's up message here
 var timer = new CountdownTimer('CDT',tl,'<span class="number-wrapper"><div class="line"></div><span class="number end">Акция завершена</span></span>');
 timer.countDown();
}
window.onload=function(){
 CDT();
}

function CountdownTimer(elm,tl,mes){

this.initialize.apply(this,arguments);

}

CountdownTimer.prototype={

initialize:function(elm,tl,mes) {

this.elem = document.getElementById(elm);

this.tl = tl;

this.mes = mes;

},countDown:function(){

var timer='';

var today=new Date();

var day=Math.floor((this.tl-today)/(24*60*60*1000));

var hour=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*60*1000));

var min=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*1000))%60;

var sec=Math.floor(((this.tl-today)%(24*60*60*1000))/1000)%60%60;

var me=this;

if( ( this.tl - today ) > 0 ){

timer += '<span class="number-wrapper"><div class="line"></div><div class="caption">ДНЕЙ</div><span class="number day">'+day+'</span></span>';

timer += '<span class="number-wrapper"><div class="line"></div><div class="caption">ЧАСОВ</div><span class="number hour">'+hour+'</span></span>';

timer += '<span class="number-wrapper"><div class="line"></div><div class="caption">МИНУТ</div><span class="number min">'+this.addZero(min)+'</span></span><span class="number-wrapper"><div class="line"></div><div class="caption">СЕКУНД</div><span class="number sec">'+this.addZero(sec)+'</span></span>';

this.elem.innerHTML = timer;

tid = setTimeout( function(){me.countDown();},10 );

}else{

this.elem.innerHTML = this.mes;

return;

}

},addZero:function(num){ return ('0'+num).slice(-2); }

}

function CDT(){

// Set countdown limit

var tl = new Date('2015/08/11 00:00:00');

// You can add time's up message here

var timer = new CountdownTimer('CDT',tl,'<span class="number-wrapper"><div class="line"></div><span class="number end">Акция завершена</span></span>');

timer.countDown();

}

window.onload=function(){

CDT();

}

файл countdown.js

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Минимальный каркас странички</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="countdown.js"></script>
	<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-2">
				<p>Левая колонка</p>
			</div>
			<div class="col-md-8">
				<div id="CDT">
					<span class="number-wrapper">
						<div class="line"></div><div class="caption">ДНЕЙ</div><span class="number day">1944</span>
					</span>
					<span class="number-wrapper">
						<div class="line"></div>
						<div class="caption">ЧАСОВ</div>
						<span class="number hour">23</span>
					</span>
					<span class="number-wrapper">
						<div class="line"></div>
						<div class="caption">МИНУТ</div>
						<span class="number min">01</span>
					</span>
					<span class="number-wrapper">
						<div class="line"></div>
						<div class="caption">СЕКУНД</div>
						<span class="number sec">47</span>
					</span>
				</div>
			</div>
			<div class="col-md-2">
				<p>Правая колонка</p>
			</div>
		</div>
	</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Минимальный каркас странички</title>

</head>

<body>

<p>Левая колонка</p>

</div>

</span>

<div class="caption">ЧАСОВ</div>

</span>

<div class="caption">МИНУТ</div>

</span>

<div class="caption">СЕКУНД</div>

</span>

</div>

<p>Правая колонка</p>

</div>

</body>

</html>

index.html (библиотека бутстрапа и js хорошо что они тут, ведь сразу видно что конфликта не будет)

#container {
	width: 960px;
	margin: 20px auto;
	border: 1px solid #ccc;
}

#header {
	background: url(../images/header_bg.png) repeat-x;
	height: 88px;
	padding-top: 33px;
}

#logo {
	margin-left: 30px;
}

#menu {
	height: 46px;
	width: 100%;
	background: url(../images/menu_bg.png) repeat-x;
}

#menu ul li {
	float: left;
	padding: 13px 25px;
	border-right: 1px solid #e7ab45;
}

#menu ul li a {
	text-transform: uppercase;
	text-decoration: none;
	color: #996633;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

#menu ul li a:hover {
	text-decoration: underline;
}

#content {
	padding: 20px 35px;
	background: #fff;
}

.text {
	width: 600px;
	height: 150px;
	overflow: auto;
	border: 1px solid #aaa;
}

#CDT {
    font-size: 60px;
    color: #eee;
    margin: 30px 0 50px;
    font-weight: bold;
	text-align: center;
}

#CDT .number-wrapper {
    margin: 10px;
    -moz-box-shadow: 0 5px 8px #000000;
    -webkit-box-shadow: 0 5px 8px #000000;
    box-shadow: 0 5px 8px #000000;
    position: relative;
}

#CDT .number {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    background: #000;
    background-image: linear-gradient(bottom, #000000 2%, #3c3c3c 50%, #000000 100%);
    background-image: -o-linear-gradient(bottom, #000000 2%, #3c3c3c 50%, #000000 100%);
    background-image: -moz-linear-gradient(bottom, #000000 2%, #3c3c3c 50%, #000000 100%);
    background-image: -webkit-linear-gradient(bottom, #000000 2%, #3c3c3c 50%, #000000 100%);
    background-image: -ms-linear-gradient(bottom, #000000 2%, #3c3c3c 50%, #000000 100%);
    -webkit-border-top-right-radius: 7px;
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-top-left-radius: 0;
    -moz-border-radius-topright: 7px;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-bottomleft: 0;
    -moz-border-radius-topleft: 0;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    padding: 0 12px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border: 1px solid #555;
    -moz-box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);
    -webkit-box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);
    -moz-text-shadow: 0 3px 3px #000000;
    -webkit-text-shadow: 0 3px 3px #000000;
    text-shadow: 0 3px 3px #000000;
}
       
#CDT .line {
    position: absolute;
    width: 100%;
    height: 1px;
    top: 52%;
    left: 0;
    background: #000;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}
       
.caption {
   font-size: 12px;
   position: absolute;
   bottom: -30px;
   left: 0;
   text-align: center;
   width: 100%;
   color: #777;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

#container {

width: 960px;

margin: 20px auto;

border: 1px solid #ccc;

}

#header {

background: url(../images/header_bg.png) repeat-x;

height: 88px;

padding-top: 33px;

}

#logo {

margin-left: 30px;

}

#menu {

height: 46px;

width: 100%;

background: url(../images/menu_bg.png) repeat-x;

}

#menu ul li {

float: left;

padding: 13px 25px;

border-right: 1px solid #e7ab45;

}

#menu ul li a {

text-transform: uppercase;

text-decoration: none;

color: #996633;

text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);

}

#menu ul li a:hover {

text-decoration: underline;

}

#content {

padding: 20px 35px;

background: #fff;

}

.text {

width: 600px;

height: 150px;

overflow: auto;

border: 1px solid #aaa;

}

#CDT {

font-size: 60px;

color: #eee;

margin: 30px 0 50px;

font-weight: bold;

text-align: center;

}

#CDT .number-wrapper {

margin: 10px;

-moz-box-shadow: 0 5px 8px #000000;

-webkit-box-shadow: 0 5px 8px #000000;

box-shadow: 0 5px 8px #000000;

position: relative;

}

#CDT .number {

display: inline-block;

*display: inline;

*zoom: 1;

background: #000;

background-image: linear-gradient(bottom, #000000 2%, #3c3c3c 50%, #000000 100%);

background-image: -o-linear-gradient(bottom, #000000 2%, #3c3c3c 50%, #000000 100%);

background-image: -moz-linear-gradient(bottom, #000000 2%, #3c3c3c 50%, #000000 100%);

background-image: -webkit-linear-gradient(bottom, #000000 2%, #3c3c3c 50%, #000000 100%);

background-image: -ms-linear-gradient(bottom, #000000 2%, #3c3c3c 50%, #000000 100%);

-webkit-border-top-right-radius: 7px;

-webkit-border-bottom-right-radius: 0;

-webkit-border-bottom-left-radius: 0;

-webkit-border-top-left-radius: 0;

-moz-border-radius-topright: 7px;

-moz-border-radius-bottomright: 0;

-moz-border-radius-bottomleft: 0;

-moz-border-radius-topleft: 0;

border-top-right-radius: 7px;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

border-top-left-radius: 0;

-webkit-border-radius: 7px;

-moz-border-radius: 7px;

border-radius: 7px;

-moz-background-clip: padding;

-webkit-background-clip: padding-box;

background-clip: padding-box;

padding: 0 12px;

height: 80px;

line-height: 80px;

text-align: center;

border: 1px solid #555;

-moz-box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);

-webkit-box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);

box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);

-moz-text-shadow: 0 3px 3px #000000;

-webkit-text-shadow: 0 3px 3px #000000;

text-shadow: 0 3px 3px #000000;

}

#CDT .line {

position: absolute;

width: 100%;

height: 1px;

top: 52%;

left: 0;

background: #000;

-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);

-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);

box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);

}

.caption {

font-size: 12px;

position: absolute;

bottom: -30px;

left: 0;

text-align: center;

width: 100%;

color: #777;

}

style.css

Посмотреть пример

Скачать таймер: Таймер обратного отсчета

Количество просмотров: 617

| Категория: JavaScript
| Тэги: JavaScript / таймер

« js транслитерация Основы js »