이전
목록
다음
탈

이동하는 글자

캐네스제롬
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2012-04-18 (수) 18:14:13 · 3121 · 2
<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() {
  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 () {
  }
    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 () {
  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>
 
오류도 없는데 빈화면으로밖에 나오질않네요...
뭐가문제인가요?
#개발자팁 #개발자 #팁자료실 #javascript
글쓰기

댓글 2개

jay420
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2012-06-07 (목) 10:11:12
소스가 약간씩 모자라거나 열고 닫는 부분이 잘못 되어있네요.
소스를 작성하실때 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>
마시쩡
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2012-06-14 (목) 17:57:11
감사합니다!
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
12-08-29 조회 4,199
12-08-07 조회 3,864
12-08-03 조회 3,670
12-07-31 조회 3,769
12-07-30 조회 3,719
12-07-16 조회 3,922
12-07-15 조회 3,757
12-07-07 조회 3,614
12-07-06 조회 3,816
12-07-03 조회 3,772
12-06-29 조회 3,403
12-06-22 조회 3,768
12-06-17 조회 4,031
12-05-21 조회 3,948
12-05-02 조회 3,468
12-05-02 조회 4,258
12-05-02 조회 3,381
12-04-30 조회 3,582
12-04-30 조회 3,261
12-03-17 조회 4,136
12-03-10 조회 3,459
12-03-08 조회 3,993
12-03-03 조회 3,698
12-02-27 조회 5,116
12-02-17 조회 4,414
12-02-16 조회 4,690
12-02-03 조회 3,350
12-01-31 조회 3,259
12-01-24 조회 3,259
12-01-17 조회 3,963
12-01-05 조회 3,511
11-12-30 조회 3,241
11-12-23 조회 4,793
11-12-08 조회 3,570
11-12-07 조회 4,523
11-11-27 조회 3,957
11-11-25 조회 4,282
11-11-23 조회 3,721
11-11-22 조회 3,579
11-11-09 조회 3,286
11-10-23 조회 3,228
11-10-19 조회 3,191
11-10-08 조회 2,869
11-10-04 조회 2,868
11-10-04 조회 5,328
11-09-01 조회 4,403
11-08-13 조회 2,579
11-08-06 조회 3,262
11-07-11 조회 3,655
11-06-27 조회 3,013
11-06-21 조회 2,680
11-06-13 조회 2,483
11-06-07 조회 2,495
11-05-26 조회 2,450
11-04-20 조회 2,784
11-03-21 조회 2,878
11-03-18 조회 2,574
11-03-11 조회 2,589
11-02-07 조회 2,425
11-01-18 조회 2,746
11-01-12 조회 2,465
11-01-06 조회 2,554
10-12-10 조회 2,815
10-12-09 조회 2,665
10-12-08 조회 5,094
10-11-29 조회 2,929
10-11-28 조회 2,835
10-11-28 조회 2,665
10-11-19 조회 2,864
10-11-04 조회 2,739
10-10-21 조회 2,462
10-10-19 조회 3,425
10-10-12 조회 2,744
10-10-07 조회 2,583
10-09-30 조회 3,538
10-09-17 조회 3,954
10-09-17 조회 3,891
10-05-31 조회 3,608
09-12-31 조회 3,743
09-07-23 조회 5,062
08-09-16 조회 3,263
08-09-06 조회 3,009
08-09-04 조회 3,432
08-08-16 조회 4,459
08-08-15 조회 3,328
08-08-14 조회 4,544
08-08-12 조회 4,009
08-07-23 조회 2,824
08-07-10 조회 3,781
08-07-04 조회 3,003
08-06-27 조회 7,640
08-06-19 조회 4,952
08-05-27 조회 5,561
08-05-25 조회 5,397
08-05-23 조회 3,472
08-05-23 조회 4,639
08-05-21 조회 4,988
08-05-20 조회 4,100
08-05-20 조회 3,325
08-04-18 조회 4,403
글쓰기