책갈피 클립:위쪽 타이머는 항상 오른쪽 아래에 표시됩니다.
2525 단어 타이머JavaScript책갈피
"찾아보기 페이지의 오른쪽 아래에 타이머 설정
책갈피를 표시합니다.1초씩 증가합니다.
코드의 간단한 해설도 맨 아래에 기재되어 있다.
카운트다운과 카운트다운을 참고할 수 있다면 다행입니다.
"웹 페이지에서 어떤 일을 진행할 때의 시간을 측정한다."
사용자기가 만든 내용을 읽는 시간.
실제 측정, 웹에서의 테스트 해답의 시간 등을 측정해 보세요.
【사용법】
다음 코드를 Chrome과 같은 책갈피의 URL으로 복사합니다
그 책갈피 버튼을 누르면 시작합니다.
STOP 버튼으로 중지,restart 버튼으로 다시 시작×버튼이 닫힙니다.
책갈피 코드
javascript:
document.body.insertAdjacentHTML('afterbegin', '<div id="outbox" style="font-size:12px;position:fixed;right:10px;bottom:10px;width:190px;height:60px;padding:8px;border:1px solid #cccccc;background-color:#000000;color:#ffffff;border-radius:10px;z-index:15000;">Count:<span id="incontent"></span><br><input type="button" style="width:50px;height:22px;font-size:12px;background-color:#ffffff;color:#000000;" onclick="stopmotion();" value="stop"> <input type="button" style="width:50px;height:22px;font-size:12px;background-color:#ffffff;color:#000000;" value="restart" onclick="starts()"> <input type="button" style="width:25px;height:22px;font-size:12px;background-color:#ffffff;color:#000000;" value="×" onclick="countclose()"></div>');
var pswitch = "";
var tzcount = 0;
var inc;
var ctimer;
oya = document.getElementById("outbox");
inc = document.getElementById("incontent");
ctimer = setInterval("countup()",1000);
function countup() {
tzcount += 1;inc.innerText = tzcount;
if(pswitch == "end") {clearInterval(ctimer);}}
function stopmotion(){pswitch="end";}
function starts(){pswitch="start"; ctimer = setInterval("countup()",1000);}
function countclose(){oya.style.display='none';pswitch="end";}
간단한 해설
setInterval에서 함수를 주기적으로 실행합니다.예를 들면 1초마다
ctimer = setInterval("countup()",1000);
상응하는 함수 중 변수 +=1;집행 횟수를 늘리다.멈출 수 있도록if문장의 변수가 특정 문자라면
멈추다
clearInterval(ctimer);
function countup() {
tzcount += 1;inc.innerText = tzcount;
if(pswitch == "end") {clearInterval(ctimer);}}
보태다
표시된 페이지에 컨텐트 삽입
안보정책에 따라 움직이지 않는 경우도 있다.
Chrome으로 확인 중입니다.
Reference
이 문제에 관하여(책갈피 클립:위쪽 타이머는 항상 오른쪽 아래에 표시됩니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/YUTA_NARIKAWA_MEM/items/59f95a943dfc8f6a7d42텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)