자바스크립트에서 타이머 사용하기
1. ThingWorx Studio를 엽니다.
2. 내 프로젝트 페이지에서 상단 오른쪽 코너의 녹색 + 기호를 클릭하여 새 프로젝트를 만듭니다.
3. 프로젝트 만들기 페이지에서 프로젝트 이름 필드에 프로젝트의 이름을 입력하고 서버 필드에 사용자의 experience service URL을 입력합니다.
4. 프로젝트 유형으로 2D를 선택하고 만들기를 클릭합니다.
5. 눈금 레이아웃 위젯을 캔버스로 드래그 앤 드롭합니다.
6. 프로젝트 창에서 row-1을 클릭합니다.
7. 세부 정보 창의 눈금 작업 아래에서 열 추가를 두 번 클릭합니다.
8. 단추 위젯을 첫 두 열에 드래그 앤 드롭하고 레이블 위젯을 세 번째 열에 드래그 앤 드롭합니다.
9. 첫 번째 단추를 선택하고 Start를 속성 아래의 텍스트 필드에 입력합니다.
이 작업을 두 번째 단추에 반복하되, 텍스트 필드에 Stop을 입력합니다.
10. 레이블 위젯을 선택하고 텍스트 필드에 5를 입력합니다.
11. 이번에는 새 응용 프로그램 매개변수를 만들어 2D 단추에 바인딩하겠습니다. 데이터 창에서 응용 프로그램 매개 변수 옆의 녹색 + 아이콘을 클릭합니다.
12. 응용 프로그램 매개 변수 추가 창의 이름 필드에 count를 입력하고 추가를 클릭합니다.
13. 이제
count 옆의
바인딩 아이콘을
프로젝트 창의
label-1에 드래그 앤 드롭하여
개수 응용 프로그램 매개변수를 레이블에 바인딩합니다.
바인딩 대상 선택 창에서 텍스트를 선택합니다.
| 본 자습서에서는 단추 색상에 기본 제공되는 스타일을 적용했습니다. 자세한 내용은 테마 항목을 참조하십시오. |
14. 프로젝트 창에서 Home.js를 클릭합니다. 자바스크립트 편집기에 다음을 입력합니다.
$scope.countdown = function() {
$scope.app.params.count--;
};
$scope.start = function() {
$scope.app.params.count = 5;
$scope.intervalPromise = $interval($scope.countdown, 1000, 5);
};
$scope.stop = function() {
$interval.cancel($scope.intervalPromise);
};
여기서 5는 카운트다운 간격을 의미합니다.
15. 프로젝트 창의 홈을 클릭하여 캔버스로 돌아갑니다.
16. 시작 단추를 선택하여 속성을 확인합니다.
17. 세부 정보 창에서 클릭 이벤트 옆의 JS 아이콘을 클릭하고 start();를 표현식 상자에 입력합니다.
이 단추를 클릭하면 start 자바스크립트 함수가 실행됩니다.
18. 중지 단추를 선택하여 속성을 확인합니다.
19. 세부 정보 창에서 클릭 이벤트 옆의 JS 아이콘을 클릭하고 stop();를 표현식 상자에 입력합니다.
이 단추를 클릭하면 stop 자바스크립트 함수가 실행됩니다.
20. 미리 보기를 클릭합니다. 이제 시작 단추를 클릭하면 카운트다운이 시작됩니다. 중지 단추를 클릭하면 카운트다운이 중지됩니다.
상위 주제
