JavaScript前端实现九九乘法表
1.通过点击网页上的按钮调用f1()函数来显示;
<html>
<head>
</head>
<body>
<div id="d1"></div>
<input type="button" value="生成九九乘法表" onclick="f1()"/>
</body>
</html>
2.编写script里面的内容：
<script>
function f1(){
var str="";
for(var i = 1;i <= 9;i++){//外层循环
str += "<div id='d2'>";//内层循环完后执行换行
for(j = 1;j <= i;j++){//内层循环
str += "<div>";
str += i+"X"+j+"="+i*j;
str += "</div>";
}
str += "<br/></div><br/>";//实现换行
}
document.getElementById("d1").innerHTML=str;
}
</script>
3.最后编写css样式：
<style>
#d2 div{width: 50px;height: 30px;border: 1px solid black;float:left;text-align: center;line-height: 30px;};
</style>
那么到这里整个代码编写完成；
所有源码：
<html>
<head>
<style>
#d2 div{width: 50px;height: 30px;border: 1px solid black;float:left;text-align: center;line-height: 30px;};
</style>
<script>
function f1(){
var str="";
for(var i = 1;i <= 9;i++){//外层循环
str += "<div id='d2'>";//内层循环完后执行换行
for(j = 1;j <= i;j++){//内层循环
str += "<div>";
str += i+"X"+j+"="+i*j;
str += "</div>";
}
str += "<br/></div><br/>";
}
document.getElementById("d1").innerHTML=str;
}
</script>
</head>
<body>
<div id="d1">
</div>
<input type="button" onclick="f1()" value="生成乘法表" />
</body>
</html>
最后运行结果：
在浏览器中运行结果如上图所示。
PS：新手一枚；有什么问题还请大佬多多批评指正。