티스토리 뷰

HTML&CSS&Javscript&Jquery

190809 버튼 배경색 자동으로 바꾸기

猫猫 2019. 8. 9. 10:53
반응형
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!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>
    <script>
        $(document).ready(function(){
            //배열로 일단 컬러 지정해주기 대충 지정한다.
            var bkColor=["00","11","dd","66","cc","ff"];
    
            //html부에서 정의한 버튼이 click되었을때 실행할거임.
            $("#start").click(function(){
                //자동으로 컬러릅 바뀌게 하고 싶으니까 setinterval을 줍시다.
                var time = setInterval(function(){
                    //랜덤으로 컬러를 줄거기 때문에 인덱스값을 랜덤으로 지정하여 리턴하는 함수
                    function rtnColor(){
                        // 굳이 변수에 담을 필요는 없지만 어색하니까
                                                              // Math.random()*6은 java때부터 그러하듯이 0~5까지 랜덤하게 생성한다.
                        return cc;
                    }      
                    //인덱스값을 받은걸 조합해서 리턴하는 함수
                    function changeColor(){
                            var r = bkColor[rtnColor()]; // red = 배열[랜덤리턴함수()]
                            var g = bkColor[rtnColor()];// green= 배열[랜덤리턴함수()]
                            var b = bkColor[rtnColor()];// blue =  배열[랜덤리턴함수()]
                            return "#"+r+g+b; //"#" 을 꼭 붙여서 리턴할것, 혹은 밑에서 "#" 꼭 지정해주거나.
                    }
                    $list = $(".color :input"); //길어지는거 싫어서 저장함
                
                    //이제 ㄹㅇ 바꿀때가 되었다.
                    $list.each(function(index){ //index만큼 자동으로 반복하는 함수
                    
                        $list.css("background-color", changeColor()); //css 로 백그라운드 컬러를 변경하는데 rgb를 리턴하는 changeColor()함수를 호출하면 자동으로 색을 얻어온다. 
                    });
            
                },500); //setInterval의 시간 하기 1000=1ms 정신없고 싶으면 점점 1에 가깝게 설정해주면 됨.
                $("#stop").click(function(){ //꼴보기 싫으니까 stop도 만들어주자.
                   clearInterval(time); //setInterval을 만들어서 변수에 담아놨다. 이걸 clear로 풀어주자.
                   $list.each(function(index){
                    
                    $list.eq(index).css("background-color", ""); //backgroundcolor도 기존 상태로 돌려 주기.
                   });
                 });
            });
     
        });
    </script>
</head>
<body>
    <!-- 변경되는 버튼 부 -->
    <div class="color">
        <input id="11" type= button value="11">
        <input id="22" type= button value="22">
         <input id="33" type= button value="33">
        <input id="44" type= button value="44">
       <input id="55" type= button value="55">      
    </div>    
    <!-- 얘네는 start, stop이니까 별도로 빼준다-->
    <input id="start" type= button value="start">
    <input id="stop" type= button value="stop">
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter

 

반응형
저작자표시 비영리 변경금지

'HTML&CSS&Javscript&Jquery' 카테고리의 다른 글

190820 과정평가형 시험 예상문제  (0) 2019.08.20
190809 클래스 있없 체크하기  (0) 2019.08.09
190809 클릭 시 이미지 변화하기  (0) 2019.08.09
190809 each 연습  (0) 2019.08.09
190730 물고기 경주하기  (0) 2019.07.30