Electron的第二个程序学生点名

xiaohai 2021-05-12 17:21:46 共2122人围观 标签： Electron 
简介本文主要开发一个实现学生点名的小功能。

本文主要编写一个学生点名程序，界面有一个按钮，点击就可以出现一个学生的名字。

目录结构介绍：

- index.html
- index.js
- main.js
- name.json
- package.json

首先介绍下，新版本的 electron 在渲染进程中默认无法使用 node，要想在项目中可以使用node必须要在main.js中进行以下配置：

...
app.on('ready', () => {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 400,
        //添加如下代码，新窗口中全量使用node.js
        webPreferences: {
            nodeIntegration: true,
        }
    })

    mainWindow.loadFile('index.html')

    mainWindow.on('closed', () => {
        mainWindow = null
    })

})
...
准备数据文件(name.json)

该文件主要存储学生名称的列表字符串，内容如下

["张三","李四","王五","赵六"]
实现界面(index.html)

界面包含一个按钮和一个学生名称展示区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo1</title>
</head>
<body>
    <div style='text-align:center;margin-top:109px;'>
    <p>随机点名 <button id="click">点击点名</button></p>
    <p id="name" style="font-size:25px;font-weight:blod;color:red;"></p>
    </div>
</body>
</html>
实现逻辑(新建index.js)

里面主要实现点击事件和读取文件的操作

var fs = require('fs')
window.onload=function(){
    var btn = this.document.querySelector('#click')
    var name = this.document.querySelector("#name")
    btn.onclick = function(){
        fs.readFile('name.json',(err,data)=>{
            arr = JSON.parse(data)
            name.innerHTML = arr[Math.floor((Math.random()*arr.length))]
        })
    }
}
引入index.js

在index.html中引入index.js

<script src="index.js"></script>
运行查看效果
electron .

图片alt

相同类型文章

热门标签

每日一句

    爱情只在深刻的、神秘的直观世界中才能产生，才能存在，生儿育女不是爱情本身的事。

    ——索洛维约夫

今日排行

  • Electron页面跳转、浏览器打开链接和打开新窗口

    Electron页面跳转、浏览器打开链接和打开新窗口

  • Docker编译出现:temporary error (try again later)

    Docker编译镜像出现：fetch http://dl-cdn.alpinelinux.org/alpine/v3.12/main/x86_64/APKINDEX.tar.gz ERROR: http://dl-cdn.alpinelinux.org/alpine/v3.12/main: temporary error (try again later) WARNING: Ignoring APKINDEX.2c4ac24e.tar.gz: No such file or directory问题

  • 数轴上两点间的距离公式及中点公式

    数轴上两点间的距离公式及中点公式

  • 程序员转行当数学老师的感受

    一个月很快，转瞬即逝，步入教师行业已经一个月，内心有很多感悟，有时候真是没有时间，所以不能将种种感悟都留于此，借今晚的时间，谈谈这一月教师路的各种感受吧！其实说实话，教师真的比想象中的难...，我是过来人。

  • 数学家——阿基米德

    阿基米德（公元前287年—公元前212年），伟大的古希腊哲学家、百科式科学家、数学家、物理学家、力学家，静态力学和流体静力学的奠基人，并且享有“力学之父”的美称，阿基米德和高斯、牛顿并列为世界三大数学家。阿基米德曾说过：“给我一个支点，我就能撬起整个地球。

点击排行

友情链接