'JavaScript'에 해당되는 글 3건

  1. 2019.03.13 D-DAY 카운트다운
  2. 2015.09.02 IE 호환성 보기 문제점
  3. 2015.03.19 그래프API - taucharts

D-DAY 카운트다운

Javascript 2019.03.13 16:11

D-DAY를 만들어야하는데 스크립트로 해야했다. 기존에 만들어둔 자료를 활용할려고 했는데, 테스트하다보니 정확도가 떨어져서 만들다가 뭔가 마음에 안들어서 구글링하니 깔끔한 샘플이 있다.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script language="javascript">
$(function(){
var countDownDate = new Date('2019-03-25T23:00:00'); //목표날짜시간
function fnCountDown(){
var now = new Date().getTime();
var distance = countDownDate - now;
if (distance < 0) {
clearInterval(countDownTimer);
}
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
if(days < 10) days = '0'+days;
if(hours < 10) hours = '0'+hours;
if(minutes < 10) minutes = '0'+minutes;
if(seconds < 10) seconds = '0'+seconds;
$(".countTimeDay").html(days);
$(".countTimeHour").html(hours);
$(".countTimeMinute").html(minutes);
$(".countTimeSecond").html(seconds);
}
//초기화
fnCountDown();
//카운트다운 셋팅
var countDownTimer = setInterval(fnCountDown, 1000); /* millisecond 단위의 인터벌 */
});
</script>

<div>
<strong>카운트 다운</strong>
<span class="countTimeDay">00</span>일
<span class="countTimeHour">00</span>시
<span class="countTimeMinute">00</span>분
<span class="countTimeSecond">00</span>초
</div>


카운트 다운 00000000

숫자는 2자리로 나오게 했다. 필요없으면 그 부분을 삭제해도 된다.

다음은 javascript만으로 만들었다.
<style>
body{margin: 0px;border: 0px;width:350px;}
audio{width:350px;height: 28px;}
</style>
<script language="javascript">
var countDownDate = new Date('2019-03-25T23:00:00'); //목표날짜시간

function fnCountDown(){
var now = new Date().getTime();
var distance = countDownDate - now;
if (distance < 0) {
clearInterval(countDownTimer);
}
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
if(days < 10) days = '0'+days;
if(hours < 10) hours = '0'+hours;
if(minutes < 10) minutes = '0'+minutes;
if(seconds < 10) seconds = '0'+seconds;
document.getElementsByClassName('countTimeDay')[0].innerHTML = days;
document.getElementsByClassName('countTimeHour')[0].innerHTML = hours;
document.getElementsByClassName('countTimeMinute')[0].innerHTML = minutes;
document.getElementsByClassName('countTimeSecond')[0].innerHTML = seconds;
}

window.onload = function(){
//초기화
fnCountDown();

//카운트다운 셋팅
var countDownTimer = setInterval(fnCountDown, 1000); /* millisecond 단위의 인터벌 */
}
</script>

<div>
<strong>카운트 다운</strong>
<span class="countTimeDay">00</span>일
<span class="countTimeHour">00</span>시
<span class="countTimeMinute">00</span>분
<span class="countTimeSecond">00</span>초
</div>



참고 페이지

'Javascript' 카테고리의 다른 글

D-DAY 카운트다운  (0) 2019.03.13
그래프(차트)를 그려보자 chart.js  (0) 2018.03.12
Naver Maps Javascript API v3를 사용해보자  (0) 2017.01.06
한글 검사 패턴  (0) 2016.01.13
IE 호환성 보기 문제점  (0) 2015.09.02
그래프API - taucharts  (0) 2015.03.19
tags : D-day, JavaScript
Trackbacks 0 : Comments 0

Write a comment


IE 호환성 보기 문제점

Javascript 2015.09.02 12:14

거의 10년정도 된 CMS를 리뉴얼하다보니 문제가 여러가지 발생했다. 가장 큰 문제가 스크립트 문제다.


javascript가 prototype으로 되어있다보니, 최신버젼 ie에서 문제가 많아 호환성보기를 설정하고 사용중이였다. 가장 큰문제가 스크립트 오동작인데, 정말 이해가 안갈정도로 엉뚱한 태그에 엉뚱한 값이 들어간다... 특히 크롬에서는 쓸 수가 없다. 리뉴얼하다보니 스크립트가 맘에 안들어서 jquery로 수정중인데, 여기서 문제가 발생했다.


호환성보기를 설정하면 jquery가 동작을 하지 않는다. 원인을 찾아 삽질하다보니 결론이 나왔는데, ie에서 $을 prototype으로 바꿔버린다. 그래서 jquery가 씹히는 것이다. 왜인지는 모르겠지만 테스트 결과나온 결론이다. 그래서 브라우저에 있는 온갓 데이터를 지워보았으나 해결되지 않아서 결국 빠르게 리뉴얼하는 방법뿐이 없었다. 결국 ie와 크롬을 병행해가며 사용하면서 거의 마무리가 되어가는 중이다. 완전히 마무리가 되면 ie에서 호환성 보기를 삭제하고 다시 테스트를 진행해야한다. ie는 절대로 방심할 수 없는 브라우저니까...


삽질하지 말자!


참고로 크롬도 최근들어 문제가 종종 발생한다. 이제 믿고쓰는 크롬의 시대도 끝난 것같다. 바쁠 때 힘들게 처리하느라 시간이 없어 정리하지 못했지만, 이제 크롬도 방심할 수 없다. 기존에 개발해서 테스트 끝난 것이 갑자기 동작을 하지 않으니... 갑갑할 뿐이다.

'Javascript' 카테고리의 다른 글

Naver Maps Javascript API v3를 사용해보자  (0) 2017.01.06
한글 검사 패턴  (0) 2016.01.13
IE 호환성 보기 문제점  (0) 2015.09.02
그래프API - taucharts  (0) 2015.03.19
구글 단축URL을 만들자  (0) 2014.02.28
객체 안의 프로퍼티 접근  (0) 2014.01.20
Trackbacks 0 : Comments 0

Write a comment


그래프API - taucharts

Javascript 2015.03.19 17:53

자바스크립트로 쉽게 그래프를 그려보자.

튜토리얼에서 프로토콜이 빠져있어서 삽질한 것말고는 삽질할게 없을 정도로 간단하다.

코드를 보면

<script src="http://cdn.jsdelivr.net/d3js/latest/d3.min.js" charset="utf-8"></script>

<script src="http://cdn.jsdelivr.net/underscorejs/latest/underscore-min.js" type="text/javascript"></script>

<script src="http://cdn.jsdelivr.net/taucharts/latest/tauCharts.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/taucharts/latest/tauCharts.min.css">


해더에 걸어주자. 그리고 바디에 다음 코드를 넣자.

<div id="line"></div>

<script type="text/javascript">

var datasource = [{

  type:'us', count:20, date:'12-2013'

},{

  type:'us', count:10, date:'01-2014'

},{

  type:'bug', count:15, date:'02-2014'

},{

  type:'bug', count:23, date:'05-2014'

}];


var chart = new tauCharts.Chart({

    data: datasource,

    type: 'line',

    x: 'date',

    y: 'count',

    color: 'type' // there will be two lines with different colors on the chart

});


window.onload = function(){

chart.renderTo('#line');

}

</script>


출처: http://www.taucharts.com/


'Javascript' 카테고리의 다른 글

한글 검사 패턴  (0) 2016.01.13
IE 호환성 보기 문제점  (0) 2015.09.02
그래프API - taucharts  (0) 2015.03.19
구글 단축URL을 만들자  (0) 2014.02.28
객체 안의 프로퍼티 접근  (0) 2014.01.20
javascript Boolean 값  (0) 2014.01.20
Trackbacks 0 : Comments 0

Write a comment