1. дома
  2. Вопрос и ответ
  3. Как установить петлю в javascript

Как установить петлю в javascript

2017-02-10 5 views
1

Я хочу установить цикл в этом коде. Как я могу это сделать?Как установить петлю в javascript

Это плагин, и я хочу, чтобы этот плагин показывал эффект непрерывно. Для этого я должен использовать какой-то цикл. Но я не знаю, как это сделать.

var steps = $(".step"); 
 
console.dir(steps); 
 

 
setTimeout(function() { 
 
    steps.each(function(index) { 
 
     var _t = $(this); 
 
     setTimeout(function() { 
 
      _t.addClass('done'); 
 
     }, 1250 * index * 1.5); 
 
    }); 
 
}, 500);
body { 
 
    font-family: 'Roboto Condensed'; 
 
    height: 700px; 
 
    width: 100vw; 
 
    padding: 0; 
 
    background-image: -webkit-radial-gradient(#051b23, #04141a); 
 
    background-image: radial-gradient(#051b23, #04141a); 
 
} 
 
h1 { 
 
    color: #fcb034; 
 
    text-align: center; 
 
    font-size: 7vw; 
 
    margin-top: 10vh; 
 
    letter-spacing: 3px; 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 
.icon { 
 
    display: inline-block; 
 
    width: 1.5em; 
 
    height: 1.5em; 
 
    fill: none; 
 
} 
 
.hidden { 
 
    display: none; 
 
} 
 
.progress { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    margin: 80% 0 0 10%; 
 
} 
 
.step { 
 
    -webkit-box-flex: 1; 
 
    -ms-flex-positive: 1; 
 
    flex-grow: 1; 
 
    position: relative; 
 
} 
 
.step-progress { 
 
    width: 100%; 
 
    height: 0.25em; 
 
    background: #fcb034; 
 
} 
 
.icon-wrapper { 
 
    text-align: center; 
 
    display: inline-block; 
 
} 
 
.step.done .step-progress:after { 
 
    position: absolute; 
 
    content: ''; 
 
    height: 0.25em; 
 
    width: 0; 
 
    background-color: #0087B3; 
 
    -webkit-animation: growLine 1s linear forwards; 
 
    animation: growLine 1s linear forwards; 
 
} 
 
.icon-checkmark { 
 
    position: absolute; 
 
    top: -0.55em; 
 
    left: -0.125em; 
 
    border: 0.125em solid #fcb034; 
 
    background: #051B23; 
 
    width: 1em; 
 
    height: 1em; 
 
    border-radius: 50%; 
 
    padding: 0.125em; 
 
    border-radius: 50%; 
 
    -webkit-transition: all 0.25s linear; 
 
    transition: all 0.25s linear; 
 
} 
 
.step.done .icon-checkmark { 
 
    background: #0087B3; 
 
    border-color: #0087B3; 
 
} 
 
.icon-checkmark .path1 { 
 
    stroke: #aaa; 
 
    stroke-width: 4; 
 
    stroke-linecap: square; 
 
    stroke-dasharray: 1000; 
 
    stroke-dashoffset: 1000; 
 
    fill: empty; 
 
} 
 
.step.done .icon-checkmark .path1 { 
 
    -webkit-animation: dash 5s linear forwards; 
 
    animation: dash 5s linear forwards; 
 
    stroke: #fcb034; 
 
} 
 
.step-text { 
 
    position: relative; 
 
    margin-left: -50%; 
 
    letter-spacing: 1px; 
 
    font-weight: bold; 
 
    color: #aaa; 
 
    margin-top: 0; 
 
    opacity: 0; 
 
} 
 
.step.done .step-text { 
 
    color: #0087B3; 
 
    -webkit-animation: dropText 0.5s linear forwards; 
 
    animation: dropText 0.5s linear forwards; 
 
} 
 
@-webkit-keyframes dash { 
 
    to { 
 
     stroke-dashoffset: 0; 
 
    } 
 
} 
 
@keyframes dash { 
 
    to { 
 
     stroke-dashoffset: 0; 
 
    } 
 
} 
 
@-webkit-keyframes growLine { 
 
    to { 
 
     width: 100%; 
 
    } 
 
} 
 
@keyframes growLine { 
 
    to { 
 
     width: 100%; 
 
    } 
 
} 
 
@-webkit-keyframes dropText { 
 
    to { 
 
     padding-top: 1em; 
 
     opacity: 1; 
 
    } 
 
} 
 
@keyframes dropText { 
 
    to { 
 
     padding-top: 1em; 
 
     opacity: 1; 
 
    } 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Step Progress Bar</title> 
 

 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
 

 
    <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'> 
 

 
    <link rel="stylesheet" href="css/style.css"> 
 

 

 
</head> 
 

 
<body> 
 
    <h1>PROGRESS BAR</h1> 
 

 
    <div class="progress"> 
 
     <div class="step"> 
 
      <div class="step-progress"></div> 
 
      <div class="icon-wrapper"> 
 
       <svg class="icon icon-checkmark" viewBox="0 0 32 32"> 
 
        <path class="path1" d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path> 
 
       </svg> 
 
       <div class="step-text">ENROLLED</div> 
 
      </div> 
 
     </div> 
 
     <div class="step"> 
 
      <div class="step-progress"></div> 
 
      <div class="icon-wrapper"> 
 
       <svg class="icon icon-checkmark" viewBox="0 0 32 32"> 
 
        <path class="path1" d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path> 
 
       </svg> 
 
       <div class="step-text">APPLIED</div> 
 
      </div> 
 
     </div> 
 
     <div class="step"> 
 
      <div class="step-progress"></div> 
 
      <div class="icon-wrapper"> 
 
       <svg class="icon icon-checkmark" viewBox="0 0 32 32"> 
 
        <path class="path1" d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path> 
 
       </svg> 
 
       <div class="step-text">CONFIRMED</div> 
 
      </div> 
 
     </div> 
 
     <div class="step"> 
 
      <div class="icon-wrapper"> 
 
       <svg class="icon icon-checkmark" viewBox="0 0 32 32"> 
 
        <path class="path1" d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path> 
 
       </svg> 
 
       <div class="step-text">DONE!</div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> 
 

 
    <script src="js/index.js"></script> 
 

 
</body> 
 

 
</html>

источник

2017-02-10 Mehedi Hasan

+0

Пожалуйста, помогите мне guyes ... –

ответ

1

Правки к вашему JavaScript ниже позволяют анимацию цикла на неопределенное время.

В итоге:

  • Я сломал свой JavaScript в две отдельные функции - animate и reset
  • В пределах animate мы проверяем, когда мы итерацию над окончательным step элемента и называем reset когда это происходит
  • В пределах reset мы удаляем класс done от каждого элемента, а затем снова вызываем функцию animate

var steps = $(".step"); 
 
// Find out the number of '.step' items in DOM and 
 
// decrement count by 1 so that we can count from 0. 
 
var stepsCount = steps.length - 1; 
 
//console.dir(steps); 
 

 
function animate() { 
 
    setTimeout(function() { 
 
    steps.each(function(index) { 
 
     var _t = $(this); 
 
     setTimeout(function() { 
 
     _t.addClass('done'); 
 

 
     if (index === stepsCount) { 
 
      setTimeout(function() { 
 
      // If we've reached the final item call the reset function after a 2 sec delay, 
 
      // so that the user can see the animation in its end state before we restart. 
 
      reset(); 
 
      }, 2000); 
 
     } 
 
     }, 1250*index*1.5); 
 
    }); 
 
    }, 500); 
 
} 
 

 
function reset() { 
 
    // Iterate over DOM and remove `.done` 
 
    steps.each(function(index) { 
 
    var _t = $(this); 
 
    _t.removeClass('done'); 
 
    }); 
 
    
 
    // Start the animation again 
 
    animate(); 
 
} 
 

 
animate(); // Initial call to animate
body { 
 
    font-family: 'Roboto Condensed'; 
 
    height:700px; 
 
    width: 100vw; 
 
    padding: 0; 
 
    background-image: -webkit-radial-gradient(#051b23, #04141a); 
 
    background-image: radial-gradient(#051b23, #04141a); 
 
} 
 

 
h1 { 
 
    color: #fcb034; 
 
    text-align: center; 
 
    font-size: 7vw; 
 
    margin-top: 10vh; 
 
    letter-spacing: 3px; 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 

 
.icon { 
 
    display: inline-block; 
 
    width: 1.5em; 
 
    height: 1.5em; 
 
    fill: none; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
} 
 

 
.progress { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
      transform: translate(-50%, -50%); 
 
    margin: 80% 0 0 10%; 
 
} 
 

 
.step { 
 
    -webkit-box-flex: 1; 
 
     -ms-flex-positive: 1; 
 
      flex-grow: 1; 
 
    position: relative; 
 
} 
 

 
.step-progress { 
 
    width: 100%; 
 
    height: 0.25em; 
 
    background: #fcb034; 
 
} 
 

 
.icon-wrapper { 
 
    text-align: center; 
 
    display: inline-block; 
 
} 
 

 
.step.done .step-progress:after { 
 
    position: absolute; 
 
    content: ''; 
 
    height: 0.25em; 
 
    width: 0; 
 
    background-color: #0087B3; 
 
    -webkit-animation: growLine 1s linear forwards; 
 
      animation: growLine 1s linear forwards; 
 
} 
 

 
.icon-checkmark { 
 
    position: absolute; 
 
    top: -0.55em; 
 
    left: -0.125em; 
 
    border: 0.125em solid #fcb034; 
 
    background: #051B23; 
 
    width: 1em; 
 
    height: 1em; 
 
    border-radius: 50%; 
 
    padding: 0.125em; 
 
    border-radius: 50%; 
 
    -webkit-transition: all 0.25s linear; 
 
    transition: all 0.25s linear; 
 
} 
 

 
.step.done .icon-checkmark { 
 
    background: #0087B3; 
 
    border-color: #0087B3; 
 
} 
 

 
.icon-checkmark .path1 { 
 
    stroke: #aaa; 
 
    stroke-width: 4; 
 
    stroke-linecap: square; 
 
    stroke-dasharray: 1000; 
 
    stroke-dashoffset: 1000; 
 
    fill: empty; 
 
} 
 

 
.step.done .icon-checkmark .path1 { 
 
    -webkit-animation: dash 5s linear forwards; 
 
      animation: dash 5s linear forwards; 
 
    stroke: #fcb034; 
 
} 
 

 
.step-text { 
 
    position: relative; 
 
    margin-left: -50%; 
 
    letter-spacing: 1px; 
 
    font-weight: bold; 
 
    color: #aaa; 
 
    margin-top: 0; 
 
    opacity: 0; 
 
} 
 

 
.step.done .step-text { 
 
    color: #0087B3; 
 
    -webkit-animation: dropText 0.5s linear forwards; 
 
      animation: dropText 0.5s linear forwards; 
 
} 
 

 
@-webkit-keyframes dash { 
 
    to { 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 

 
@keyframes dash { 
 
    to { 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 
@-webkit-keyframes growLine { 
 
    to { 
 
    width: 100%; 
 
    } 
 
} 
 
@keyframes growLine { 
 
    to { 
 
    width: 100%; 
 
    } 
 
} 
 
@-webkit-keyframes dropText { 
 
    to { 
 
    padding-top: 1em; 
 
    opacity: 1; 
 
    } 
 
} 
 
@keyframes dropText { 
 
    to { 
 
    padding-top: 1em; 
 
    opacity: 1; 
 
    } 
 
}
<!DOCTYPE html> 
 
<html > 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Step Progress Bar</title> 
 
    
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
 

 
    <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'> 
 

 
     <link rel="stylesheet" href="css/style.css"> 
 

 
    
 
</head> 
 

 
<body> 
 
    <h1>PROGRESS BAR</h1> 
 

 
<div class="progress"> 
 
    <div class="step"> 
 
    <div class="step-progress"></div> 
 
    <div class="icon-wrapper"> 
 
     <svg class="icon icon-checkmark" viewBox="0 0 32 32"><path class="path1" d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path> </svg> 
 
     <div class="step-text">ENROLLED</div> 
 
    </div> 
 
    </div> 
 
    <div class="step"> 
 
    <div class="step-progress"></div> 
 
    <div class="icon-wrapper"> 
 
     <svg class="icon icon-checkmark" viewBox="0 0 32 32"><path class="path1" d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path> </svg> 
 
     <div class="step-text">APPLIED</div> 
 
    </div> 
 
    </div> 
 
    <div class="step"> 
 
    <div class="step-progress"></div> 
 
    <div class="icon-wrapper"> 
 
     <svg class="icon icon-checkmark" viewBox="0 0 32 32"><path class="path1" d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path> </svg> 
 
     <div class="step-text">CONFIRMED</div> 
 
    </div> 
 
    </div> 
 
    <div class="step"> 
 
    <div class="icon-wrapper"> 
 
     <svg class="icon icon-checkmark" viewBox="0 0 32 32"><path class="path1" d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path> </svg> 
 
     <div class="step-text">DONE!</div>  
 
    </div> 
 
    </div> 
 
</div> 
 
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> 
 

 
    <script src="js/index.js"></script> 
 

 
</body> 
 
</html>

источник

2017-02-11 17:52:08 almcd

+0

Это круто . Спасибо за вашу помощь, сэр, я очень признателен. Вы помогли мне узнать это. Большое спасибо. –

1

Вы можете использовать рекурсивную функцию для того, чтобы после каждого тайм-аута он называет себя к следующему шагу.

NB: для сниппета на работу мне пришлось изменить левый край в progress CSS 10 вместо оригинального 80:

// an immediately invoked function: 
 
(function progress(steps) { 
 
    setTimeout(function() { 
 
     if (!steps.length) { 
 
      // start again: 
 
      steps = $(".step").removeClass('done'); 
 
     } else { 
 
      // animate the current step, and remove it from the list 
 
      steps.eq(0).addClass('done'); 
 
      steps = steps.slice(1); 
 
     } 
 
     progress(steps); // recursive call for the remaining steps 
 
    }, 1250); 
 
})($(".step")); // pass it all the step elements
body { 
 
    font-family: 'Roboto Condensed'; 
 
    height: 700px; 
 
    width: 100vw; 
 
    padding: 0; 
 
    background-image: -webkit-radial-gradient(#051b23, #04141a); 
 
    background-image: radial-gradient(#051b23, #04141a); 
 
} 
 
h1 { 
 
    color: #fcb034; 
 
    text-align: center; 
 
    font-size: 7vw; 
 
    margin-top: 10vh; 
 
    letter-spacing: 3px; 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 
.icon { 
 
    display: inline-block; 
 
    width: 1.5em; 
 
    height: 1.5em; 
 
    fill: none; 
 
} 
 
.hidden { 
 
    display: none; 
 
} 
 
.progress { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    margin: 10% 0 0 10%; 
 
} 
 
.step { 
 
    -webkit-box-flex: 1; 
 
    -ms-flex-positive: 1; 
 
    flex-grow: 1; 
 
    position: relative; 
 
} 
 
.step-progress { 
 
    width: 100%; 
 
    height: 0.25em; 
 
    background: #fcb034; 
 
} 
 
.icon-wrapper { 
 
    text-align: center; 
 
    display: inline-block; 
 
} 
 
.step.done .step-progress:after { 
 
    position: absolute; 
 
    content: ''; 
 
    height: 0.25em; 
 
    width: 0; 
 
    background-color: #0087B3; 
 
    -webkit-animation: growLine 1s linear forwards; 
 
    animation: growLine 1s linear forwards; 
 
} 
 
.icon-checkmark { 
 
    position: absolute; 
 
    top: -0.55em; 
 
    left: -0.125em; 
 
    border: 0.125em solid #fcb034; 
 
    background: #051B23; 
 
    width: 1em; 
 
    height: 1em; 
 
    border-radius: 50%; 
 
    padding: 0.125em; 
 
    border-radius: 50%; 
 
    -webkit-transition: all 0.25s linear; 
 
    transition: all 0.25s linear; 
 
} 
 
.step.done .icon-checkmark { 
 
    background: #0087B3; 
 
    border-color: #0087B3; 
 
} 
 
.icon-checkmark .path1 { 
 
    stroke: #aaa; 
 
    stroke-width: 4; 
 
    stroke-linecap: square; 
 
    stroke-dasharray: 1000; 
 
    stroke-dashoffset: 1000; 
 
    fill: empty; 
 
} 
 
.step.done .icon-checkmark .path1 { 
 
    -webkit-animation: dash 5s linear forwards; 
 
    animation: dash 5s linear forwards; 
 
    stroke: #fcb034; 
 
} 
 
.step-text { 
 
    position: relative; 
 
    margin-left: -50%; 
 
    letter-spacing: 1px; 
 
    font-weight: bold; 
 
    color: #aaa; 
 
    margin-top: 0; 
 
    opacity: 0; 
 
} 
 
.step.done .step-text { 
 
    color: #0087B3; 
 
    -webkit-animation: dropText 0.5s linear forwards; 
 
    animation: dropText 0.5s linear forwards; 
 
} 
 
@-webkit-keyframes dash { 
 
    to { 
 
     stroke-dashoffset: 0; 
 
    } 
 
} 
 
@keyframes dash { 
 
    to { 
 
     stroke-dashoffset: 0; 
 
    } 
 
} 
 
@-webkit-keyframes growLine { 
 
    to { 
 
     width: 100%; 
 
    } 
 
} 
 
@keyframes growLine { 
 
    to { 
 
     width: 100%; 
 
    } 
 
} 
 
@-webkit-keyframes dropText { 
 
    to { 
 
     padding-top: 1em; 
 
     opacity: 1; 
 
    } 
 
} 
 
@keyframes dropText { 
 
    to { 
 
     padding-top: 1em; 
 
     opacity: 1; 
 
    } 
 
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
 
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'> 
 
<link rel="stylesheet" href="css/style.css"> 
 
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> 
 
<h1>PROGRESS BAR</h1> 
 
<div class="progress"> 
 
    <div class="step"> 
 
     <div class="step-progress"></div> 
 
     <div class="icon-wrapper"> 
 
      <svg class="icon icon-checkmark" viewBox="0 0 32 32"> 
 
       <path class="path1" d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path> 
 
      </svg> 
 
      <div class="step-text">ENROLLED</div> 
 
     </div> 
 
    </div> 
 
    <div class="step"> 
 
     <div class="step-progress"></div> 
 
     <div class="icon-wrapper"> 
 
      <svg class="icon icon-checkmark" viewBox="0 0 32 32"> 
 
       <path class="path1" d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path> 
 
      </svg> 
 
      <div class="step-text">APPLIED</div> 
 
     </div> 
 
    </div> 
 
    <div class="step"> 
 
     <div class="step-progress"></div> 
 
     <div class="icon-wrapper"> 
 
      <svg class="icon icon-checkmark" viewBox="0 0 32 32"> 
 
       <path class="path1" d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path> 
 
      </svg> 
 
      <div class="step-text">CONFIRMED</div> 
 
     </div> 
 
    </div> 
 
    <div class="step"> 
 
     <div class="icon-wrapper"> 
 
      <svg class="icon icon-checkmark" viewBox="0 0 32 32"> 
 
       <path class="path1" d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path> 
 
      </svg> 
 
      <div class="step-text">DONE!</div> 
 
     </div> 
 
    </div> 
 
</div>

источник

2017-02-12 10:27:26 trincot

+0

Спасибо, сэр, у меня есть то, что я хотел. Я ценю вашу помощь. –

+0

Не забудьте [отметить ответ как принято] (http://stackoverflow.com/help/someone-answers). – trincot

+0

NB: Я добавил бесконечное повторение, которое я забыл в вашем вопросе. Требуется только один 'setTimeout'. – trincot

 Смежные вопросы

  • Нет связанных вопросов^_^