前言：
现时你们对“python用html做界面”都比较讲究，同学们都想要知道一些“python用html做界面”的相关内容。那么小编同时在网上收集了一些有关“python用html做界面””的相关内容，希望我们能喜欢，同学们一起来了解一下吧！在本文中，我们将使用一个特殊的库 eel，为 python 脚本创建出色的图形用户界面 （GUI）。创建图形用户界面，有很多库可以选择，如 tkinter、wxPython 等。eel 是一个允许我们利用 Web 技术，如 HTML、CSS、JS，来构建更漂亮、更现代的用户界面。
更令人兴奋的是，eel 允许我们从 javascript 运行 python 函数，反之亦然，因此，我们可以将 python 和 javascript 完美的结合在一起。
安装 eel
pip install eel
使用 eel
使用 eel 创建图形用户界面，你至少要准备两个文件，一个 Python 脚本文件，一个 Html 网页文件。
文件内容及结构如下所示：
|--app.py <-- Python 主程序文件|--web <-- web 文件夹 |--index.html <-- web文件夹下的html文件
# app.py 文件import eeleel.init('web') # 初始化web文件夹eel.start('index.html') # 启动页面<!- index.html 文件 -><!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>APP标题</title> <script type="text/javascript" src="/eel.js"></script> </head> <body> APP正文 </body></html>
特别注意，Html 文件中要引入 eel.js，不用管实际的JS脚本文件具体放在哪个路径。
<script type="text/javascript" src="/eel.js"></script>
运行 app.py 文件前，请安装谷歌浏览器（Google Chrome），eel 可以和谷歌浏览器完美结合。
深入 eel
以上示例只实现了一个空白的窗口，我们尝试复杂一点的应用实现某种功能，添加按钮，定义函数，美化 Html。
文件结构：
|--app.py <-- Python 主程序文件|--web <-- web 文件夹 |--index.html <-- web文件夹下的html文件 |--css <-- css 文件夹 |--main.css <-- css文件夹下的的样式文件 |--js <-- js 文件夹 |--main.js <-- js文件夹下的的脚本文件
# app.py 文件import eelimport randomfrom datetime import datetimeeel.init('web')# 定义函数@eel.exposedef get_random_name(): eel.prompt_alerts('Random name')@eel.exposedef get_random_number(): eel.prompt_alerts(random.randint(1, 100))@eel.exposedef get_date(): eel.prompt_alerts(datetime.now().strftime("%d/%m/%Y %H:%M:%S"))@eel.exposedef get_ip(): eel.prompt_alerts('127.0.0.1')eel.start('index.html', size= (800,450)) #定义窗口尺寸<!- index.html 文件 -><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Eel 示例</title> <link rel="stylesheet" href="css/main.css"> <script type="text/javascript" src="/eel.js"></script> </head><body> <div class="topnav"> <a class="active" id="button-name">显示名字</a> <a id="button-number">随机数</a> <a id="button-date">日期时间</a> <a id="button-ip">显示 ip</a> </div> </body><script src="js/main.js"></script></html>
/* css 文件 */.topnav { background-color: #333; overflow: hidden; }.topnav a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; }.topnav a:hover { background-color: #ddd; color: black; }/* js 文件*/document.getElementById("button-name").addEventListener("click", ()=>{eel.get_random_name()}, false);document.getElementById("button-number").addEventListener("click", ()=>{eel.get_random_number()}, false);document.getElementById("button-date").addEventListener("click", ()=>{eel.get_date()}, false);document.getElementById("button-ip").addEventListener("click", ()=>{eel.get_ip()}, false);eel.expose(prompt_alerts);function prompt_alerts(description) { alert(description);}运行结果：
更多 eel 功能请参考相应官方网站。eel 实际上是在本机建立一个简易 web 服务器，调用谷歌浏览器并打开相应网页（），我们可以利用 Python、Html、JavaScript、css 制作功能丰富、漂亮的图形用户界面。
❝
文章创作不易，如果您喜欢这篇文章，请关注、点赞并分享给朋友。如有意见和建议，请在评论中反馈。
❞
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #python用html做界面
