이전
목록
다음
탈

이동하는 글자

캐네스제롬
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2012-04-18 (수) 18:14:13 · 3111 · 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 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
13-07-14 조회 5,479
13-07-14 조회 5,441
13-07-14 조회 4,750
13-07-14 조회 4,340
13-07-14 조회 4,206
13-07-14 조회 4,260
13-07-14 조회 4,991
13-07-14 조회 4,704
13-07-14 조회 4,410
13-07-14 조회 5,452
13-07-14 조회 5,347
13-07-14 조회 5,112
13-07-14 조회 4,848
13-07-14 조회 5,531
13-07-13 조회 3,784
13-07-01 조회 5,800
13-07-01 조회 5,883
13-07-01 조회 3,977
13-07-01 조회 5,480
13-05-27 조회 4,045
13-05-21 조회 5,106
13-05-02 조회 1만
13-04-29 조회 5,279
13-04-15 조회 5,521
13-04-13 조회 6,454
13-02-27 조회 4,168
13-02-26 조회 6,552
13-02-12 조회 5,319
13-02-01 조회 2.4만
13-01-23 조회 3,600
13-01-09 조회 8,086
13-01-07 조회 4,995
13-01-07 조회 3,736
13-01-04 조회 1.3만
13-01-03 조회 1.2만
12-12-31 조회 6,442
12-12-27 조회 4,568
12-12-27 조회 4,259
12-12-27 조회 8,937
12-12-18 조회 3,749
12-12-12 조회 3,779
12-12-12 조회 6,808
12-12-12 조회 8,223
12-12-05 조회 5,524
12-12-01 조회 6,830
12-11-22 조회 4,753
12-11-09 조회 5,603
12-11-09 조회 7,645
12-10-29 조회 4,866
12-10-16 조회 6,406
12-10-09 조회 5,491
12-09-02 조회 4,590
12-09-01 조회 3,701
12-08-30 조회 4,368
12-08-30 조회 4,370
12-08-28 조회 3,700
12-08-21 조회 7,264
12-08-20 조회 3,798
12-08-18 조회 5,210
12-08-18 조회 3,574
12-08-11 조회 3,733
12-08-09 조회 3,901
12-08-07 조회 3,879
12-08-07 조회 4,465
12-08-01 조회 4,722
12-08-01 조회 4,609
12-07-20 조회 9,977
12-07-17 조회 4,324
12-07-15 조회 4,096
12-07-10 조회 4,360
12-07-09 조회 7,076
12-07-05 조회 3,416
12-07-04 조회 3,550
12-06-30 조회 5,801
12-06-28 조회 3,894
12-06-20 조회 4,064
12-06-16 조회 3,361
12-06-14 조회 4,008
12-06-07 조회 4,033
12-06-06 조회 6,390
12-05-27 조회 4,611
12-05-25 조회 3,352
12-05-25 조회 3,190
12-05-24 조회 3,289
12-05-24 조회 4,636
12-05-23 조회 4,017
12-05-22 조회 6,629
12-05-15 조회 4,154
12-05-15 조회 3,711
12-05-14 조회 3,150
12-05-12 조회 3,605
12-05-11 조회 7,100
12-05-07 조회 4,540
12-04-28 조회 3,731
12-04-25 조회 5,382
12-04-15 조회 3,972
12-04-12 조회 4,818
12-04-11 조회 3,576
12-04-08 조회 3,421
12-03-21 조회 6,473
글쓰기