setInterval () 메소드는 함수를 호출하거나 지정된 간격 (밀리 초)으로 표현식을 평가합니다.
setInterval () 메소드는 clearInterval () 이 호출되거나 창이 닫힐 때까지 함수 호출을 계속합니다 .
setInterval ()에 의해 리턴 된 ID 값은 clearInterval () 메소드의 매개 변수로 사용됩니다.
팁 : 1000ms = 1 초
팁 : 지정된 밀리 초 후에 함수를 한 번만 실행하려면 setTimeout () 메소드를 사용하십시오 .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="/reset.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<style>
* {
box-sizing: border-box
}
.container {
width: 100%;
background-color: #ddd;
}
.wrap{width: 1000px; margin:auto;}
.skills {
text-align: right;
padding-top: 10px;
padding-bottom: 10px;
color: white;
}
.html {
width: 10%;
background-color: #4CAF50;
}
.css {
width: 10%;
background-color: #2196F3;
}
.js {
width: 10%;
background-color: #f44336;
}
.php {
width: 10%;
background-color: #808080;
}
</style>
<body>
<div class="wrap">
<h1>My Skills</h1>
<p>HTML</p>
<div class="container">
<div class="skills html">90%</div>
</div>
<p>CSS</p>
<div class="container">
<div class="skills css">65%</div>
</div>
<p>JavaScript</p>
<div class="container">
<div class="skills js">80%</div>
</div>
<p>PHP</p>
<div class="container">
<div class="skills php">60%</div>
</div>
</div>
</body>
</html><script>
$(function(){
$('.container').each(function(i){
var skill = $(this).find('.skills');//this=.container 안에 있는 .skill의 값을 읽어서 skill이라는 값에 넣어라
var percent = parseInt(skill.text()); //skill에 들어있는 값을 percent라는 변수에 넣어라
console.log(i,percent);
var num = 10; //10퍼센트부터 올라갈 예정이기 때문에 10으로 설정함
skill.delay(i*700).animate({'width':percent+'%'},function(){//skill을 애니메이트하겠다. percent에 들어있는 값만큼
var auto = setInterval(function(){
num++
if(num>percent){
clearInterval(auto)
}else(
skill.text(num+'%')
)
},10);
});
});
});
</script>왜 갑자기 i가 들어갔는지?
i는 1이라는 뜻인가?
skill.delay부터 해석이 안된다.....
'얼렁뚱땅코드 > jquery' 카테고리의 다른 글
| addClass, removeClass / setInterval / setTimeout이란? (0) | 2019.10.11 |
|---|---|
| 청기올려백기올려 setTimeout (0) | 2019.10.11 |
| 움직이는 막대바 만들기(progress bar) ex.1 (0) | 2019.10.11 |
| 스크롤 이벤트와 마우스휠이벤트로 풀페이지 만들기 (0) | 2019.10.10 |
| mCustomScrollbar 예쁜 스크롤바 스크립트로 사용하기 (0) | 2019.10.10 |