JavaScript는 간단한 사격 효과 예시 분석을 구현합니다.

이 글은 주로 자바스크립트연격 효과

를 쉽게 구현하는 데 도움이 됩니다. 연발은 또 다른 좋은 쇼라고 느끼셨나요? !
하지만 저는 개인적으로 TV를 시청할 때 공세에 방해받지 않는 것을 선호합니다. 오늘은 간단한 포격을 써보겠습니다. 얼마나 간단합니까? 효과를 살펴보세요:

그림에서 볼 수 있듯이 우리의 어리석은 HTML 구조는 실제로 매우 간단합니다.
은 p, 입력창, 버튼으로 구성되어 있습니다.

 <p id="box" class="box"></p>
 <input type="text" id="txt" />
 <button onclick="send()">提交内容</button>

먼저 js 코드를 게시하세요:

 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 = &#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;;
  }
 }

원칙은 간략하게 설명됩니다:

첫 번째 단계 , 입력 상자에 콘텐츠를 가져와야 합니다. var word = $('txt').value;
두 번째 단계, 이 콘텐츠를 p에 채우도록 최선을 다해야 합니다. 스크롤되어 표시됩니다. 내부에는 세 가지 원칙이 있습니다. ① 임의의 색상 ② 임의의 높이 ③ 왼쪽 테두리로부터의 거리가 실시간으로 변경됩니다
세 번째 단계, 이 내용을 p $( 'box').appendChild (span);

위 단계의 원칙을 보면 두 번째 단계가 가장 중요한 단계라는 것을 알 수 있습니다.

첫 번째 원칙을 달성하려면

 var color1 = parseInt(Math.random() * 256);
 var color2 = parseInt(Math.random() * 256);
 var color3 = parseInt(Math.random() * 256);
 var color = "rgb(" + color1 + "," + color2 + "," + color3 + ")";
 span.style.color = color;

작은 확장자:

RGB(R,G,B)
R:
빨간색 값. 양수정수 | 백분율
G:
녹색 값입니다. 양의 정수 | 백분율
B:
파란색 값입니다. 양의 정수 | 백분율
이해하기 쉽습니다.

두 번째 원칙을 구현하려면:

var top = parseInt(Math.random() * 500) - 20;
top = top < 0 ? 0 : top;
span.style.top = top + "px";

세 번째 원칙을 구현하려면:

 span.style.left = '500px';
 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 + &#39;px&#39;;
  }
 }

는 timer의 원칙을 사용하여 실시간으로 변화를 남겼습니다.

이 시점에서는 매우 명확해야 합니다.

위 내용은 JavaScript는 간단한 사격 효과 예시 분석을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!