교체 기기

나는 다음입니다 w3resource JS 문제 중 하나를 해결했다

주기적으로의 끝에서 하나 개의 문자를 제거하여 올바른 방향으로 문자열 'w3resource를'회전 자바 스크립트 프로그램을 작성 끈으로 묶어 앞면에 붙이십시오.

나는 방법으로 다음과 같은 일에 그것을 해결했습니다
HTML :

<div id="target0" style="margin: 50px auto; text-align: center;">w3resource</div> 
<div id="target1" style="margin: 50px auto; text-align: center;">w3resource</div>

JS :

var solution = (function(){ 

    function htmlToArr(targetId) { 
    targetId = document.getElementById(targetId); 
    let targetContents = targetId.innerHTML; 
    let letters = targetContents.split(""); 

    return letters; 
    } 

    function arrFirstToLast(arr) { 
    first = arr.splice(0, 1); 
    arr.splice(arr.length, 0, first[0]); 
    } 

    function arrLastToFirst(arr) { 
    let last = arr.splice(arr.length-1, 1); 
    arr.splice(0, 0, last[0]); 
    } 

    function setHtml(targetId, html) { 
    targetId = document.getElementById(targetId); 
    targetId.innerHTML = html; 
    } 

    function rotateString(targetId, direction = "left") { 
    letters = htmlToArr(targetId); 
    setInterval(function() { 
     if (direction === "left") { 
     arrFirstToLast(letters); 
     } else if (direction === "right") { 
     arrLastToFirst(letters); 
     } 
     let str = letters.join(""); 
     setHtml(targetId, str) 
    }, 1500) 
    } 

    return { 
    rotateString: rotateString 
    } 
})();

내가 한 방향 또는 다른에서 문자열을 회전 할 수있는 옵션을 구현했습니다. 나는 하나 개의 목표 문자열이있을 때 , 그것은 잘 작동 : 나는 두 개의 대상 문자열이있을 때

/*case 0 - one target, works good in both directions*/ 
solution.rotateString("target0", "right");

, 그것은 여전히 작동하지만, 두 번째는 첫 번째로 연기 한 문자입니다 :

/* case 1 - two targets, same direction, works, non-synced letters */ 
solution.rotateString("target0"); 
solution.rotateString("target1");

나는 두 개의 대상 문자열을 가지고 있고 서로 다른 방향을 회전 할 때

, 그냥 첫 번째 대상으로 한 문자 이동 및 정지 : 난 그냥 메신저로 제 경우이 문제를 해결할 수

/* case 2 - two targets, different direction, doesen't work */ 
solution.rotateString("target0", "left"); 
solution.rotateString("target1", "right");

두 방향에 대해 두 가지 다른 함수를 구현합니다. 하지만 이해하고 싶습니다. 왜 실패하고, 내 실수는 무엇입니까? setInterval if-statment 구현. 이 https://codepen.io/t411tocreate/pen/zPqVgg?editors=1010

사람이 그것을 설명 할 수 : 또한

, 나는 방법 경우 1

펜의에서 문자의 움직임을 동기화하는 방법 아무 생각이 없다?

출처

2017-11-05 t411tocreate

변수가 letters입니다.

var letters = htmlToArr(targetId);

letters = htmlToArr(targetId);

로컬 변수되어야

출처

2017-11-05 13:13:23

답변

관련 문제