Loading [MathJax]/jax/output/CommonHTML/fonts/TeX/fontdata.js
In [1]:
addr_1 = r"d:\data\test.html"In [9]:
# 创建一个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>
"""In [10]:
# 将HTML代码保存到文件
with open(addr_1, "w") as f:
f.write(text)
print("HTML文件已创建")HTML文件已创建In [11]:
import webbrowser
# 使用 webbrowser 打开 HTML 文件
webbrowser.open(addr_1)Out[11]:
TrueIn [ ]:
这是一个简单的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代码。如果你在使用过程中遇到任何问题，欢迎随时向我提问。祝你使用愉快！
