|
原理：1、封装一个函数用来创建乘法表。
2、两个for循环，一个控制需要多少行，另一个控制每一行的内容。
3、每一行用p标签包裹着，这样可以很好的控制换行。
下面写了一个简单的乘法表，通过获取input标签来对乘法表的行数进行控制，代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box span{
border: 1px solid goldenrod;
margin: 0 5px;
padding:0 5px;
}
</style>
</head>
<body>
<input type="number" name="" id="">
<input type="submit" value="提交">
<div class="box"></div>
<script>
//获取input
let number = document.querySelector("input[type='number']")
let submit = document.querySelector("input[type='submit']")
let box = document.querySelector(".box")
let n=9
function multiplication(n){
//控制有n行
for(let i=0;i<n;i++){
//每一行用p标签包裹
let str = `<p>`
//每一行都执行i次
for(let j=1;j<=i+1;j++){
let p = `${j}*${i+1}=${(j)*(i+1)}`
p = `<span>${p}</span>`
str += p
}
str += `</p>`
//将每一行追加到div中
box.innerHTML += str
}
}
submit.onclick = () => {
n = number.value
//先清空
box.innerHTML = ""
multiplication(n)
}
</script>
</body>
</html>
执行结果：
| 
转播
