본문 바로가기
윅스 (Wix) 홈페이지 만들기/윅스 코딩 (Wix Code - Corvid)

윅스 (Wix) 코딩 예제 - 코딩으로 오늘 날짜 표시하기 (Wix Code Tutorial: Displaying Today's Date with Code)

by 라임쥬서(Lime Juicer) 2020. 5. 6.
반응형

윅스 (Wix) 코딩 예제 - 코딩으로 오늘 날짜 표시하기 (Wix Code Tutorial: Displaying Today's Date with Code)

 

 

 

설명)

 

이 예제에서는 윅스 코드(Wix Code)를 사용하여 사이트에 오늘을 표시하는 방법을 보여줍니다.

 

이 예제는 두 부분으로 구성됩니다.

- 복사하여 페이지에 붙여넣을 수 있는 코드를 포함하여 설정 방법에 대한 지침

- 각 코드 행이 하는 일에 대한 설명

 

 

 

노트 :

시작하기 전에 개발자 도구를 사용 설정했는지 확인합니다.

 

 

날짜 표시하는 방법 (Instructions)

1. 페이지에 텍스트 요소를 추가합니다. 이 요소는 날짜를 표시합니다.

2. 페이지의 코드 패널을 엽니다 (맨 아래에서 끌어 올 수 있습니다).

3. 아래 코드를 복사하여 코드 패널의 페이지 탭에 붙여 넣습니다. “//TODO: write your page related code here…”라는 줄 아래에 붙여 넣으습니다. (원하는 경우 해당 행을 삭제할 수 있습니다).

 

// Gets today's date
const today = new Date();
// Sets the property of the text element to be a string representing today's date in the user's local format
$w("#dateText").text = today.toLocaleDateString();

 

 

 

 

4. 다음의 것들을 바꿉니다.

- #dateText : 1단계에서 추가한 텍스트 요소의 ID (해당 ID를 보려면 마우스를 올려 놓습니다.)

5. 페이지가 어떻게 보이는지 미리보기.

 

 

노트 :

날짜 형식은 방문자 또는 방문자의 로켈 설정을 기반으로합니다. 예를 들어 귀하 또는 귀하의 방문자가 미국에 있는 경우 이 코드는 2012년 12월 25일과 같은 날짜를 표시하지만 영국의 방문자는 25/12/2018을 볼 수 있습니다. 모든 사람에게 날짜가 표시되는 방식을 정확하게 제어하는 ​​방법에 대해 알아 보려면 여기를 참조합니다.

 

 

 

 

코드 이해하기 (Understanding the Code)

이 섹션에서는 코드의 주요 행을 설명합니다. 코드 패널의 코드는 다음 그림과 같아야합니다. 코드 패널 툴바에 모든 것을 표시하도록 다음 

 아이콘을 클릭합니다.

 

 

 

 

 

3 행은 onReady( ) 함수를 호출합니다. 이것은 페이지 로드가 끝날 때 실행할 코드를 정의합니다. 이 행은 처음 열 때 코드 패널에 기본적으로 표시됩니다.

5행은 표준 자바스크립트(JavaScript) 함수인 Date( )를 사용하여 오늘의 날짜를 얻은 다음 오늘이라는 변수에 저장합니다.

7행은 표준 자바스크립트(JavaScript) 함수 toLocaleDateString을 사용하여 방문자의 로켈 설정과 일치하도록 날짜가 지정된 문자열을 반환합니다.

그런 다음 text 속성은 "#dateText"텍스트 요소의 내용을 반환되는 문자열로 설정합니다. 즉, 텍스트 요소가 오늘 날짜를 표시합니다.

 

 

 

연관된 토픽)

 

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index 윅스 (Wix.com) 윅스 ADI & 템플릿 (Wix ADI & 템플릿) 윅스 웹에디터 (Wix Editor) 윅스 코딩 (Wix Code - Corvid) 윅스 해커톤 (Wix Hackathon)

limejuicer.tistory.com

 

출처 :

https://support.wix.com/en/article/wix-code-tutorial-displaying-todays-date-with-code

 

반응형

댓글