作者：呐街角-伤_774 | 来源：互联网 | 2023-05-18 23:12
在入口main.js文件中，通过electron.BrowserWindow创建一个窗口，然后加载一个html文件。mainWindownewBrowserWindow({
在入口main.js文件中，通过electron.BrowserWindow创建一个窗口，然后加载一个html文件。
mainWindow = new BrowserWindow({
frame:false,
width: 800,
height: 70});
frame 是否有边框。
width 窗口的宽。
height 窗口的高。
mainWindow.loadURL('file://' + __dirname + '/index2.html');
加载html文件。
mainWindow.setMenuBarVisibility(false);
setMenuBarVisibility 隐藏菜单栏。
让后这个html 就只包含了一个boostrap的进度条。
但是要注意一下，默认情况下，js的解释环境是node环境，这样呢可能会对一些第三方的库加载造成干扰，比如jquery，所以需要先进行一些如下清理:
这段代码最好放到所有js文件加载之前。
主要代码：
main.js 中createWindow的代码 :
function createWindow () {
mainWindow = new BrowserWindow({
frame:false,
width: 800,
height: 70});
mainWindow.loadURL('file://' + __dirname + '/index2.html');
mainWindow.setMenuBarVisibility(false);
mainWindow.on('closed', function() {
mainWindow = null;
});
}
html的代码：
<html>
<head>
<script>
delete window.require;
delete window.exports;
delete window.module;
script>
<meta charset="utf-8">
<title>testtitle>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap/js/jquery.js">script>
<script src="bootstrap/js/bootstrap.min.js">script>
head>
<body>
<div class="progress" style="height: 30px;margin-top: 18px">
<div class="progress-bar" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
<span class="sr-only" style="position: relative">0% 完成span>
div>
div>
<script>
var process = $('.progress-bar');
var text = $('.sr-only');
function setProcess(per) {
process.css({width:per+'%'});
text.text(per+'% 完成');
}
setTimeout(function () {
var per = 0;
setInterval(function () {
setProcess((per++)%100);
},200);
},3000)
script>
body>
html>
结果：
结语：
我的css水平有限，这只是一个思路供大家参考。
京公网安备 11010802041100号