☰

轻提示

轻提示，友好提示

目前为 2024-03-20 提交的版本。查看 最新版本。

此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.cn-greasyfork.org/scripts/490343/1346125/%E8%BD%BB%E6%8F%90%E7%A4%BA.js 

  1. // ==UserScript==
  2. // @name         轻提示
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0.0
  5. // @description  轻提示，友好提示
  6. // @author       Zosah
  7. // ==/UserScript==
  8.  
  9. // 创建样式
  10. const toastHandler = {
  11.     create: function() {
  12.         var style = document.createElement('style');
  13.         style.innerHTML = `
  14. @keyframes show {
  15.     0% {
  16.         opacity: 0;
  17.     }
  18.     100% {
  19.         opacity: 1;
  20.     }
  21. }
  22.  
  23. @keyframes hide {
  24.     0% {
  25.         opacity: 1;
  26.     }
  27.     100% {
  28.         opacity: 0;
  29.     }
  30. }
  31.  
  32. .toast_box {
  33.     position: absolute;
  34.     bottom: 50%;
  35.     left: 50%;
  36.     z-index: 10;
  37.     transform: translate(-50%, -50%);
  38.     display: none;
  39. }
  40.  
  41. .toast_box p {
  42.     box-sizing: border-box;
  43.     padding: 10px 20px;
  44.     width: max-content;
  45.     background: #707070;
  46.     color: #fff;
  47.     font-size: 16px;
  48.     text-align: center;
  49.     border-radius: 6px;
  50.     opacity: 0.8;
  51. }
  52.  
  53. .toliet {
  54.     margin: 0 auto;
  55. }`;
  56.  
  57.         // 将样式添加到 head 元素中
  58.         document.head.appendChild(style);
  59.  
  60.         // 创建提示框
  61.         var toastBox = document.createElement('div');
  62.         toastBox.className = 'toast_box';
  63.         toastBox.style.display = 'none';
  64.  
  65.         var toastText = document.createElement('p');
  66.         toastText.id = 'toast';
  67.         toastBox.appendChild(toastText);
  68.  
  69.         // 将提示框添加到 body 元素中
  70.         document.body.appendChild(toastBox);
  71.     },
  72.     showToast: function (text, time) {
  73.         var toast = document.getElementById('toast');
  74.         var toastBox = document.getElementsByClassName('toast_box')[0];
  75.         toast.innerHTML = text;
  76.         toastBox.style.animation = 'show 1.5s';
  77.         toastBox.style.display = 'inline-block';
  78.         setTimeout(function() {
  79.             toastBox.style.animation = 'hide 1.5s';
  80.             setTimeout(function() {
  81.                 toastBox.style.display = 'none';
  82.             }, 1400);
  83.         }, time);
  84.     }
  85. }
  86.  
  87. toastHandler.create()