JavaScript前端实现九九乘法表
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 += "";//内层循环完后执行换行
for(j = 1;j <= i;j++){//内层循环
str += "";
str += i+"X"+j+"="+i*j;
str += "";
}
str += "
";//实现换行
}
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 += "";//内层循环完后执行换行
for(j = 1;j <= i;j++){//内层循环
str += "";
str += i+"X"+j+"="+i*j;
str += "";
}
str += "
";
}
document.getElementById("d1").innerHTML=str;
}
script>
head>
<body>
<div id="d1">
div>
<input type="button" onclick="f1()" value="生成乘法表" />
body>
html>
最后运行结果：
在浏览器中运行结果如上图所示。
PS：新手一枚；有什么问题还请大佬多多批评指正。