html计算器_这你敢信，用python在前端页面写一个计算器

最新推荐文章于 2024-05-01 15:14:22 发布

weixin_39628339

最新推荐文章于 2024-05-01 15:14:22 发布

阅读量261

点赞数

1. brython

Brython(Browser Python)是在浏览器中运行的Python 3的实现，具有 DOM 元素和事件的接口,它的目标是代替javascript。虽然我不认为brython可以替代javascript在前端交互地位，但是，对于并不复杂的页面功能，如果你对学习javascript并不感兴趣，那么可以考虑使用brython。这样，前端后端都可以统一为python语言，应该可以减少一些学习成本。本文将介绍如何用brython在前端实现一个简易的计算器

2. 先制作出网页

不管前端技术如何变革，页面仍然要使用html语言来实现，我们先来制作一个简单的页面

<html lang="en"><head>    <meta charset="UTF-8">    <title>计算器title>head><style>    *{        font-family: sans-serif;        font-weight: normal;        font-size: 1.1em;    }    td{        background-color: #ccc;        padding: 10px 30px 10px 30px;        border-radius: 0.2em;        text-align: center;        cursor: default;    }    #result{        border-color: #000;        border-width: 1px;        border-style: solid;        padding: 10px 30px 10px 30px;        text-align: right;    }style><body>    <table>        <tr>            <th colspan="3">                <div id="result">0div>            th>            <td>                C            td>        tr>        <tr>            <td>7td>            <td>8td>            <td>9td>            <td>/td>        tr>        <tr>            <td>4td>            <td>5td>            <td>6td>            <td>*td>        tr>        <tr>            <td>1td>            <td>2td>            <td>3td>            <td>-td>        tr>        <tr>            <td>0td>            <td>.td>            <td>=td>            <td>+td>        tr>    table>body>html>

页面显示效果如下

3. 增加brython代码

需要进行三处改动

3.1 引入brython.min.js

使用brython无需进行安装，只需要在页面里引入它的引擎即可

<head>    <meta charset="UTF-8">    <title>计算器title>    <script type="text/javascript"        src="https://cdn.jsdelivr.net/npm/brython@3.8.9/brython.min.js">script>head>