채택완료

오늘날짜 구하기 자바스크립트 질문드립니다.

2022-09-22 (목) 16:08:11 1,748

안녕하세요.

자바스크림트나 PHP로 오늘 날짜를 구하려 합니다.

오픈소스가 많은데.. 문제는..

각 숫자마다 배경을 다른걸 줘야해서

<spa>2</span>

<span>0</span>

<spa>2</span>

<span>2</span>

<span>년</span>

<spa>0</span>

<span>1</span>

<spa>월</span>

<span>0</span>

<span>2</span>

<span>일</span>

이런식으로 구성이 되어야 하거든요..

혹시 가능한것일지요....

|

답변 3개

채택된 답변
+20 포인트
2022-09-22 (목) 16:32:25
Copy
<?php
$str = date('Y년m월d일');
$cnt = mb_strlen($str, 'UTF-8');

for ($i = 0; $i < $cnt; $i++){
 $char = mb_substr($str, $i, 1, 'UTF-8');
 echo '<span>';
 echo $char;
 echo '</span>';
}
2022-09-22 (목) 17:02:52

배경 이미지를 숫자 크기 만큼 다르게 하면 되지 않을까요?

Copy
<style>
#x > span { background-color: red; color: #fff; }
#x > span:nth-child(1)  { opacity:    1; }
#x > span:nth-child(2)  { opacity:  0.9; }
#x > span:nth-child(3)  { opacity:  0.8; }
#x > span:nth-child(4)  { opacity:  0.7; }
#x > span:nth-child(5)  { opacity:  0.6; }
#x > span:nth-child(6)  { opacity:  0.5; }
#x > span:nth-child(7)  { opacity:  0.4; }
#x > span:nth-child(8)  { opacity:  0.3; }
#x > span:nth-child(9)  { opacity:  0.2; }
#x > span:nth-child(10) { opacity:  0.1; }
#x > span:nth-child(11) { opacity: 0.05; }
</style>

<div id="x"></div>

<script>
    var x = document.getElementById('x');
    var d = new Date().toISOString();
    var arr = d
        .substring(0, d.indexOf('T') + 1)
        .replace('-', '년')
        .replace('-', '월')
        .replace('T', '일')
        .split('');
    var str = arr.join('</span><span>');
    x.innerHTML = '<span>'.concat(str).concat('</span>');
</script>

답변을 작성하려면 로그인이 필요합니다.