이동하는 글자
<script>
function nextRandomInteger(limit) {
return Math.round(Math.random() * limit);
}
var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
function randomAlphabet() {
return alphabet.charAt(nextRandomInteger(25));
}
function randomSpeed(maxSpeed) {
return Math.random() * maxSpeed - Math.random() * maxSpeed;
}
var canvasWidth = 700;
var canvasHeight = 500;
function MovingText() {
function nextRandomInteger(limit) {
return Math.round(Math.random() * limit);
}
var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
function randomAlphabet() {
return alphabet.charAt(nextRandomInteger(25));
}
function randomSpeed(maxSpeed) {
return Math.random() * maxSpeed - Math.random() * maxSpeed;
}
var canvasWidth = 700;
var canvasHeight = 500;
function MovingText() {
this.x = nextRandomInteger(canvasWidth);
this.y = nextRandomInteger(canvasHeight);
this.vX = randomSpeed(10);
this.vY = randomSpeed(10);
this.body = document.createElement('h1');
this.body.innerHTML = randomAlphabet();
this.body.style.position = 'absolute';
MovingText.prototype.move = function () {
}
this.y = nextRandomInteger(canvasHeight);
this.vX = randomSpeed(10);
this.vY = randomSpeed(10);
this.body = document.createElement('h1');
this.body.innerHTML = randomAlphabet();
this.body.style.position = 'absolute';
MovingText.prototype.move = function () {
}
if (this.x < 0 || this.x > canvasWidth) {this.vX *= -1;}
if (this.y < 0 || this.y > canvasHeight) {this.vY *= -1;}
this.x += this.vX;
this.y += this.vY;
this.body.style.left = this.x + 'px';
this.body.style.top = this.y + 'px';
};
window.onload = function () {
if (this.y < 0 || this.y > canvasHeight) {this.vY *= -1;}
this.x += this.vX;
this.y += this.vY;
this.body.style.left = this.x + 'px';
this.body.style.top = this.y + 'px';
};
window.onload = function () {
var movingTexts = [];
for (var i = 0; i < 100; i++) {
movingTexts.push(new MovingText());
}
setInterval(function () {
for (var i in movingTexts) {
movingTexts[i].move();
}
}, 1000 / 60);
};
</script>
for (var i = 0; i < 100; i++) {
movingTexts.push(new MovingText());
}
setInterval(function () {
for (var i in movingTexts) {
movingTexts[i].move();
}
}, 1000 / 60);
};
</script>
오류도 없는데 빈화면으로밖에 나오질않네요...
뭐가문제인가요?
댓글 2개
jay420
13년 전
소스가 약간씩 모자라거나 열고 닫는 부분이 잘못 되어있네요.
소스를 작성하실때 function 의 시작과 끝을 잘 파악하셔야 하고 무조건 따라 작성하시기 보다는 코드의 흐름을 파악하시고 작성하시는것이 좋을 것 같습니다.
완성소스는 아래와 같습니다.
(참고문헌 : 모던 웹을 위한 javascript jQuery 입문 (윤인성 저) )
<!DOCTYPE html>
<html>
<head>
<script>
function nextRandomInteger(limit) {
return Math.round(Math.random() * limit);
}
var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
function randomAlphabet() {
return alphabet.charAt(nextRandomInteger(25));
}
function randomSpeed(maxSpeed) {
return Math.random() * maxSpeed - Math.random() * maxSpeed;
}
</script>
<script>
var canvasWidth = 700;
var canvasHeight = 500;
function MovingText() {
this.x = nextRandomInteger(canvasWidth);
this.y = nextRandomInteger(canvasHeight);
this.vX = randomSpeed(10);
this.vY = randomSpeed(10);
this.body = document.createElement('h1');
this.body.innerHTML = randomAlphabet();
this.body.style.position = 'absolute';
document.body.appendChild(this.body);
}
MovingText.prototype.move = function () {
if (this.x < 0 || this.x > canvasWidth) {this.vX *= -1;}
if (this.y < 0 || this.y > canvasHeight) {this.vY *= -1;}
this.x += this.vX;
this.y += this.vY;
this.body.style.left = this.x + 'px';
this.body.style.top = this.y + 'px';
};
</script>
<script>
window.onload = function () {
var movingTexts = [];
for (var i = 0; i < 100; i++) {
movingTexts.push(new MovingText());
}
setInterval(function () {
for (var i in movingTexts) {
movingTexts[i].move();
}
}, 1000 / 60);
};
</script>
</head>
<body>
</body>
</html>
소스를 작성하실때 function 의 시작과 끝을 잘 파악하셔야 하고 무조건 따라 작성하시기 보다는 코드의 흐름을 파악하시고 작성하시는것이 좋을 것 같습니다.
완성소스는 아래와 같습니다.
(참고문헌 : 모던 웹을 위한 javascript jQuery 입문 (윤인성 저) )
<!DOCTYPE html>
<html>
<head>
<script>
function nextRandomInteger(limit) {
return Math.round(Math.random() * limit);
}
var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
function randomAlphabet() {
return alphabet.charAt(nextRandomInteger(25));
}
function randomSpeed(maxSpeed) {
return Math.random() * maxSpeed - Math.random() * maxSpeed;
}
</script>
<script>
var canvasWidth = 700;
var canvasHeight = 500;
function MovingText() {
this.x = nextRandomInteger(canvasWidth);
this.y = nextRandomInteger(canvasHeight);
this.vX = randomSpeed(10);
this.vY = randomSpeed(10);
this.body = document.createElement('h1');
this.body.innerHTML = randomAlphabet();
this.body.style.position = 'absolute';
document.body.appendChild(this.body);
}
MovingText.prototype.move = function () {
if (this.x < 0 || this.x > canvasWidth) {this.vX *= -1;}
if (this.y < 0 || this.y > canvasHeight) {this.vY *= -1;}
this.x += this.vX;
this.y += this.vY;
this.body.style.left = this.x + 'px';
this.body.style.top = this.y + 'px';
};
</script>
<script>
window.onload = function () {
var movingTexts = [];
for (var i = 0; i < 100; i++) {
movingTexts.push(new MovingText());
}
setInterval(function () {
for (var i in movingTexts) {
movingTexts[i].move();
}
}, 1000 / 60);
};
</script>
</head>
<body>
</body>
</html>
13년 전
감사합니다!
게시글 목록
| 번호 | 제목 |
|---|---|
| 4132 | |
| 17083 |
jQuery
hover 이미지 효과를 쓰고 싶습니다!
1
|
| 17082 |
Linux
[python]버클리 DB 사용 해 보기
|
| 17081 | |
| 17080 | |
| 17079 | |
| 17078 | |
| 17077 |
Linux
csv file 에 대해
|
| 4127 | |
| 17074 | |
| 17073 | |
| 17072 |
Linux
프로그램 실행중 환경변수를 확인하기
|
| 17071 |
Linux
터미널에서 쉽게 로그아웃하기
|
| 17070 |
Linux
arp 명령 이용하여 아이피,맥 셋팅하기
|
| 17069 |
Linux
프로그램 정지 상태 조사(strace 이용)
|
| 17068 |
jQuery
도전해BoA요~ 1탄
|
| 17063 | |
| 17059 |
jQuery
마우스 오버시 나오게 할려면 어떻게하나요?
3
|
| 17057 |
PHP
질문.
1
|
| 4119 | |
| 17053 | |
| 17050 |
Linux
mysql replication 깨졌을때
2
|
| 17049 |
Linux
라이브 시디 받을 수 있는곳
|
| 17048 | |
| 17047 |
Linux
1번 cd 이용하여 grub 복구하기
|
| 17046 | |
| 17045 |
Linux
디렉토리의 사이즈 출력해주는 쉘
|
| 17036 |
JavaScript
3개의 배너를 돌리는 스크립트
8
|
| 17035 |
Linux
경로에서 파일명만 추출하기
|
| 17034 |
Linux
텍스트 계산기
|
| 17033 |
Linux
패치 파일 만들어 보기
|
| 17032 | |
| 17031 |
Linux
절대경로,상대경로 확실히 이해하기
|
| 17030 |
Linux
최신 커널 버전 간단히 확인하기
|
| 17029 |
Linux
심볼릭 링크와 하드 링크
|
| 17028 |
Linux
umask
|
| 17027 |
Linux
iptables 관련
|
| 17026 |
Linux
xferlog 분석
|
| 17025 |
Linux
iperf 로 통신속도 측정하기
|
| 17024 |
Linux
프로세스 빨리 종료하기
|
| 17023 |
Linux
utf8 mrtg 실행되지 않을때
|
| 17022 | |
| 17021 |
Linux
커널 모듈 수정하기
|
| 17019 | |
| 30314 | |
| 17016 | |
| 17014 | |
| 17010 |
JavaScript
제이쿼리 슬라이드 질문입니다!
3
|
| 17009 | |
| 17008 |
Linux
debian 3.1 업데이트가 되지 않을때?
|
| 17007 | |
| 17006 | |
| 17005 |
Linux
php 확장 모듈 설치하기
|
| 17003 | |
| 17000 | |
| 30311 | |
| 16992 | |
| 16990 | |
| 16983 |
MySQL
mysql 기본 명령어들이에요.
6
|
| 16982 | |
| 16976 |
PHP
문자열 자르는 소스입니다.
5
|
| 16971 | |
| 16969 | |
| 16965 |
MySQL
[Q] 테이블 합치는법은 ?
3
|
| 4110 | |
| 16957 |
JavaScript
도와주세요ㅜㅜ
7
|
| 16955 |
PHP
php Snoopy..
1
|
| 16954 | |
| 16948 | |
| 16947 | |
| 16946 |
Linux
history 명령에 대해
|
| 16944 | |
| 16941 |
node.js
웹호스팅과 Node.js 호스팅의 연동이 가능할까요?
2
|
| 16940 |
JavaScript
스크립트로 프린트 출력설정하기
|
| 16939 |
Linux
arp 스푸핑한 서버 어떻게 찾나?
|
| 16938 | |
| 16937 |
Flash
채팅방 스크룰바
|
| 16935 |
Flash
DB연동 로그인
1
|
| 16934 |
Flash
플래시 mp3
|
| 16932 |
JavaScript
“ 플래시보고 만든 글자 타이핑 소스입니다. ”
1
|
| 16931 |
JavaScript
즐겨찾기 모두 지원
|
| 16929 |
JavaScript
홈페이지에 항상있는 오른쪽 퀵
1
|
| 30304 | |
| 16926 |
Linux
ls 했을때 디렉토리 색깔이 어둡다면?
2
|
| 4098 | |
| 30297 | |
| 16923 | |
| 4097 | |
| 30296 | |
| 16921 | |
| 16916 | |
| 16914 | |
| 30288 |
HTML
반응형 레이아웃 와이어프레임
7
|
| 16912 | |
| 16908 |
jQuery
jQuery 시리즈 동영상 강좌 리스트
3
|
| 16907 |
Linux
tcpdump 간단 사용
|
| 16906 | |
| 16905 |
Linux
ssh 접속 지연이 발생할때
|
| 16904 |
Linux
swap 생성
|
| 16903 |
Linux
dmesg 클리어 하고 싶을 때
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기