99 multiplication table
One, the code
1.99 code for different methods of multiplication table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
td{
border: 1px solid red;
}
div{
border: 1px solid red;
width: 100px;
height: 20px;
float: left;
}
span{
border: 1px solid red;
line-height: 40px;/*行内元素没有宽高，使用行高*/
}
</style>
<!--
1.页面输出
-->
<script>
document.write("<h3>1.table</h3>");
document.write("<table>")
for (var i =1; i <=9 ; i++) {
document.write("<tr>")
for (var j = 1; j <=i ; j++) {
document.write("<td >"+i+" * "+j +" = "+(i*j)+"</td>")
}
document.write("</tr>");
}
document.write("</table>")
</script>
<!--
2.控制台输出
-->
<script>
document.write("<h3>2.控制台输出</h3>");
for (var i =1; i <=9 ; i++) {
for (var j = 1; j <=i ; j++) {
console.log(i+" * "+j +" = "+(i*j))
}
}
</script>
<!--
3.div
-->
<script>
document.write("<h3>3.div</h3>");
for (var i =1; i <=9 ; i++) {
for (var j = 1; j <=i ; j++) {
document.write("<div>"+i+" * "+j +" = "+(i*j)+"</div>")
}
document.write("<br>")
document.write("<br>")
}
</script>
<!--4.span-->
<script>
document.write("<h3>4.span</h3>");
for (var i =1; i <=9 ; i++) {
document.write("<div style='text-align: center;width: 100%;height: 40px;border: none'>")
for (var j = 1; j <=i ; j++) {
document.write("<span>"+i+" * "+j +" = "+(i*j)+"</span> ")
}
document.write("</div>")
}
</script>
<!--5.ul li -->
<script>
document.write("<h3>5.ul li </h3>");
for (var i =1; i <=9 ; i++) {
document.write("<ul style='list-style: none'>")
for (var j = 1; j <=i ; j++) {
document.write("<li>"+i+" * "+j +" = "+(i*j)+"</li> ")
}
document.write("</ul>")
}
</script>
</head>
<body>
<style>
ul li{
border: 1px solid blue;
float: left;
}
</style>
</body>
</html>
to sum up
The above is the whole content of the 99 multiplication table realized by various methods, which are mainly realized by using html and css technology.