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：新手一枚；有什麼問題還請大佬多多批評指正。