Question

如何创建带有启动计时器停止按钮的Tampermonkey代码？

当我选择“开始”时，应记下开始时间（例如：1.30 PM）。
当我选择“停止”时，应记下停止时间（例如：1.35 PM）
并显示所用时间（例如5分钟）。

可以创建这个吗？

Answer 1

这类似于Add a JavaScript button using Greasemonkey or Tampermonkey?，请参阅该问题以了解格式和定位想法。

建议您使用Performance API或Moment.js library处理时间和/或时间格式。或参见：How to convert time milliseconds to hours, min, sec format in JavaScript?进行格式化。

这是一个完整的有效的Tampermonkey用户脚本，用于说明基本知识。

您可以运行代码段或使用Tampermonkey进行安装以查看其运行情况。

// ==UserScript==
// @name     _Add a stopwatch / elapsed time button
// @match    *://YOUR_SERVER.COM/YOUR_PATH/*
// @require  https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==

var gblButtonClickTime;

$("body").prepend ( `
    <div id="tmStopWatchBlck">
        <button id="tmStopWatchBttn">Start</button>
        <span id="tmTimeStat">&nbsp;</span>
    </div>
` );

$("#tmStopWatchBttn").click ( zEvent => {
    var statusNode  = $("#tmTimeStat");
    var tmrButton   = $(zEvent.target);

    //--- Button text is either "Start" or "Stop".
    if (tmrButton.text() === "Start") {
        //-- Start the timer
        tmrButton.text ("Stop");
        statusNode.css ("background", "lightyellow");

        gblButtonClickTime = performance.now ();
        console.log (
            "Timer started at: ", gblButtonClickTime.toFixed(0), new Date()
        );
    }
    else {
        //-- Stop the timer
        tmrButton.text ("Start");
        statusNode.css ("background", "lightgreen");

        var stopTime        = performance.now ();
        var elapsedtime     = stopTime - gblButtonClickTime;  // Milliseconds
        var purtyElpsdTime  = (elapsedtime / 1000).toFixed(3) + " seconds";
        console.log (
            "Timer stopped at: ", stopTime.toFixed(0), new Date(),
            "Elapsed: ", purtyElpsdTime
        );
        statusNode.text (purtyElpsdTime);
    }
} );

GM_addStyle ( `
    #tmStopWatchBttn {
        font-size: 1.2em;
        padding: 0.5ex 1em;
        width: 5em;
    }
    #tmTimeStat {
        margin-left: 1em;
        padding: 0.2ex 2ex;
        border: 1px solid lightgray;
        border-radius: 0.5ex;
    }
` );

/********************************************************************
******* Everything below this block is simulated target page. *******
******* It's NOT part of the userscript.                      *******
********************************************************************/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://greasyfork.org/scripts/44560-gm-addstyle-shim/code/GM_addStyle_shim.js"></script>

如何使用Tampermonkey

1 个答案: