디지털시계 : 자바스크립트 > 그누보드5 팁자료실

그누보드5 팁자료실

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

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

본문


<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>
추천
7

댓글 19개

폰트 중에서 0과 1의 가로간격이 다른 폰트는 시계 자체가 들썩거리니 이 점만 주의하면 될 듯 합니다. 나머지는 본인이 원하는 css로요.
뭐 대충 아래처럼 하면 되지 않을까요?

<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>

요일이라는 글자를 없애고 싶으면
<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>";
팁으로 올라오는 위와 같은 내용들은 어느 파일 위치에 적용을 해야하는건가요? 팁 내용은 좋은데 적용 방법을 몰라서 눈으로만 보고있네요 ;;
전체 2,427 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT