<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
width: 80px;
padding: 5px 10px;
display: inline-block; /*可以使行内元素表现得像块级元素一样*/
text-align: center; /*文本居中*/
border: 1px solid turquoise;
margin: 2px; /*每个边框之间距离为2px*/
border-radius: 10px; /*边框圆润*/
box-shadow:6px 6px 2px aquamarine; /*阴影的位置在元素的右下方(水平偏移2px,垂直偏移2px),模糊半径为2px,颜色为grey*/
background-color:skyblue; /*背景色*/
color: aqua; /*文字颜色*/
}
</style>
</head>
<body>
<script>
let hang = +prompt('请输入行数')
for(let i= 1; i<=hang;i++){
for(let j=1;j<=i;j++){
document.write(`<span>${j} * ${i} = ${i*j}</span>`)//
}
document.write(`<br>`)
}
</script>
</body>
</html>
运行结果如下:
在此处填入你想要的数量即可生成。