electron从零开始做个倒计时

文章目录

简介与入门
获取时间
倒计时
到了之后会怎样

从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 += 1endTime.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 = tif(d < endTime){var delta = endTime - dcount_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)/1e3if(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`}
//}

此外，由于不需要菜单栏，所以也一并去掉了，在main.js创建窗口后加入下面这个

  Menu.setApplicationMenu(null)