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