지금 이 코드를 간결하게 바꿀 수 있을까요? 채택완료
광깔
5년 전
조회 3,025
자바스크립트를 공부하면서 적용하고 있는데요..
저한테는 이게 최선인 거 같아서요..
</p>
<p><ul id="txt-box"></p>
<p> <li></p>
<p> <span id="ani-1">상상만 했던 일이 현실이 됩니다.</span></p>
<p> </li></p>
<p> <li></p>
<p> <span id="ani-2">당신의 삶을 변화시킬 5G</span></p>
<p> </li></p>
<p> <li></p>
<p> <span id="ani-3">줄어든 로딩만큼 상상을 초월하는 놀라운 속도</span></p>
<p> </li></p>
<p> <li></p>
<p> <span id="ani-4">언제 어디서나 당신의 실시간 게임 플레이</span></p>
<p> </li></p>
<p> <li></p>
<p> <span id="ani-5">5G 기술로 달라진 삶의 속도를 체크</span></p>
<p> </li></p>
<p> <li></p>
<p> <span id="ani-6">일상이 스마트해지는 에코시스템</span></p>
<p> </li></p>
<p></ul></p>
<p> </p>
<p><script></p>
<p> window.onload = function () {</p>
<p> var anitxt1 = document.getElementById('ani-1');</p>
<p> var anitxt2 = document.getElementById('ani-2');</p>
<p> var anitxt3 = document.getElementById('ani-3');</p>
<p> var anitxt4 = document.getElementById('ani-4');</p>
<p> var anitxt5 = document.getElementById('ani-5');</p>
<p> var anitxt6 = document.getElementById('ani-6');</p>
<p> window.setTimeout(function () {</p>
<p> anitxt1.classList.add('on');</p>
<p> }, 100);</p>
<p> window.setTimeout(function () {</p>
<p> anitxt2.classList.add('on');</p>
<p> }, 200);</p>
<p> window.setTimeout(function () {</p>
<p> anitxt3.classList.add('on');</p>
<p> }, 300);</p>
<p> window.setTimeout(function () {</p>
<p> anitxt4.classList.add('on');</p>
<p> }, 400);</p>
<p> window.setTimeout(function () {</p>
<p> anitxt5.classList.add('on');</p>
<p> }, 500);</p>
<p> window.setTimeout(function () {</p>
<p> anitxt6.classList.add('on');</p>
<p> }, 600);</p>
<p> }</p>
<p></script></p>
<p>
#txt-box span 태그에 on 클래스 추가해주는 것인데, 0.1초 간격으로 추가해주는 것입니다.
뭔가 덕지덕지 붙여놓은 것 같아서 .. 이 소스를 간결하게 바꿀 수 있을까요?
부탁드립니다.
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
5년 전
</p>
<p><script>
window.onload = function () {
<?php for ($i=1; $i < 7; $i++) { ?>
var anitxt<?php echo $i; ?> = document.getElementById('ani-<?php echo $i; ?>');
window.setTimeout(function () { anitxt<?php echo $i; ?>.classList.add('on'); }, <?php echo $i * 100; ?>);
<?php } ?>
}
</script>28라인을 8라인으로 줄여봤습니다. ^.^
자바스크립트로 만드셔도 되겠지만 이해하시기 싶게 PHP로 만들어봤습니다.
동일한 방법으로 자바스크립트 만드셔도 같은 효과를 보실수 있을 겁니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
�
광깔
5년 전
정말 간결해졌네요!! 참고하여 적용해보겠습니다 감사합니다
�
카알주
5년 전
@광깔
위쪽 HTML 태그도 같은 방법으로 줄이시면 전체 페이지의 소스가 간결해지실겁니다.
오늘도 즐거운 하루보내세요~!!!
위쪽 HTML 태그도 같은 방법으로 줄이시면 전체 페이지의 소스가 간결해지실겁니다.
오늘도 즐거운 하루보내세요~!!!
댓글을 작성하려면 로그인이 필요합니다.
플라이
Expert
5년 전
@카알주님은 자바스크립트 부분을 덧붙여서 하자면 배열로 처리하셔서 하셔도 될듯합니다.
$i 값을 배열에 넣어서요
</p>
<p><?php</p>
<p>$array[1] = "<font face="Courier New">상상만 했던 일이 현실이 됩니다</font>";</p>
<p>$array[2] = "<font face="Courier New">당신의 삶을 변화시킬 5G</font>";</p>
<p>$array[3] = "<font face="Courier New">줄어든 로딩만큼 상상을 초월하는 놀라운 속도</font>";</p>
<p>?></p>
<p><ul id="txt-box"></p>
<p><?php</p>
<p><font face="Courier New"> for</font> <code class="php plain">(</code><code class="php variable">$i</code><code class="php plain">=1; </code><code class="php variable">$i</code> <code class="php plain">< count($array); </code><code class="php variable">$i</code><code class="php plain">++) {</code></p>
<p><code class="php plain">?></code>
<li>
<span id="ani-<?php echo $i ?>"><?php echo $array[$i] ?></span>
</li>
<?php } ?>
</ul></p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인