js에서 사격 기능을 구현하는 방법
- 小老鼠원래의
- 2024-03-04 17:05:551100검색
구현 방법: 1. HTML 파일을 생성합니다. 2. HTML 코드 구조를 추가합니다. 3. body 태그에 div, 입력 및 버튼 태그를 사용하여 효과 표시 상자, 입력 상자 및 연발 제출 버튼을 디자인합니다. 페이지 4. 스크립트 태그를 추가하고 js 코드를 작성하여 사격 효과를 얻습니다. 5. 브라우저를 통해 디자인 효과를 봅니다.
js에서 탄막 기능 구현 방법
구체적인 동작 방법:
1 먼저 html 파일을 생성합니다.
2. html 파일에 html 코드 구조를 추가합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹幕功能</title>
</head>
<body>
</body>
</html>3. 그런 다음 HTML 코드 구조의 body 태그에 div, 입력 및 버튼 태그를 사용하여 페이지에 대한 효과 표시 상자, 입력 상자 및 연발 제출 버튼을 각각 디자인합니다.
<div id="box" class="box"></div> <input type="text" id="txt" /> <button onclick="send()">发送弹幕</button>
4. html 구조의 html 태그에 스크립트 태그를 추가하고 js 코드를 작성하여 사격 효과를 얻으세요.
<style>
function $(str) {
return document.getElementById(str);
}
function send() {
var word = $('txt').value;
var span = document.createElement('span');
var top = parseInt(Math.random() * 500) - 20;
var color1 = parseInt(Math.random() * 256);
var color2 = parseInt(Math.random() * 256);
var color3 = parseInt(Math.random() * 256);
var color = "rgb(" + color1 + "," + color2 + "," + color3 + ")";
top = top < 0 ? 0 : top;
span.style.position = 'absolute';
span.style.top = top + "px";
span.style.color = color;
span.style.left = '500px';
span.style.whiteSpace = 'nowrap';
var nub = (Math.random() * 10) + 1;
span.setAttribute('speed', nub);
span.speed = nub;
span.innerHTML = word;
$('box').appendChild(span);
$('txt').value = "";
}
setInterval(move, 200);
function move() {
var spanArray = $('box').children;
for (var i = 0; i < spanArray.length; i++) {
spanArray[i].style.left = parseInt(spanArray[i].style.left) - spanArray[i].speed + 'px';
}
}
</style>5. 마지막으로 브라우저를 통해 html 파일을 읽어 디자인 효과를 볼 수 있습니다.
전체 샘플 코드는 다음과 같습니다.
弹幕功能
<div id="box" class="box"></div>
<input type="text" id="txt" />
<button onclick="send()">发送弹幕</button>
<script>
function $(str) {
return document.getElementById(str);
}
function send() {
var word = $('txt').value;
var span = document.createElement('span');
var top = parseInt(Math.random() * 500) - 20;
var color1 = parseInt(Math.random() * 256);
var color2 = parseInt(Math.random() * 256);
var color3 = parseInt(Math.random() * 256);
var color = "rgb(" + color1 + "," + color2 + "," + color3 + ")";
top = top < 0 ? 0 : top;
span.style.position = 'absolute';
span.style.top = top + "px";
span.style.color = color;
span.style.left = '500px';
span.style.whiteSpace = 'nowrap';
var nub = (Math.random() * 10) + 1;
span.setAttribute('speed', nub);
span.speed = nub;
span.innerHTML = word;
$('box').appendChild(span);
$('txt').value = "";
}
setInterval(move, 200);
function move() {
var spanArray = $('box').children;
for (var i = 0; i < spanArray.length; i++) {
spanArray[i].style.left = parseInt(spanArray[i].style.left) - spanArray[i].speed + 'px';
}
}
</script>
위 내용은 js에서 사격 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：JSP 페이징 기능 구현 방법다음 기사：JSP 페이징 기능 구현 방법