JavaScript前端实现九九乘法表

ゞ浴缸里的玫瑰 2022-04-18 02:29 263阅读 0赞

# JavaScript前端实现九九乘法表 #

1.通过点击网页上的按钮调用f1()函数来显示;

2.编写script里面的内容：

3.最后编写css样式：

那么到这里整个代码编写完成；  
所有源码：

<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>

最后运行结果：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bHUzMg_size_16_color_FFFFFF_t_70][]在浏览器中运行结果如上图所示。

PS：新手一枚；有什么问题还请大佬多多批评指正。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bHUzMg_size_16_color_FFFFFF_t_70]: /images/20220418/57532f65004144e48f3cfc6412990d9d.png