js에서 사격 기능을 구현하는 방법_js에서 사격 기능을 구현하는 방법-JS 튜토리얼-php.cn

js에서 사격 기능을 구현하는 방법

小老鼠

풀어 주다： 2024-03-04 17:05:55

원래의

1256명이 탐색했습니다.

구현 방법: 1. HTML 파일을 생성합니다. 2. HTML 코드 구조를 추가합니다. 3. body 태그에 div, 입력 및 버튼 태그를 사용하여 효과 표시 상자, 입력 상자 및 연발 제출 버튼을 디자인합니다. 페이지 4. 스크립트 태그를 추가하고 js 코드를 작성하여 사격 효과를 얻습니다. 5. 브라우저를 통해 디자인 효과를 봅니다.

js에서 사격 기능을 구현하는 방법

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 = $(&#39;txt&#39;).value;
var span = document.createElement(&#39;span&#39;);
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 = &#39;absolute&#39;;
span.style.top = top + "px";
span.style.color = color;
span.style.left = &#39;500px&#39;;
span.style.whiteSpace = &#39;nowrap&#39;;
var nub = (Math.random() * 10) + 1;
span.setAttribute(&#39;speed&#39;, nub);
span.speed = nub;
span.innerHTML = word;
$(&#39;box&#39;).appendChild(span);
$(&#39;txt&#39;).value = "";
}
setInterval(move, 200);
function move() {
var spanArray = $(&#39;box&#39;).children;
for (var i = 0; i < spanArray.length; i++) {
spanArray[i].style.left = parseInt(spanArray[i].style.left) - spanArray[i].speed + &#39;px&#39;;
}
}
  </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 = $(&#39;txt&#39;).value;
var span = document.createElement(&#39;span&#39;);
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 = &#39;absolute&#39;;
span.style.top = top + "px";
span.style.color = color;
span.style.left = &#39;500px&#39;;
span.style.whiteSpace = &#39;nowrap&#39;;
var nub = (Math.random() * 10) + 1;
span.setAttribute(&#39;speed&#39;, nub);
span.speed = nub;
span.innerHTML = word;
$(&#39;box&#39;).appendChild(span);
$(&#39;txt&#39;).value = "";
}
setInterval(move, 200);
function move() {
var spanArray = $(&#39;box&#39;).children;
for (var i = 0; i < spanArray.length; i++) {
spanArray[i].style.left = parseInt(spanArray[i].style.left) - spanArray[i].speed + &#39;px&#39;;
}
}
    </script>

로그인 후 복사

위 내용은 js에서 사격 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!