남은시간(목표시간 까지 카운팅)

2016. 12. 5. 12:49

이미지 파일

<<nowTIme.json>>

info({

"year" : "2013",

"month" : "06",

"day" : "20",

"hours" : "12",

"min" : "00",

"second" : "00"

})

<<Html>>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Countdown</title>

</head>

<body>

</div>

</body>

</html>

<<Css>>

*{padding: 0; margin: 0; line-height: none; border: 0;}

#timeBox{height:121px;overflow:hidden;position:absolute;left:144px;top:150px}

#timeBox em,#em_tyche div.tyche_header div.timeBox span{float:left;position:relative;width:104px;height:104px;margin-right:2px;background-image:url(http://img.emart.co.kr/front_2013/tyche/today_time.png);background-repeat:no-repeat}

#timeBox span{float:none;position:absolute;top:0;left:0}

#timeBox em.colon{width:12px;margin:0 5px;background-position:-360px -104px}

#timeBox em.num_0{background-position:-208px -104px}

#timeBox em.num_0 span{background-position:-208px -104px}

#timeBox em.num_1{background-position:0 0}

#timeBox em.num_1 span{background-position:0 0}

#timeBox em.num_2{background-position:-104px 0}

#timeBox em.num_2 span{background-position:-104px 0}

#timeBox em.num_3{background-position:-208px 0}

#timeBox em.num_3 span{background-position:-208px 0}

#timeBox em.num_4{background-position:-312px 0}

#timeBox em.num_4 span{background-position:-312px 0}

#timeBox em.num_5{background-position:-416px 0}

#timeBox em.num_5 span{background-position:-416px 0}

#timeBox em.num_6{background-position:-520px 0}

#timeBox em.num_6 span{background-position:-520px 0}

#timeBox em.num_7{background-position:-624px 0}

#timeBox em.num_7 span{background-position:-624px 0}

#timeBox em.num_8{background-position:0 -104px}

#timeBox em.num_8 span{background-position:0 -104px}

#timeBox em.num_9{background-position:-104px -104px}

#timeBox em.num_9 span{background-position:-104px -104px}

<<JavaScript>>

// JavaScript Code

var isFirst = true;

var nowTime; // 현재시간설정

var endTime = new Date(2013, 06-1, 21, 18, 00, 00); //목표시간설정

var timeLeft;

var timeSinceLast = 0;

var whatYoil = new Array("일요일","월요일","화요일","수요일","목요일","금요일","토요일")

//var whatYoil = new Array("Sunday","Monday","Tuseday","Wednesday","Thursday","Friday","Saturday")

window.onload = function(){

$.ajax({

//contentType을 지정해줘야 합니다.

url: "nowTime.json",

crossDomain: true,

dataType: "jsonp",

jsonpCallback: "info",

success: function(xml) {

//console.debug(xml.year)

//console.debug(xml.month)

nowTime = new Date(xml.year, xml.month-1, xml.day, xml.hours, xml.min, xml.second) //서버 현제시간으로 셋팅

timeLeft = (endTime - nowTime) / 1000; // 목표시간 - 서버현제시간

$('#nowTime').text("현재시간설정 : " + xml.year+":"+xml.month+":"+xml.day+":"+xml.hours+":"+xml.min+":"+xml.second);

$('#limitTime').text("목표시간설정 : 2013:06:21:18:00:00");

timeInit()

error: function() {

alert("현재시간을 서버에서 불러오지 못했습니다.");

}

});

};

function timeInit(){

var timeArr = new Array(6);

timeArr[0] = "TimeThp_1";

timeArr[1] = "TimeThp_2";

timeArr[2] = "TimeThp_3";

timeArr[3] = "TimeThp_4";

timeArr[4] = "TimeThp_5";

timeArr[5] = "TimeThp_6";

timeobj = new Array();

for(var i=0; i<timeArr.length; i++) {

timeobj.push( document.getElementById(timeArr[i]) );

}

$(this).everyTime(1000, "countTimer", function(){

if (isFirst === true || timeLeft == -1 || (timeLeft < 300 && timeSinceLast >= 60)) {

var nt = new Date().getTime();

$.get("timesync.php?nowtime=" + nt, function(data) {

nowTime = eval('new Date(' + data + ')');

timeLeft = (endTime - nowTime) / 1000;

});

isFirst = false;

timeSinceLast = 0;

}

var outputString = '';

if (timeLeft <= 0) {

outputString = '종료';

hourCount = "00"

minCount = "00"

secCount = "00"

} else {

var dayCount = Math.floor(timeLeft / 86400);

var hourCount = Math.floor((timeLeft - dayCount * 86400) / 3600);

var minCount = Math.floor((timeLeft - (dayCount * 86400) - (hourCount * 3600)) / 60);

var secCount = timeLeft - (dayCount * 86400) - (hourCount * 3600) - (minCount * 60);

if (dayCount > 0) {

outputString = dayCount + '일' + " " + whatYoil[nowTime.getDay()];

}

outputString += digit(hourCount) + ':' + digit(minCount) + ':' + digit(secCount);

timeLeft -= 1;

timeSinceLast += 1;

}

/////// display

$('#countDown').text(outputString);

timeobj[0].className = 'num_'+String(digit(hourCount)).substr(0, 1)

timeobj[1].className = 'num_'+String(digit(hourCount)).substr(1, 1)

timeobj[2].className = 'num_'+String(digit(minCount)).substr(0, 1)

timeobj[3].className = 'num_'+String(digit(minCount)).substr(1, 1)

timeobj[4].className = 'num_'+String(digit(secCount)).substr(0, 1)

timeobj[5].className = 'num_'+String(digit(secCount)).substr(1, 1)

});

}

function digit(c){

if(c < 10){

return "0"+c

}else{

return c

}

728x90

저작자표시

'web > javascript & jquery' 카테고리의 다른 글

모바일 기기 체크 하기(ios / android) (0)	2016.12.07
브라우저 관계 없이 iframe 내 함수 호출 하기 (0)	2016.12.07
배열 원소값 모두 더하기 (0)	2016.12.05
IE6 , 7, 8 에서 png 사용하기 (0)	2016.12.05
로딩 모션 제이쿼리 pace.js (0)	2016.11.30

새폴더

남은시간(목표시간 까지 카운팅)

'web > javascript & jquery' 카테고리의 다른 글

+ Recent posts

티스토리툴바