<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년 전
감사합니다!
게시판 목록
팁게시판
디자인과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.
질문은 상단의 QA에서 해주시기 바랍니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 4252 | 13년 전 | 2025 | ||
| 4251 |
kajama78
|
13년 전 | 945 | |
| 4250 | 13년 전 | 982 | ||
| 4249 | 13년 전 | 654 | ||
| 4248 | 13년 전 | 2022 | ||
| 4247 | 13년 전 | 628 | ||
| 4246 |
 캐네스제롬 |
13년 전 | 789 | |
| 4245 | 13년 전 | 1115 | ||
| 4244 |
techer
|
13년 전 | 1271 | |
| 4243 |
techer
|
13년 전 | 2868 | |
| 4242 |
techer
|
13년 전 | 3057 | |
| 4241 | 13년 전 | 597 | ||
| 4240 | 13년 전 | 1099 | ||
| 4239 |
StyleRoot
|
13년 전 | 584 | |
| 4238 | 13년 전 | 1154 | ||
| 4237 |
onlymilk74
|
13년 전 | 938 | |
| 4236 |
하나데이타
|
13년 전 | 830 | |
| 4235 |
하나데이타
|
13년 전 | 1150 | |
| 4234 | 13년 전 | 412 | ||
| 4233 | 13년 전 | 1805 | ||
| 4232 | 13년 전 | 1548 | ||
| 4231 | 13년 전 | 1270 | ||
| 4230 | 13년 전 | 711 | ||
| 4229 | 13년 전 | 1191 | ||
| 4228 |
성민꼬르꼬
|
13년 전 | 1401 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기