☰

timerecorder

记录你在各个网站学习的时间

// ==UserScript==
// @name         timerecorder
// @namespace    *
// @version      0.4
// @description  记录你在各个网站学习的时间
// @author       passer21
// @match        *://*/*
// @icon         https://img.zcool.cn/community/01271c5d391e43a80120695ccafcc2.jpg@1280w_1l_2o_100sh.jpg
// @grant        none
// @license MIT
// ==/UserScript==
(function () {
    'use strict';
    // Your code here...
    const setcss = () => {
        var newstyles = `
        /* CSS */
        .button-86 {
          all: unset;
          width: 80px;
          height: 30px;
          font-size: 16px;
          background: transparent;
          border: none;
          position: relative;
          color: #f0f0f0;
          cursor: pointer;
          z-index: 1;
          padding: 10px 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          white-space: nowrap;
          user-select: none;
          -webkit-user-select: none;
          touch-action: manipulation;
        }
        .button-86::after,
        .button-86::before {
          content: '';
          position: absolute;
          bottom: 0;
          right: 0;
          z-index: -99999;
          transition: all .4s;
        }

        .button-86::before {
          transform: translate(0%, 0%);
          width: 100%;
          height: 100%;
          background: #28282d;
          border-radius: 10px;
        }

        .button-86::after {
          transform: translate(10px, 10px);
          width: 35px;
          height: 35px;
          background: #ffffff15;
          backdrop-filter: blur(5px);
          -webkit-backdrop-filter: blur(5px);
          border-radius: 50px;
        }

        .button-86:hover::before {
          transform: translate(5%, 20%);
          width: 110%;
          height: 110%;
        }

        .button-86:hover::after {
          border-radius: 10px;
          transform: translate(0, 0);
          width: 100%;
          height: 100%;
        }

        .button-86:active::after {
          transition: 0s;
          transform: translate(0, 5%);
        }`
        var styleSheet = document.createElement("style")
        styleSheet.innerText = newstyles
        document.head.appendChild(styleSheet)
    }
    var startTime, endTime, timeSpent;
    const startcount = () => {
        // Get the current time when the page is loaded
        startTime = new Date();
        //console.log(startTime);
        timeSpent = Number(localStorage.getItem("timeSpent")) || 0;
        // Get the previous time spent from localStorage or set it to zero if not found
        //console.log(timeSpent)
    }
    const stopcount = () => {
        // Get the current time when the page is unloaded
        endTime = new Date();
        // Calculate the time difference in milliseconds
        var timeDiff = (endTime - startTime) / 1000;
        // Add the time difference to the previous time spent
        timeSpent += timeDiff;
        //console.log(timeSpent, endTime, startTime)
        // Save the new time spent in localStorage
        if (!isNaN(timeSpent)) {
            //console.log(timeSpent, 'when storage')
            localStorage.setItem("timeSpent", timeSpent);
        }
    }
    const GetTime = () => {
        let timer = localStorage.getItem("timeSpent");
        //console.log(`total time is ${timer / 60} min`);
        return (timer / 60)
    }
    window.onload = function () {
        startcount();
        //startcount();
    };
    window.onbeforeunload = function () {
        stopcount();
    };
    document.addEventListener("visibilitychange", function () {
        // If the document is hidden, stop the timer and save the time spent
        if (document.hidden) {
            stopcount();
        } else {
            // If the document is visible, resume the timer and update the start time
            startcount();
        }
    });
    const showtime = () => {
        var iframe = document.createElement("iframe");
        iframe.src = "about:blank";
        document.body.appendChild(iframe);
        let spendingtime = GetTime()
        iframe.contentDocument.write(`<html><head><title>you time spending</title></head><body>你在这个网站的努力时长累计为${spendingtime}分钟</body></html>`);
    }
    const makebutton = () => {
        setcss()
        // Create a button element
        var button = document.createElement("button");
        // Set the button text
        button.className = 'button-86'
        button.innerHTML = "time";
        // Set the button style
        button.style.position = "fixed";
        button.style.bottom = "0%";
        button.style.right = "0";
        // button.style.width = "50px";
        // button.style.height = "50px";
        // button.style.borderRadius = "50%";
        // button.style.transform = "translate(0%, 0%)";
        // button.style.backgroundColor = "blue";
        // button.style.color = "white";
        // button.style.border = "none";
        // Add an event listener for the button click
        button.addEventListener("click", function () {
            // Do something when the button is clicked
            let spendingtime = GetTime()
            alert(`大神！您已经在这个网站上学习了${spendingtime}分钟了`);
        });
        // Append the button to the document body
        document.body.appendChild(button);
    }
    makebutton()
    //comment it if you dont need it.
    //showtime()
    //uncomment it if you need.
})();