【ブックマークレット】カウントアップタイマーを右下に常に表示する

正直需要はほぼ無いと思いますが、
「閲覧しているページの右下にカウントアップタイマーを
表示する」ブックマークレットです。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">&nbsp;<input type="button" style="width:50px;height:22px;font-size:12px;background-color:#ffffff;color:#000000;" value="restart" onclick="starts()">&nbsp;<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で検証しています。