【ブックマークレット】カウントアップタイマーを右下に常に表示する
正直需要はほぼ無いと思いますが、
「閲覧しているページの右下にカウントアップタイマーを
表示する」ブックマークレットです。1秒ずつ増えていきます。
javascriptコードの簡単な解説も一番下に記載しています。
カウントアップ、ダウンの参考にして頂けたら幸いです。
「Webページ上で何かを行う際の時間を計測する」
時に使用します。自分で制作したコンテンツを読む時間を
実際に計ってみる、Web上でのテストを解く時間を計測するなど。
【利用方法】
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で検証しています。
Author And Source
この問題について(【ブックマークレット】カウントアップタイマーを右下に常に表示する), 我々は、より多くの情報をここで見つけました https://qiita.com/YUTA_NARIKAWA_MEM/items/59f95a943dfc8f6a7d42著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .