electron从零开始做个倒计时

微小冷

已于 2022-05-03 13:15:13 修改

阅读量1.6k

点赞数 4

分类专栏：前端文章标签： electron nodejs node.js javascript 前端

于 2022-04-30 12:25:13 首次发布

本文链接：https://blog.csdn.net/m0_37816922/article/details/124510990

版权

前端专栏收录该内容

7 篇文章

订阅专栏

文章目录

从0开始，通过electron写一个倒计时工具，其最终效果为

在这里插入图片描述
源码地址：从零开始，用electron做一个倒计时工具

简介与入门

electron-fiddle自带了一个Hello world项目，按F5启动程序，就会出现如下窗口。

在这里插入图片描述

倒计时程序可以在此基础上进行修改，而丐版的倒计时，其实只需要把Hello World变成不断变化的时间，而将下面一小行字改成当前的时间信息。

在默认项目中，共有5个文件：

index.html：很显然，是一个和布局相关的文件
style.css：html对应的渲染文件
main.js：看到main，就能猜到是入口函数

剩下的两个文件，render.js是空的，说明没有也行；preload.js只有一个监听函数，window.addEventListener，而监听的内容是DOMContentLoaded，即内容加载时。

所以，在制作丐版倒计时的时候，只需更改index, main.js以及preload.js。为了缕清编程的思路，可以先修改一下html文件，

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link href="./styles.css" rel="stylesheet">
    <title>倒计时</title>
  </head>
  <body>
    <h1 align="center" >倒计时</h1>
    <p align="right">当前版本为
    <span id="version"></span>.
    </p> 
  </body>
</html>

由于version span是个空的，所以需要更改preload.js文件，将这个span替换为electron的版本，其中DOMContentLoaded表示当内容加载时触发后面的函数。

window.addEventListener('DOMContentLoaded', () => {
  const element = document.getElementById('version')
  element.innerText = process.versions['electron']
})

运行程序，可得到

在这里插入图片描述

接下来，就开始写我们的业务逻辑。

获取时间

倒计时的前提是先获取当前时间，众所周知在js中Date.parse就可以实现。

故而将html中的版本改为时间，然后修改preload.js，

window.addEventListener('DOMContentLoaded', () => {
  const element = document.getElementById('version')
  var d = new Date()
  element.innerText = d.toString()
})

但这样做有一个问题，由于这个函数是在内容加载时运行的，所以显示的时间并不会发生变化。

为了让时间实时变化，可以使用定时器setInterval，

window.addEventListener('DOMContentLoaded', () => {
  const element = document.getElementById('version')
  setInterval(clock,10,element)
})

function clock(element){
  var d = new Date()
  element.innerText = d.toString()
}

其中setInterval输入的三项分别表示将要执行的函数，间隔时间，以及clock函数传入的参数。

效果为

在这里插入图片描述

这个时间的显示效果太难看了，所以将其改成更规整的方式

function clock(element){
  var d = new Date()
  var t = `${d.getFullYear()}-${d.getMonth()}-${d.getDay()}` + 
    ` ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}.`+
    d.getMilliseconds().toString().padStart(3,"0")
  element.innerText = t
}

其中，${}可将括号中的数值转为字符串，其效果为

在这里插入图片描述

倒计时

接下来，就可以进行倒计时了，既然是倒计时，就必须有一个截止日期。在这里，把截止日期选为5月1日下午5点1分，也只有劳动节的这个时间点，可以悠然地看倒计时了。

其初始化方法如下

function initEndTime(year){
  var endTime = new Date(year,5,1,17,1,0,0)
  var d = new Date() //此为当前时间
  while(endTime<d){
    year += 1
    endTime.setFullYear(year)
  }
  return endTime
}

其中，日期类型对运算符进行了重载，故可直接比较大小，当然也可以直接相减，相减结果的单位是毫秒。

从而将preload.js中其他代码改为

window.addEventListener('DOMContentLoaded', () => {
  const endTime = initEndTime(2000)
  count_down.innerText = endTime.toString()
  setInterval(clock,10, document, endTime)
})

function clock(doc, endTime){
  const now_time = doc.getElementById('now_time')
  const count_down = doc.getElementById("count_down")

  var d = new Date()
  var t = `${d.getFullYear()}-${d.getMonth()}-${d.getDay()}` + 
    ` ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}.`+
    d.getMilliseconds().toString().padStart(3,"0")
  now_time.innerText = t

  if(d < endTime){
    var delta = endTime - d
    count_down.innerText = `${delta/1000}`
  }
}

同时，稍微修改一下html中body的内容

<h1 align="center" id="count_down"></h1>
<p align="right">当前时间为
  <span id="now_time"></span>
</p>

效果为

在这里插入图片描述

到了之后会怎样

既然是倒计时，那么当到达预定时间之后，总要给出一点变化，这里的变化就是显示一个大大的五一。

在这里插入图片描述

其方法也十分简单，即

//function clock(doc, endTime){
  //前面的代码不用改

  var delta = (endTime - d)/1e3
  if(delta > 0){
    count_down.innerText = `${delta.toFixed(3)}`
  }
  else if(delta < -5){
    endTime.setFullYear(endTime.getFullYear()+1)
    count_down.style.color = "black"
    count_down.style.fontSize = "25px"
  }
  else{
    count_down.innerText = `五·一`
    count_down.style.color = "red"
    var fSize = (-delta*20).toFixed(0)
    count_down.style.fontSize = `${fSize}px`
  }
//}