0
点赞
收藏
分享

微信扫一扫

html 设计一个网页 包含一个2*2的表格 均可输入数字 还包含一个方框 里面展示 第一个表格内所有数字相加的结果

人间四月天i 2023-10-19 阅读 46

Loading [MathJax]/jax/output/CommonHTML/fonts/TeX/fontdata.js

addr_1 = r"d:\data\test.html"

# 创建一个HTML5文档
text = """
<!DOCTYPE html>
<html>
<head>
    <title>数字相加</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<h2>输入数字:</h2>

<table id="myTable">
  <tr>
    <td><input type="number" class="numInput"></td>
    <td><input type="number" class="numInput"></td>
  </tr>
  <tr>
    <td><input type="number" class="numInput"></td>
    <td><input type="number" class="numInput"></td>
  </tr>
</table>

<h2>总和:</h2>
<p id="sum">0</p>

<script>
$(document).ready(function(){
  $(".numInput").on("input", function(){
    var sum = 0;
    $(".numInput").each(function(){
      sum += Number($(this).val());
    });
    $("#sum").text(sum);
  });
});
</script>

</body>
</html>

"""

# 将HTML代码保存到文件
with open(addr_1, "w") as f:
    f.write(text)

print("HTML文件已创建")

HTML文件已创建

import webbrowser

# 使用 webbrowser 打开 HTML 文件
webbrowser.open(addr_1)

True

这是一个简单的HTML页面,包含一个2*2的表格,每个单元格都可以输入数字。还有一个显示框,用于显示表格中所有数字的总和。

```html
<!DOCTYPE html>
<html>
<head>
    <title>数字相加</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<h2>输入数字:</h2>

<table id="myTable">
  <tr>
    <td><input type="number" class="numInput"></td>
    <td><input type="number" class="numInput"></td>
  </tr>
  <tr>
    <td><input type="number" class="numInput"></td>
    <td><input type="number" class="numInput"></td>
  </tr>
</table>

<h2>总和:</h2>
<p id="sum">0</p>

<script>
$(document).ready(function(){
  $(".numInput").on("input", function(){
    var sum = 0;
    $(".numInput").each(function(){
      sum += Number($(this).val());
    });
    $("#sum").text(sum);
  });
});
</script>

</body>
</html>
```

这个页面使用了jQuery库来处理输入事件和计算总和。当你在任何一个输入框中输入数字时,它会自动计算所有输入框中的数字总和,并在页面下方的显示框中显示出来。请注意,你需要在支持JavaScript的浏览器中打开此页面才能看到效果。如果你想在本地使用这个页面,你需要确保你的浏览器允许运行JavaScript代码。如果你在使用过程中遇到任何问题,欢迎随时向我提问。祝你使用愉快!

举报

相关推荐

0 条评论