WeChat 애플릿의 카운트다운 기능을 설명하는 예

WeChat 개발은 이제 점점 더 대중화되고 있습니다. 카운트다운 기능은 예를 들어 사용자가 인증 코드를 얻기 위해 사용해야 하는 기능입니다. 카운트다운 기능은 프로젝트 개발에서 자주 사용됩니다. 오늘은 위챗 애플릿의 카운트다운 기능 구현 코드를 소개하겠습니다. 필요한 친구들이 참고하시면 좋겠습니다.

코드를 직접 살펴보겠습니다

//倒计时60秒
function countDown(that,count) {
 if (count == 0) {
 that.setData({
  timeCountDownTop: '获取验证码',
  counting:false
 })
 return;
 }
 that.setData({
 counting:true,
 timeCountDownTop: count + '秒后重新获取',
 })
 setTimeout(function(){
 count--;
 countDown(that, count);
 }, 1000);
}

카운트다운이 필요한 곳에 호출하세요

Page({
 data:{
  counting:false
 },
 //生成验证码
 generateVerifyCode:function() {
  var that = this;
  if (!that.data.counting) {
   wx.showToast({
   title: '验证码已发送',
   })
   //开始倒计时60秒
   countDown(that, 60);
  } 
 },
})

다음은 함수 구현에 대한 간략한 소개입니다

우선 카운트다운 메소드를 페이지 외부에 작성하지 마세요. 이것에 대해 실수하세요

카운트다운을 구현하는 핵심은 다음 코드인 setTimeout 메소드에 있습니다. setTimeout 메소드는 지정된 시간 간격으로 실행될 함수를 설정할 수 있습니다. 적용되는 형식은 setTimeout(function(), time)이고, function은 실행될 해당 메소드이고, time은 시간 간격입니다. 여기서 1000은 1000밀리초를 의미합니다. 즉, countDown 메소드가 1초마다 실행됩니다.

setTimeout(function(){
 count--;
 countDown(that, count);
 }, 1000);

• count 필드는 countDown 메소드에서 카운트다운 시간을 설정하는 데 사용됩니다. 예를 들어, 여기 60초가 있습니다.

• countDown 메소드는 또한 카운트다운 시 setData 메소드를 사용하여 페이지를 업데이트하도록 전달합니다. 상태 변경

• countDown 메서드는 카운트다운이 반복적으로 시작되는 것을 방지하기 위해 counting 필드를 사용하여 이미 카운트다운 중인지 확인하고, return을 통해 직접 종료합니다.

  휴대폰 등록 시 인증코드 카운트다운 보내기 기능

JavaScript 카운트다운 타이머 구현 방법

vue 기반 카운트다운 데모 만들기

위 내용은 WeChat 애플릿의 카운트다운 기능을 설명하는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!