如何定期在桌面屏幕上闪烁消息（或弹出窗口）

Question

我正在尝试制作一个应用程序，通过每 15 秒在屏幕中间呈现一个小的闪烁动画来提醒我眨眼，无论我打开了什么（我有干眼症，并且当我眨眼时眨眼不够） '我在电脑上）。我的手机上已经安装了一个类似的应用程序，但找不到桌面应用程序，所以我决定制作一个。我使用的是 Windows 10。

我尝试过使用 Electron，但目前只能找到 api 来制作显示在右下角的常规 Windows 通知。

我已经下载了一个名为 EyeLeo 的应用程序，它的功能与我想要实现的功能类似，所以我知道它一定是可能的，尽管它每 5 分钟才会闪烁一次消息（下图）

有人有什么想法吗？

编辑： 我不能使用警报框，因为它非常大且具有阻碍性，并且据我所知不会自行消失就仅在屏幕上闪烁 html 元素（又名自定义警报）而言，我不确定如何让它出现在我打开的任何东西上。例如，如果我的浏览器打开并且应用程序在后台，我如何让元素出现在我的浏览器窗口上？这就是困难

Answer 1

你可以像这样使用带超时和间隔的 Electronjs

const { app, BrowserWindow } = require('electron')

app.whenReady().then(() => {
  const win = new BrowserWindow({
    width: 300,
    height: 220,
    frame: false,
    show: false
  })

  win.once('ready-to-show', () => {
    setInterval(() => win.show(), 15000) // 15s for show
  })

  win.on('show', () => {
    setTimeout(() => win.hide(), 3000) // 3s for hide
  })

  win.loadFile('index.html')
})

Answer 2

您可以为此设置一个异步间隔：

// Define the notification function : 
function blink() {
  // Either add an html message in your page or just alert a message
  // alert("Blink");

  // Create a div for the blink-message (with absolute position at top)
  var alertBox = document.createElement('div');
  alertBox.innerText = "Reminder: Please Blink";
  alertBox.style.zIndex = "99999";
  alertBox.style.position = "fixed";
  alertBox.style.width = "100%";
  alertBox.style.top = "0px";
  //alertBox.style.left = "1%";
  alertBox.style.padding = "5px";
  alertBox.style.background = "#242424";
  alertBox.style.color = "white";
  alertBox.style.border = "1px solid white";
  alertBox.style.boxShadow = "5px 5px 5px 5px rgb(0,0,0,0.2)";
  
  // Append this div to the document body
  document.body.appendChild(alertBox);

  // Remove the notification msg after 2 sec
  setTimeout( function(){ document.body.removeChild(alertBox); }, 2000);
}

// Set an interval to alert every 10 seconds:
var blinkInterval = setInterval( blink, 10000);

// To unset the interval, use clearInterval : 
clearInterval(blinkInterval);