【跟着蛋老师过前端面试】（一）九九乘法表

张春  金牌会员 | 2022-8-13 07:28:33 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 777|帖子 777|积分 2331

视频链接：JavaScript九九乘法表 - Web前端工程师面试题讲解
问题一：如下图这样排列

首先根据左下三角的一个九九乘法表的分布，可以做出如下的双重循环排布：
九九乘法表1.html

点击查看代码
  1. <html>
  2.     <head>
  3.         <title>九九乘法表</title>
  4.     </head>
  5.     <body>
  7.     </body>
  8.    
  9. </html>
复制代码
浏览器显示效果如下：

接下来九可以用html的格子和输出替换星号*
点击查看代码
  1.         <html>
  2.     <head>
  3.         <title>九九乘法表</title>
  4.     </head>
  5.     <body>
  7.     </body>
  8.    
  9. </html>
复制代码
浏览器的显示效果如下（水平菜，不能像蛋老师那样搞CSS）：

问题二：如下图这样排列

结合老师的视频内容和上图table显示出来的效果可知，可以把空缺的部分想象成空格，每行空出格子后接着写乘法表
点击查看代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>九九乘法表2</title>
  6.     </head>
  7.     <body>
  9.     </body>
  10.    
  11. </html>
复制代码
最终效果如下：


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

张春

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表