임의의 텍스트 표시로 웹사이트 개인화하기

"다음은 어디로?" 내 웹사이트 섹션에는 방문자가 반쯤 숨겨진 페이지를 탐색하고 모험을 떠나는 데 도움이 되는 작은 스토리가 바닥글에 포함되어 있습니다(Manuel에서 영감을 얻었음). 그 안에는 내가 좋아하는 커피 종류를 언급하고 Buy me a Coffee 페이지에 연결합니다. 이 섹션을 주의 깊게 살펴보신 분이라면 페이지가 로드될 때마다 커피 종류가 무작위로 선택된다는 점을 눈치채셨을 것입니다.

이를 달성한 방법은 다음과 같습니다.

HTML

구조는 다음과 같은 간단한 조각으로 시작됩니다.

I’m a huge <span>



<p>The <span> element with the id random-coffee serves as the placeholder for displaying the coffee name. By default, it shows "caffè latte" in case JavaScript is disabled or unavailable.

<h3>
  
  
  The JavaScript
</h3>

<p>To make the magic happen, I added the following JavaScript code:<br>
</p>

<pre class="brush:php;toolbar:false">const coffees = ["caffè latte", "cappuccino", "flat white", "cortado", "latte macchiato"];
const randomCoffee = document.getElementById("random-coffee");
randomCoffee.innerText = coffees[Math.floor(Math.random() * coffees.length)];

스크립트 분석은 다음과 같습니다.

1. 옵션 정의:
   
   첫 번째 줄은 다섯 가지 유형의 커피를 나열하는 커피라는 목록을 만듭니다. 이 목록을 맞춤 설정하여 자신이 좋아하는 음료를 포함하거나 차나 다른 음료 유형으로 대체할 수도 있습니다.

2. 자리 표시자 찾기:
   
   두 번째 줄에서는 document.getElementById() 함수를 사용하여 고유 ID인 random-coffee를 사용하여 HTML의 요소를 삭제합니다.

3. 선택 항목 무작위 지정:
   
   세 번째 줄은 Math.random() 함수를 사용하여 커피 배열에서 임의의 커피 유형을 선택하고 선택한 커피에 요소를 추가합니다.

그게 다야!

이 간단한 설정은 페이지가 로드될 때마다 다른 커피 이름을 동적으로 표시합니다. 그것은 내 사이트에 약간의 무작위성과 개성을 추가합니다.

이제 양해 부탁드리며 따뜻하고 포근한 카페라떼 한잔 하러 가겠습니다!

위 내용은 임의의 텍스트 표시로 웹사이트 개인화하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!