22.01.25 JavaScript

예제 코드

https://github.com/taemin-kwon93/what_did_you_learn_today/tree/main/JavaScript

GitHub - taemin-kwon93/what_did_you_learn_today: 오늘 공부한 내용

---

1 HTML 뼈대를 만들고

2 CSS로 색을 더해주고

3 JavaScript, jQuery로 동적인 코드들을 작성해 준다.

---

이미지 흔들기

ex05.html예제.

순서에 맞춰 코드들을 작성해주고

script 안에 아래와 같이 코드를 작성해준다.

 

    <script>
        function hello() {
            //아래 코드는 좌표값과 배경이미지의 크기를 난수로 대입하기 
            //위해서 값을 얻고 있다.
            var rnd1 = Math.floor(Math.random() * 20);
            var rnd2 = Math.floor(Math.random() * 40);
            var rnd3 = Math.floor(Math.random() * 3) + 100;
            //글자 흔들기
            $(".hello").css({
                "bottom" : rnd1, "left" : rnd2
            });
            //배경 확대
            $(".hello .text").css({"background-size" : rnd3 + "%"});
        }
        //0.01초마다 hello()함수가 호출된다.
        setInterval(hello, 10);
    </script>

setInterval을 통해 hello 함수가 0.01초마다 호출된다.
random()으로 받아온 값은 각 rndN에 저장된다.

0.01초마다 저장될 위치의 값이 달라진다. 따라서 이미지는 흔들리는것 처럼 보이게 된다.