2026, 새로운 도약을 시작합니다.

디지털시계 : 자바스크립트

[code]

<link href=https://fonts.googleapis.com/css2?family=Lato&display=swap rel=stylesheet>
<style>
#todayTable { border-collapse:collapse; font-family:Lato; font-weight:bold; }
#todayHead { text-align:center; padding:0px; font-size:4rem; }
#todayTail { text-align:center; padding:0px ; font-size:2rem; }
</style>
<script>
document.write("<table id=todayTable><tr><td id=todayHead></td></tr><tr><td id=todayTail></td></tr></table>");
function todayMode() {
    todayTime = new Date();
    todayHead.innerText = String(todayTime).split(" ")[4];
    currentYear = todayTime.getFullYear() + ".";
    currentMonth = ("0" + (todayTime.getMonth() + 1)).slice(-2) + ".";
    currentDay = ("0" + todayTime.getDate()).slice(-2) + ".";
    todayTail.innerText = currentYear + currentMonth + currentDay + String(todayTime).split(" ")[0];
}
todayMode();
setInterval(todayMode, 1000);
</script>

[/code]

|

댓글 20개

좋아요. 감사합니다.
@들레아빠 폰트 중에서 0과 1의 가로간격이 다른 폰트는 시계 자체가 들썩거리니 이 점만 주의하면 될 듯 합니다. 나머지는 본인이 원하는 css로요.
@비타주리 넹! 감사드려요.
@크리스휘 감사합니다.
감사합니다!!~~
@그들보드 감사합니다.
혹시 영어로 표현되는 요일을 한글로 바꿀수 있을까요?
@재아 뭐 대충 아래처럼 하면 되지 않을까요?
[code]
<link href=https://fonts.googleapis.com/css2?family=Lato&display=swap rel=stylesheet>
<style>
#todayTable { border-collapse:collapse; font-family:Lato; font-weight:bold; }
#todayHead { text-align:center; padding:0px; font-size:4rem; }
#todayTail { text-align:center; padding:0px ; font-size:2rem; }
#todayTail span { font-size:1.2rem; }
</style>
<script>
weekKr = "일월화수목금토";
document.write("<table id=todayTable><tr><td id=todayHead></td></tr><tr><td id=todayTail></td></tr></table>");
function todayMode() {
todayTime = new Date();
todayHead.innerText = String(todayTime).split(" ")[4];
currentYear = todayTime.getFullYear() + ".";
currentMonth = ("0" + (todayTime.getMonth() + 1)).slice(-2) + ".";
currentDay = ("0" + todayTime.getDate()).slice(-2) + ".";
currentWeek = weekKr[todayTime.getDay()] + "<span>요일</span>";
todayTail.innerHTML = currentYear + currentMonth + currentDay + currentWeek;
}
todayMode();
setInterval(todayMode, 1000);
</script>
[/code]
요일이라는 글자를 없애고 싶으면
<span>요일</span> 부분을 <span></span> 으로 바꾸면 되고...
@비타주리 와우 감사합니다.^^;
감사합니다! 혹시 월화수목금토일을 따로 크기를 바꾸거나 색을 주고 싶은데 어떻게 조절하는지 알수 있을까요? ㅠㅠ
@라밍
1. css 에서 #todayTail span { font-size:1.2rem; } 를 지우고..
2. currentWeek = weekKr[todayTime.getDay()] + "<span>요일</span>"; 를 아래처럼 고치고
currentWeek = "<span>" + weekKr[todayTime.getDay()] + "<span>요일</span></span>";
3. span 에 스타일을 적용해 주면 됩니다. 예를 들어서
currentWeek = "<span style=color:red>" + weekKr[todayTime.getDay()] + "<span style=font-size:1.2rem;color:blue>요일</span></span>";
@비타주리 와 ㅜㅜ 정말 감사드립니당! 남은시간도 좋은 하루 보내세용!
팁으로 올라오는 위와 같은 내용들은 어느 파일 위치에 적용을 해야하는건가요? 팁 내용은 좋은데 적용 방법을 몰라서 눈으로만 보고있네요 ;;
@sunghoshin 그냥 문서의 아무 곳이나 원하는 부분에 삽입하면 될 터인데요...
@수콩 감사합니다
감사합니다~~
@준후준후 감사합니다

현재 한국시간보다 2시간 늦게로 조정하려면 어디를 수정하면 되는지요?

감사합니다

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

그누보드5 팁자료실

번호 제목 글쓴이 날짜 조회
공지 3년 전 조회 4,598
2741 4일 전 조회 125
2740 5일 전 조회 112
2739 1주 전 조회 212
2738 1주 전 조회 221
2737 1주 전 조회 184
2736 2주 전 조회 283
2735 3주 전 조회 288
2734 3주 전 조회 264
2733 1개월 전 조회 267
2732 1개월 전 조회 302
2731 1개월 전 조회 270
2730 1개월 전 조회 227
2729 1개월 전 조회 359
2728 1개월 전 조회 246
2727 1개월 전 조회 422
2726 1개월 전 조회 259
2725 1개월 전 조회 332
2724 1개월 전 조회 363
2723 1개월 전 조회 267
2722 1개월 전 조회 300
2721 1개월 전 조회 214
2720 2개월 전 조회 304
2719 2개월 전 조회 308
2718 2개월 전 조회 202
2717 2개월 전 조회 337
2716 2개월 전 조회 203
2715 2개월 전 조회 313
2714 2개월 전 조회 273
2713 2개월 전 조회 377
2712 2개월 전 조회 290
🐛 버그신고