웹 페이지 제목 표시줄 깜박이는 프롬프트 효과 예제 분석_자바스크립트 기술의 js 구현-JS 튜토리얼-php.cn

이 기사의 예에서는 js를 사용하여 웹페이지 제목 표시줄의 깜박이는 프롬프트 효과를 얻는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

현재 트래픽이 많은 채팅방과 같은 일부 채팅 도구에서 웹 페이지 제목 표시줄의 깜박임 효과를 자주 볼 수 있습니다. 관심이 있으시면 아래에 웹 페이지 제목 표시줄의 깜박임 프롬프트를 구현하는 코드를 요약하겠습니다. , 참고하시면 됩니다.

이 새로운 메시지 프롬프트 효과는 회사의 프로젝트에서 사용되며 주로 사용자에게 새로운 메시지가 있음을 상기시키는 데 사용됩니다. 구체적인 구현 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

var newMessageRemind={

_단계: 0,

_title: 문서.제목,

_timer: null,

//새 메시지 프롬프트 표시

표시:함수(){

var temps = newMessageRemind._title.replace("【　　】", "").replace("【새 메시지】", "");

newMessageRemind._timer = setTimeout(function() {

newMessageRemind.show();

//여기에 쿠키 작업을 작성하세요

newMessageRemind._step ;

if (newMessageRemind._step == 3) { newMessageRemind._step = 1 };

if (newMessageRemind._step == 1) { document.title = "【　　】" temps };

if (newMessageRemind._step == 2) { document.title = "[새 메시지]" 임시 };

}, 800);

return [newMessageRemind._timer, newMessageRemind._title];

},

//새 메시지 프롬프트 취소

지우기: 함수(){

clearTimeout(newMessageRemind._timer);

document.title = newMessageRemind._title;

//여기에 쿠키 작업을 작성하세요

}

};

새 메시지 알림을 표시하려면 호출하세요: newMessageRemind.show();
새 메시지 알림을 취소하려면 전화하세요: newMessageRemind.clear();
위의 코드를 읽어본 후, 제가 직접 최적화해보겠습니다. 어떻게든 흡수해서 익힐 수 있으면 좋을 것 같습니다. :) 주로 그의 코드에서 newMessageRemind 필드가 너무 많이 사용된 것 같고, 촘촘하고 불편해 보인다는 느낌을 받았고, 이를 신선하게 보여주고 싶어서 다음과 같은 코드를 생각해냈습니다.

코드 복사 코드는 다음과 같습니다.

var newMessageRemind = function () { 

var i = 0, 

         제목 = 문서.제목, 

         루프 

반환 { 

표시: 함수() { 

             루프 = setInterval(function () { 

나 

If ( i == 1 ) document.title = '[새 뉴스]' 제목 

If ( i == 2 ) document.title = '【　】' 제목 

If ( i == 3 ) i = 0 

             }, 800) 

         }, 

중지: 함수 () { 

~
                문서.제목 = 제목 

          } 

};
} ();

훨씬 더 신선하지 않나요? ^_^