1、在网页输出金字塔; 2、在网页中以表格的方式打印九九乘法表; 3、在网页中向表单中输入三个整数a(如25)、b(如31)和c(如28),a表示红、白球共25个,b表示白、黑球共31个,c表示红、黑球共28个,通过程序计算并在网页输出这三种球各有多少个。
时间: 2024-12-24 20:33:32 浏览: 12
在网页上展示金字塔和九九乘法表通常会涉及到HTML、CSS和JavaScript的结合使用。
1. **金字塔**:可以使用HTML的`<ul>`元素创建一个无序列表,并利用递归函数生成嵌套的列表项。例如,每个层级的开始标签可能是`<li>`,然后每下降一层就添加一个`<ul>`和更多的`<li>`。CSS可以用于调整样式使其看起来像金字塔形状。
```html
<ul class="pyramid">
<li>层级1</li>
<li><ul>
<li>层级2</li>
<li><ul>
<li>...</li>
</ul></li>
<!-- 更多层级 -->
</ul></li>
</ul>
```
```css
.pyramid li {
position: relative;
padding-left: 20px;
}
.pyramid ul:before {
content: '';
display: block;
position: absolute;
top: 0;
left: -17px; /* 需要计算得出 */
height: 100%;
width: 1px;
}
```
2. **九九乘法表**:同样可以用HTML和CSS创建一个表格。这里是一个简单的例子:
```html
<table id="multiplication-table">
<tr>
<th></th>
<th>1</th>
<th>2</th>
<!-- ...直到9 -->
</tr>
<!-- 类似地为每一行添加列 -->
</table>
<script>
// JavaScript填充表格内容
for (let i = 1; i <= 9; i++) {
let row = document.createElement('tr');
for (let j = 1; j <= 9; j++) {
let cell = document.createElement('td');
cell.textContent = `${i} * ${j} = ${i*j}`;
row.appendChild(cell);
}
document.getElementById('multiplication-table').appendChild(row);
}
</script>
```
3. **计算球的数量**:这个需求更偏向于服务器端处理,因为你需要接收用户输入并进行计算。使用一种后端语言比如PHP、Python(Django或Flask框架)、Node.js等,配合前端的表单提交事件。以下是使用JavaScript做简单演示的部分代码(假设后端处理已存在):
```javascript
<form id="ball-count-form">
<input type="number" name="red-white" id="red-white" value="25">
<input type="number" name="white-black" id="white-black" value="31">
<input type="number" name="red-black" id="red-black" value="28">
<button type="submit">计算</button>
</form>
<script>
document.getElementById('ball-count-form').addEventListener('submit', function(e) {
e.preventDefault();
const a = parseInt(document.getElementById('red-white').value);
const b = parseInt(document.getElementById('white-black').value);
const c = parseInt(document.getElementById('red-black').value);
// 异步发送请求到服务器获取结果
fetch('/calculate-balls', {method: 'POST', body: JSON.stringify({a, b, c})})
.then(response => response.text())
.then(result => console.log(`红球: ${result.red}, 白球: ${result.white}, 黑球: ${result.black}`));
});
</script>
```
阅读全文