大学解惑09 - 单独用HTML javascript CSS 实现三版99乘法表,你就是班里最靓的仔
☆ 99乘法表,这个从小学就让我们开始产生肌肉记忆的知识点,伴随一生。而一旦开始学习软件开发知识,99乘法表将是一个基础中不可逃避的巩固升级作业。
☆ 口算背诵相信大家已经滚瓜烂熟了,一一得一,二二得四,六六二十六
今天本文将从
△ HTML 版本 (以布局为铺垫)
△ javascript 版本 (用一种新鲜的拆解方法写一把)
△ CSS 版本 (页面只有一个div,完全由css实现,属于另辟蹊径类)
前端这三大基础中的基础语言入手,逐步实现出各自版本的99乘法表。
目录
一、HTML版本
二、javascript版本
1、传统写法
2、更易理解的写法
3、目前老师和讲师们的问题
三、最卷得用纯CSS实现99乘法表
1、说明一下
2、纯CSS的99乘法表
3、个人感悟
一、HTML版本
HTML版本的实现并没有任何新意,但却是基础的巩固。99乘法表最终会达到9行9列,所以,在不借助CSS javascript的前提下,纯使用HTML语义化标签来实现,所考察的就是如何需要块元素,何时需要行内元素。
块元素,顾名思义就是一块一块的,2个块级元素放到一起,第二个会排到第二行;而每一行的横向排列,又需要一些最基础的行内元素,以达到向后排列的效果
除了采用这些块级元素,其实首先应该想到的是table元素,因为99乘法表看上去正适合一个表格的形状模型。今天暂且不用table标签,我们采用正常的元素。
所谓HTML语义化标签呢,就是希望每个HMLT标签做他该做的事情,在不借助CSS的前提下,也可以有一个很好的展现;而因为语义化标签又是行业标准,所以浏览器和SEO也更希望触碰到简洁而又符合规范的语义化标签;而语义化标签如果得以实现,对于同事间,甲乙方的代码交接也是一个很好的体验。
话不多说,上代码吧:
<div><span>1 * 1 = 1</span>
</div>
<br/>
<div><span>1 * 2 = 2</span> <span>2 * 2 = 4</span>
</div>
<br/>
<div><span>1 * 3 = 3</span> <span>2 * 3 = 6</span> <span>3 * 3 = 9</span>
</div>
<br/>
<div><span>1 * 4 = 4</span> <span>2 * 4 = 8</span> <span>3 * 4 = 12</span> <span>4 * 4 = 16</span>
</div>
<br/>
<div>......</div>
<br/>
<div><span>1 * 9 = 9</span> <span>2 * 9= 18</span> <span>3 * 9 = 27</span> <span>4 * 9 = 36</span> <span>5 * 9 = 45</span> <span>6 * 9 = 54</span> <span>7 * 9 = 63</span> <span>8 * 9 = 72</span> <span>9 * 9 = 81</span>
</div>
这里就不把所有的dom内容补全了,但这段代码对于初学者来说需要观察一下,最后一行中,3*9是怎么和上一行的3*4对齐的?因为最后一行的18比上一行的8多占了一个字符的位置
二、javascript版本
1、传统写法
其实不要说javascript版本,java c 的99乘法表大家写法都差不多。因为最终的矩阵是9行9列,而且中途会出现2个不断加一的数字,所以必然都是两个循环嵌套,执行9次。
但我今天不想这么写,历史写法已经N年了。不过为了练练手呢,还是先写一下比较传统的写法:
<script>for (var i=1;i<=9;i++) {for (var j=1;j<=i;j++) {document.write(j + '*' + i + '=' + j*i + ' ');}document.write('<br/>');}
</script>
这种写法很简单,短短的6行代码,但对于初学者来说很不友好,而且目前培训班有个特点,今天我就要讲这些课,讲完了留作业,明天就要继续往下讲。而且据我的经验,如果让做99乘法表,应该是学完HTML,学完CSS,然后js基础讲完就要做。意味着自己还一脸懵的时候,就要做更懵逼的事
2、更易理解的写法
传统的写法,双层循环,结合99乘法表的结构,第二层循环的执行次数要小于等于第一层循环的,紧接着换行以达到目的。
并非说上一种不好,第一种很好。因为涉及到双层循环嵌套,初学者不太理解,那么我用拆解法一步步的写出代码。相信哪怕初学者,也会看明白我的思路,因为可以更快的熟悉第一种写法。
<script>// for (var i=1;i<=9;i++) {// for (var j=1;j<=i;j++) {// document.write(j + '*' + i + '=' + j*i + ' ');// }// document.write('<br/>');// }var num = 1;document.write(num + '*' + num + '=' + num*num);document.write('<br/>');for (var a = 1; a <= 2; a++) { // 这里要执行第二行了,需要执行2次document.write(a + '*2' + '=' + a*2 + ' ');}document.write('<br/>');for (var a = 1; a <= 3; a++) { // 这里要执行第三行了,需要执行3次document.write(a + '*3' + '=' + a*3 + ' ');}document.write('<br/>');
</script>
3、目前老师和讲师们的问题
据我所知,不会有哪个老师在讲解此类问题的时候,可以采用拆解法讲一遍,然后再采用传统写法去练习。大多数上来就是把传统写法往出一甩,大家练习去吧。大家要好好学啊,不好好学找不到工作啊。这只会让同学们更加的忧愁,不会怎么办,是不是我不适合学开发,慢慢开始掉队。
这里加一个小插曲:慢慢的参加工作后,你会发现这么两种人,需求是让他盖一个房子,有的人能给你搞出鸟巢的感觉来,高大上,但不敢接手;还有一种人,看似普通茅草屋,实则内部应有尽有,容易上手。
三、最卷得用纯CSS实现99乘法表
1、说明一下
这里需要说明一下,其实用css写字,或者说写这个乘法表,并非什么高端技术,其实看技术点比较普通,就是通过css的伪类 ::before 往页面元素内添加文字。
但这绝对属于另辟蹊径类的,或者说一种创新的想法。
慢慢工作多年,除了公司让做的需求,我们又有哪些东西属于自己了呢。整天想着技术驱动业务,但有多少,还没来得及驱动,业务先没了,接下来你只能去驱动面试题和招聘软件了。
2、纯CSS的99乘法表
首先,页面里只有一个div,可以给其设定一些宽高,
<div class="nienie" style="width: 800px;height: 500px;border:1px solid red;"></div>
接下来,我们将在这个 nienie 里实现 CSS版的99乘法表。
<style>.nienie::before {display: block;content: '1*1=1 \a 1*2=2 2*2=4 \a 1*3=3 2*3=6 3*3=9 \a 1*4=4 2*4=8 3*4=12 4*4=16 \a ...... \a 1*9=2 2*9=18 3*9=27 4*9=36 5*9=45 6*9=54 7*9=63 8*9=72 9*9=81';white-space: pre;}
</style>
3、个人感悟
在职场和面试中,常用的快速的解决方案固然重要,但如果你能够掌握多一种解决方案,这可能将是你咸鱼翻身的重要机会。
为了更有助于初学者学习,使初学者可以不必再花多余的钱去学前端开发,我自己开始录视频了,录得不好,但应该自学找工作没问题
【自学前端】HTML篇已完结(附14节视频)
大学解惑09 - 单独用HTML javascript CSS 实现三版99乘法表,你就是班里最靓的仔相关推荐
- 99乘法表带颜色HTML隔行变色,javascript小实例,实现99乘法表及隔行变色
人生短暂,废话不多说,直奔主题! 这个小实例的要求: 实现在页面中输出99乘法表.(要求:以每三行为一组,实现隔行变色(颜色为白,红,黄(也可自己定义)),鼠标滑过每一行,行背景颜色变为蓝色,鼠标离开 ...
- html5+javascript+css实现---网页版坦克大战---无需运行环境
html5+javascript+css实现-网页版坦克大战-无需运行环境,只需一个浏览器,重拾少年情. 运行环境-除老版IE浏览器都可以: 源码需要请:点赞留言邮箱: 可以跳关,回退关卡.支持双人坦 ...
- php编写九九乘法表隔行换色,JavaScript实现99乘法表及隔行变色实例代码
项目需求:实现在页面中输出99乘法表.(要求:以每三行为一组,实现隔行变色(颜色为白,红,黄(也可自己定义)),鼠标滑过每一行,行背景颜色变为蓝色,鼠标离开又恢复原来的颜色),隔行变色的效果需要用if ...
- php九九乘法表隔行换色,JavaScript实现99乘法表及隔行变色实例代码_javascript技巧...
项目需求:实现在页面中输出99乘法表.(要求:以每三行为一组,实现隔行变色(颜色为白,红,黄(也可自己定义)),鼠标滑过每一行,行背景颜色变为蓝色,鼠标离开又恢复原来的颜色),隔行变色的效果需要用if ...
- javascript中for循环练习打印99乘法表
/* * 1.打印99乘法表 * 11 = 1 * 12 = 2 22 = 4 * * 19 = 9 29 =18-99=81 */ //创建一个外层循环来创建高 for (var i =1;i< ...
- jquery打99乘法表_基于javascript实现九九乘法表
基于javascript实现九九乘法表 本文实例为大家分享了javascript实现九九乘法表的相关代码,具体内容如下 var sum=0; var wite; for (var i = 1; i & ...
- JavaScript通过for循环实现九九乘法表的左下、左上、右上、右下对齐成直角三角形
九九乘法表共 9 行 9 列,以下通过JavaScript代码块的控制,来实现关于九九乘法表的左下.左上.右下.右上对齐形成三角形的效果. 注意:(1)掌握 for 循环及多层for循环的使用. ...
- javascript 在页面显示九九乘法表,99乘法表,双循环实现
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>< ...
- 使用JavaScript代码制作99乘法表
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
最新文章
- Python编程基础:第十六节 元组Tuple
- 7-35 蒙特卡罗方法求圆周率 (30 分)
- python mysql library popular_python之mysql入门详解(四)
- TIOBE 8 月榜单:C 力压 Java 夺得第一,Java掉了1.6 个点
- 上课点名app_【APP种草】网瘾少年的自我救赎之最强锁机软件
- 冗余机器人以及雅克比伪逆矩阵
- Python 修改pip源---windows / Linux
- tree(2018.10.26)
- 卸掉包袱,诺基亚将走得更远
- Java开发技术有哪些?
- Markdown数学公式参考表
- 如何查看注解实现_SpringBoot的注解@ConditonOnClass注解是如何实现的?
- linux装完系统需要输入密码,在安装Linux系统的过程中,一定要设置root用户的密码 (5.0分)...
- 实时数据流采集工具Flume
- 百度OCR图片内容识别
- onenote2016下载地址
- 一加手机高德位置服务器,高德地图在线导航悬浮窗闪亮一加手机
- layui通用后台模板
- 最大岛屿 计蒜客--T1405
- 二维数组去重,数组对象去重