使用Javascript实现获取网页反馈

,

序言

  在本人的突发奇想之下，网页版本立直麻将点数计算工具初版堂堂发布。与此同时，你也可以在这里体验基础版的使用。虽然有着极其简陋的设计，单一且毫无技术水平的功能，繁杂低效的代码水平。作为本人首个基于HTML,CSS,Javascript的前端项目，本人将在此次项目中所学习到的有关上述内容的使用整理待用，一则方便自己后续的学习与使用，二则望为大佬有抛砖引玉之功效

在HTML网页中插入CSS与JS脚本

  1. 内联方式
    你可以在HTML文件中直接包含JS和CSS代码。这种方式适用于非常小的文件或需要在HTML中动态生成的代码。例如：
1
2
3
4
5
6
7
8
9
10
<head>
    <style>
        /* CSS代码 */
    </style>
</head>
<body>
    <script>
        // JavaScript代码
    </script>
</body>

这种方式的缺点是，如果你有多个页面需要使用相同的CSS或JS代码，就需要在每个页面中复制相同的代码，不便于维护。

  1. 外部链接方式
    这是最常用的方式，允许你在多个页面之间共享相同的JS和CSS文件。使用<link>元素来链接CSS文件，使用<script>元素来链接JS文件。例如：
1
2
3
4
5
6
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <script src="script.js"></script>
</body>

在上述示例中href属性和src属性指定了CSS和JS文件的路径。
rel属性定义了链接元素与当前文档之间的关系，type属性定义了链接资源的媒体类型（MIME 类型）
 
你可以使用相对路径或绝对路径来指定文件的位置。相对路径是相对于HTML文件的位置，而绝对路径是完整的URL路径。
绝对路径：

1
2
<link rel="stylesheet" type="text/css" href="https://example.com/css/styles.css">
<script src="https://example.com/js/script.js"></script>

你还可以使用CDN来引入公共的JS和CSS库，例如jQuery、Bootstrap等。CDN通常提供高速的全球分发，减轻了服务器负载。

实际应用

Ⅰ.选择框与信息获取

 按钮
 
对于这样的一个按钮，你可以按下以代表确认选择，也可以再次按下取消选择
在HTML当中，它的简单代码如下：

1
<input type="checkbox" id="example001">按钮

在这里使用了复选框（checkbox）元素。复选框允许用户选择或取消选择一个选项，并且你可以使用JavaScript来记录用户的选择状态。其中，id代表了其唯一确定的关系
在Javascript当中，如何确定其是否已经被选择呢？

1
2
3
4
5
6
7
8
9
var value001 = 0;
var checkbox001 = document.getElementById("example001");//对应其确定的ID
checkbox001.addEventListener("change", function() {
    if (checkbox001.checked) {
      value001 = 1;//若选中则变量为1
    } else {
      value001 = 0;//若未选中则变量为0
    }
});

通过声明的变量value001的数值，你可以通过后续编程实现数理逻辑的运算

如果你需要一次性操作大量的复选框识别呢？对于本工具而言，以所有一番役种为例，每个复选框在对结果的影响当中是等值的。
在HTML当中，对于一番役种，我们使用class="checkbox-label-1fan"标明其属于的类。与此同时，class属性也可以用于CSS当中进行设计优化
对于前四个一番役种：

1
2
3
4
5
6
7
8
9
10
<label>
    <input type="checkbox" id="riichi" class="checkbox-label-1fan">
        <span class="checkbox-label-1fan">立直</span>
    <input type="checkbox" id="yifa" class="checkbox-label-1fan">
        <span class="checkbox-label-1fan">一发</span>
    <input type="checkbox" id="menqianqingzimo" class="checkbox-label-1fan">
        <span class="checkbox-label-1fan">门前清自摸和</span>
    <input type="checkbox" id="duanyaojiu" class="checkbox-label-1fan">
        <span class="checkbox-label-1fan">断幺九</span>
</label>

虽然其一一对应的id不同，但是我们注意到，其同属于一个类checkbox-label-1fan下。每标记一个复选框，玩家所获得的番数+1

1
2
3
4
5
6
7
8
9
10
var value1fan = 0;
var checkboxes1fan = document.querySelectorAll(".checkbox-label-1fan");//类的名称
checkboxes1fan.forEach(function(checkbox) {
checkbox.addEventListener("change", function() {
      if (checkbox.checked) {
        value1fan++;
      } else {
        value1fan--;
      }
});});

Ⅱ.输入框与信息获取

对于这样的一个输入框，你可以在其中输入你想要的数值
在HTML当中，它的简单代码如下：

1
2
<div class="input-container"><label for="example002">输入框 <input type="number" id="example002"></label></div>

与按钮等HTML元素一样，id代表了其唯一确定的关系
for属性通常用于<label>元素中，用于建立与表单元素之间的关联。当你在<label>元素中使用for属性，并将其值设置为表单元素的id属性的值时，单击<label>元素的文本或标签本身将会触发关联的表单元素。

如何使用JavaScript来获取和记录用户输入的值呢？如示例：

1
2
var InputValue;
InputValue = parseInt(document.getElementById("example002").value)

其中，parseInt()用于确保将其转换成整型以确保是数字

若用户不需要输入任何数值，则默认状态下其值为空。为确保算术运算准确，你可以在JS当中，将其初始值赋值为0

1
document.getElementById("example002").value = 0;

Ⅲ.多重选择项与信息获取

对于如上选择框，你可以在有限多项当中选择一项

用户可以按住Ctrl键（在Windows系统上）或Command键（在Mac系统上）来多选多个选项

对于其在HTML当中的使用：

1
2
3
4
5
6
<select id="example004" name="example004" multiple>//删去multiple属性改为单选
    <option value="01">萝莉</option>
    <option value="02">幼女</option>
    <option value="03">JS</option>
    <option value="04">JK</option>
</select>

在上面的示例中，我们使用<select>元素来创建一个下拉菜单，添加multiple属性允许多选。然后，我们使用<option>元素列出了可供选择的选项，每个选项都有一个value属性，它是在提交表单时将被发送的值，以及显示在下拉菜单中的文本。

在JavaScript中获取用户所选择的数值：

1
2
3
4
5
6
7
8
var selectElement = document.getElementById("example004");
var selectedValue = selectElement.value;
var resultValue;
       
if (selectedValue === "01")
    resultValue = 1;
else if (selectedValue === "02")
    resultValue = 2;

Ⅳ.表格项选择框

20 25 30 40 50

对于这样的一个选择项，我们可以直接点击选择，并且反馈点击的结果。同时，可以通过Javascript直接获取点击数据，并对其加以处理

在HTML当中，我们写入如下内容：

1
2
3
4
5
6
7
8
9
<table id="table1">
    <tr>
        <td data-number="20">20</td>
        <td data-number="25">25</td>
        <td data-number="30">30</td>
        <td data-number="40">40</td>
        <td data-number="50">50</td>
    </tr>
</table>

我们需要CSS规定其格式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.table-container {
    display: flex;
    justify-content: space-between;
}

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

th, td {
    padding: 10px;
    text-align: center;
    cursor: pointer;
}

th:hover, td.selected {
    background-color: #3498db;
    color: white;
}

还需要通过Javascript实现检测点击，反馈点击的结果，以及获取点击数据。其中，table1在这里是使其唯一确定的id

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const table1Cells = document.querySelectorAll('#table1 td');
        
let selectedNumberTable1 = null;

table1Cells.forEach(cell => {
cell.addEventListener('click', () => {
    if (selectedNumberTable1) {
        selectedNumberTable1.classList.remove('selected');
    }
                
    cell.classList.add('selected');
    selectedNumberTable1 = cell;
    const numberValue = parseInt(cell.getAttribute('data-number'));
    });
});

在这里，我们通过变量numberValue获取整型读取的点击数据data-number

Ⅴ.确定按钮

你可以使用如下HTML来构建一个确定按钮：

1
<button onclick="recordInput()">确定</button>

当按下按钮后，将执行recordInput()函数

在Javascript当中：

1
2
3
4
function recordInput()
{
    /*执行函数*/
}

以执行函数下的指令

Ⅵ.JS数理逻辑的运算

  对于立直麻将的符数，求和后对结果进行切上处理，即向上舍入，即个位不是零，则个位变成零，整体加10
  与此同时，对于点数，由于日麻点棒的最低计算单位为100，当计算得出总支付点数后，还需要进行切上处理，即十位非零时置为零，百位加一

在Javascript当中，对于算出的单位点数get_a，庄家自摸，子家每人支付2a的点数，并进行切上处理：

1
Math.ceil((2*parseInt(get_a))/100)*100

parseInt()用于确保将其转换成整型以确保是数字。在Javascript当中，var作为动态类型，你可可以进行诸如字符串的运算

1
yiman+"倍役满"

Ⅶ.实现网页信息反馈

在HTML当中，你可以使用如下方式，表示接下来需要显示的内容：

1
<span id="example005">&emsp;</span>

在Javascript当中，你可以使用如下方式，显示在HTML页面当中：

1
2
3
document.getElementById("example005").textContent = "测试";//文字
document.getElementById("example005").textContent = parseInt(fan);//数字
document.getElementById("example005").innerHTML = "&emsp;";//HTML实体

JS脚本的部分语法使用

var与let类型 ——From ChatGPT

在JavaScript中，let和var都用于声明变量，但它们在变量作用域和生命周期方面有一些重要的区别。

  1. let：

    • let是ECMAScript 6（ES6）引入的关键字。
    • 声明的变量使用let具有块级作用域，这意味着它们只在包含它们的代码块（通常是 {} 中）内可见。
    • 使用let声明的变量不会被提升（hoisting），在声明之前访问它们会导致引发暂时性死区（Temporal Dead Zone，TDZ）错误。
    • let声明的变量可以被重新赋值。
    1
    2
    3
    4
    5
    6
    let x = 10;
    if (true) {
      let x = 20; // 在此块级作用域内重新声明 x
      console.log(x); // 输出 20
    }
    console.log(x); // 输出 10

  2. var：

    • var是早期版本的JavaScript中使用的关键字。
    • 使用var声明的变量具有函数级作用域，而不是块级作用域，这意味着它们在包含它们的函数内可见。
    • var声明的变量会被提升，这意味着变量的声明会被提升到其所在函数或全局作用域的顶部。
    • var声明的变量可以被重新赋值。
    1
    2
    3
    4
    5
    6
    var y = 10;
    if (true) {
      var y = 20; // 在函数级作用域内重新赋值 y
      console.log(y); // 输出 20
    }
    console.log(y); // 输出 20，而不是 10

总之，let和var都用于声明变量，但由于let具有块级作用域、不会被提升以及更严格的变量处理，它通常被认为是更安全和更可预测的选项，尤其是在现代JavaScript中。因此，在编写新代码时，通常建议使用let而不是var。

立直麻将点数计算相关

参考萌娘百科/日本麻将/素点

单位点数(a) = 符数 × 2(2+番数)

大于等于5番时，单位点数固定：

番数 名称 a
5番 满贯 2000
6~7番 跳满 3000
8~10番 倍满 4000
11~12番 三倍满 6000
13番 役满 8000

根据身份与和牌方式的不同，和牌时以a为基准进行如下赔付结算：

身份 点和 自摸
亲 放铳者支付6a 每人2a
子 放铳者支付4a 亲支付2a，子支付a

由于日麻点棒的最低计算单位为100，当计算得出总支付点数后，还需要进行切上处理，即十位非零时置为零，百位加一