반응형
<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;
}
var canvasWidth = 700;
var canvasHeight = 400;
function MovingText(data) {
this.x = nextRandomInteger(canvasWidth);
this.y = nextRandomInteger(canvasHeight);
this.vx = randomSpeed(10);
this.vy = randomSpeed(10);
this.body = document.createElement('h3');
this.body.innerHTML = data;
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';
};
var movingTexts = [];
window.onload = function () {
setInterval(function () {
for (var i in movingTexts) {
movingTexts[i].move();
}
}, 1000 / 24);
}
function inputData() {
var data = document.getElementById("data");
movingTexts.push(new MovingText(data.value));
data.value = '';
}
</script>
<body>
<div>
<input type="text" id="data" onKeypress="inputData()" />
</div>
</body>
</head>
반응형
'언어 > javascript' 카테고리의 다른 글
| 바인딩 되지 않는 this (0) | 2021.06.28 |
|---|---|
| 코딩테스트 자주사용하는 코드 (JavaScript) (1) | 2021.06.22 |
| javascript : 회전시키기 (2) | 2020.12.17 |
| javascript : 스타일 속성 이름 차이점 (0) | 2020.12.17 |
| javascript : 브라우저 관련객체 (0) | 2020.12.17 |
