使用 Github pages 发布您的计算器网站（初学者级别）

2025年3月17日 | 阅读 7 分钟

Github Pages 是 Github 提供的一项 Web 托管服务，允许开发者轻松地从 Github 仓库托管/发布他们的网站。这是一项免费服务，它还支持自定义域名、SSL 加密以及许多其他高级功能。对于想要快速创建网站而无需购买 Web 托管服务的开发者来说，这是一个非常好的选择。

它对于使用 HTML、CSS 和 JavaScript 开发各种网站的学生来说也非常有用。一旦我们托管了网站，其他开发者或用户就可以通过链接访问该网站，我们可以将该链接作为已完成项目的参考。本教程将通过一个计算器网页的示例，说明在 Github 上发布自己网站是多么简单，该示例网页也有 JavaTpoint 上的教程。

这是使用 HTML、JS 和 CSS 利用 eval() 函数编写的简单计算器代码

这是一个简单的 HTML 文件，其中包含一个具有基本算术运算（加、减、乘、除）的计算器。该计算器还有括号、小数点、清除（C）和退格（B）按钮。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calci</title>
    <script type = text/javascript></script>
    <style></style>
</head>
<body>
    <center>
   <h1>Simple Calculator</h1>
   <table>
       <tr><input id = "display"></tr>
       <tr><td> <button onclick = fun(0)>0</button></td>
           <td> <button onclick = fun("(")>(</button></td>
           <td> <button onclick = fun(")")>)</button></td>
           <td></td>
           <td> <button onclick = C()>C</button></td>
           <td> <button onclick = B()>B</button></td>
       </tr>
       <tr><td> <button onclick = fun(7)>7</button></td>
           <td> <button onclick = fun(8)>8</button></td>
           <td> <button onclick = fun(9)>9</button></td>
           <td></td>
           <td> <button onclick = fun("+")>+</button></td>
           <td> <button onclick = fun("-")>-</button></td>
       </tr>
       <tr><td> <button onclick = fun(6)>6</button></td>
           <td> <button onclick = fun(5)>5</button></td>
           <td> <button onclick = fun(4)>4</button></td>
           <td></td>
           <td><button onclick = fun("*")>*</button></td>
            <td><button onclick = fun("/")>/</button></td>
       </tr>
       <tr><td> <button onclick = fun(1)>1</button></td>
           <td> <button onclick = fun(2)>2</button></td>
           <td> <button onclick = fun(3)>3</button></td>
           <td></td>
           <td> <button onclick = fun(".")>.</button></td>
           <td> <button onclick = res()>=</button></td>
       </tr>
    </table>
    </center>
</body>
</html>
<script type = text/javascript>
        function fun(a)
        {
            document.getElementById("display").value+=a;
        }
        function C()
        {
            document.getElementById("display").value = "";
        }
        function B()
        {
            var y = document.getElementById("display").value;
            document.getElementById("display").value = y.slice(0, y.length-1);
        }
        function res()
        { 
            var a = document.getElementById("display").value;
            document.getElementById("display").value=a+"="+eval(a);
        }
    </script>
<style>
        table {
            background-color: brown;
            border: 1px solid black;
            table-layout: fixed;
            border: 1px solid black;
            border-spacing: 10px;
            box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
            border-radius: 10px;
        }
        button{
            padding: 16px;
            border-radius: 8px;
        }
        button:hover{
            background-color: black;
            color: white; 
            
        }
        button:active{
            transform: scale(0.98);
            box-shadow:3px 2px 22px 1px rgba(0, 0, 0, 0.24);
        }
        #display{
            width:290px;
            height:40px;
            margin: 10px 0;
            box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
            border-radius: 10px;
        }
        #display:hover{
            background-color: black;
            color: white;
        }
        body{
            background-color: black;
        }
        h1{
            color: white;
        }
        body:hover{
            background-color: floralwhite;
        }
         body:hover h1{
            color: black;
            
        }
    </style>

计算器执行后的外观如下：

Publishing your Calculator website using Github pages (Beginner level)

关于代码

HTML

head 部分包含页面标题、字符集和视口。body 部分包含一个居中的 h1 标题“Simple Calculator”和一个包含计算器按钮的 table。表格的第一行包含一个 id 为“display”的文本输入字段，用于向用户显示他们输入的操作。
表格有四行，每行包含六个按钮。第一行有三个按钮，分别是 0、开括号和闭括号，后面是一个空白单元格，以及清除和退格两个按钮。第二行有三个按钮，分别是数字 7、8 和 9，后面是一个空白单元格，以及加法和减法两个按钮。第三行有三个按钮，分别是数字 4、5 和 6，后面是一个空白单元格，以及乘法和除法两个按钮。最后一行有三个按钮，分别是数字 1、2 和 3，后面是一个空白单元格，以及小数点和等号两个按钮。

CSS

HTML 文件中的 style 部分包含 CSS 规则，用于定义计算器的外观。表格具有棕色背景、黑色边框和 box-shadow 效果。按钮的内边距为 16 像素，圆角为 8 像素。
当用户将鼠标悬停在按钮上时，按钮的背景颜色将变为黑色，文本颜色将变为白色。当用户单击按钮时，按钮会缩小 2%，并显示 box-shadow 效果。
输入字段的宽度为 290 像素，高度为 40 像素，具有 box-shadow 效果，圆角为 10 像素。当用户将鼠标悬停在输入字段上时，输入字段的背景颜色将变为黑色，文本颜色将变为白色。
HTML 文件的 body 部分具有黑色背景，而标题则为白色。当用户将鼠标悬停在 body 上时，背景颜色将变为花白色，而标题将变为黑色。

JavaScript

此计算器中的 JavaScript 代码包含四个函数：fun()、C()、B() 和 res()。
每当单击一个按钮时，都会调用 **fun()** 函数，并将按钮的值作为参数 a 传递。此函数将按钮的值附加到计算器显示区域当前显示的值后面。
单击“C”按钮时会调用 **C()** 函数，该函数通过将显示区域的值设置为空字符串来清除显示区域。
单击“B”按钮时会调用 **B()** 函数，该函数会从显示区域删除最后一个字符。此函数获取显示区域的当前值，使用 slice() 方法删除最后一个字符，然后将新值设置回显示区域。
单击“=”按钮时会调用 **res()** 函数，该函数会计算显示区域中输入的表达式并显示结果。此函数获取显示区域的当前值，使用 eval() 函数附加计算表达式的结果，然后将新值设置回显示区域。

关于我们要发布的网站

请注意，JS 和 CSS 没有写在外部文件中。我们只有一个包含 HTML、CSS 和 JS 的文件。
如果您有外部文件，请确保代码正在工作，并且所有链接都已添加到 HTML 文件中，确认执行情况并确保代码正常工作。
即使您在代码中遇到问题，也可以从 Github 上的开发者那里获得帮助。

现在，我们已经完成了计算器的编码部分。请注意，由于安全问题，使用 eval() 不是最佳实践。还有其他方法/算法可以用来构建计算器。这只是一个简单的示例，旨在让您理解 Github Pages 中的发布过程。

Github Pages

这是 Github 提供的 Web 托管服务。我们可以直接使用 Github 仓库托管静态网站、博客，包括文档，而无需选择其他付费选项。它提供了各种功能，例如 Jekyll、Hugo 和 Gatsby 等静态站点生成器。

我们可以使用网站内置的编辑器来制作自定义域名、布局、颜色、主题和内容。

第一步是创建一个 Github 个人资料
打开 github.com 并创建一个帐户。
如果您是学生，Github 提供了许多免费订阅机会，您可以查看一下。

避免仓库历史记录。创建帐户后，仓库将为空。现在，让我们开始发布

将您的代码文件重命名为 index.html
如果您有多个文件，请将 html 文件重命名为 index.html
确保所有外部文件都已正确链接。
进入 Repositories 部分，然后单击 New。
输入仓库名称等详细信息，如果想与他人共享，请将其设为 public，这样每个人都可以通过链接访问该网站。
添加 README 文件始终是最佳实践。选中 Add a README file 的复选框。
README 文件是对网站用途和功能的简单总结。
现在正在创建仓库，单击编辑选项并编辑 README 文件以添加网站的描述。

我们的 README 文件
您所做的任何更改都需要单击 commit changes 才能保存。否则，更改将不会被执行。将来，我们可能会找到更多更新，并且我们可能会多次更改代码和文档，因此，我们需要提供一个小标题来描述您所做的更改。
现在，是时候上传实际代码了。单击 add file 并上传我们创建的 index.html 文件，不要忘记提交更改。

提交
转到 settings，然后在左侧导航菜单中单击 Pages。从 Branch 下拉菜单中选择 main。使用 branch 功能，我们可以在不干扰原始代码的情况下对网站进行更改，方法是创建不同的分支。此功能有助于在团队成员之间划分项目工作，然后我们可以将分支合并到根目录。
单击 save
最多 5 分钟后，您将收到一个链接，表明网站已上线。