1.模拟手机发送消息
这是学习JS的第一个热身运动,在做这个的时候遇到了一个问题。最开始看到这个效果要去实现的时候,第一想法在聊天框里的对话想用position定位,但是会很麻烦,每增加一个会话,所有的位子都需要改动,后来想到了用浮动,浮动最大的好吃就是它会随着东西的增加减少自己的改变位置。
2.图片切换
这是用原生js写的类似轮播图的banner,也是第一次自己尝试写轮播图,之前一直是用的别人写好的插件,虽然在美化上有待改善,但是也了解了轮播控制和工作的原理。
3.自动生成10个Li
在做这个任务的时候,控制Li的背景颜色没4个循环一次上遇到了问题,过后在老师的点拨下知道了把4种颜色存进一个数组,通过取模的方式确定在第几个位置的Li用什么颜色的背景。
4.自动生成100个Li
继上一个任务过后知道了取模,在这任务上学到最重要的部分就是考虑浏览器的性能。用js的创在HTML标签,100个虽然俩不大但是如果数量变得非常大的时候,加载的速度会非常的慢。于是定义一个空的字符串,把这些一个个生成的Li放进空字符串里,最后在把空字符串赋给对应的innerHTML。如果没生成一次Li就去查询一边对应的innerHTML会影响浏览器的性能。除了性能一方面外,还有就是对代码的优化。最开始写出来的代码实现了效果,但是非常的冗长。后来尝试使用双重循环,非常简单的就搞定了代码。所以做完一个任务后后期定时的去优化代码也很必要。
5.自动生成v字型(基础版)
这个任务也继承了上一个任务考虑性能,除此之外,这个任务就比较简单也没有太多的问题。
6.自动生成v字型(提高版)
这个相对上一个来说难度就有所增加,但是在实现上还是比较容易的,贯穿全代码的一个线索就是一个公有变量,而这个公有变量的值,是通过点击事件控制的,并且把每种形状的位置排布封装成一个函数通过在点击事件判断公有变量的值来调用相应的函数。
7.模仿QQweb桌面
最开始做这个任务的时候,桌面有四个图标,就给每个图标加了onmouseover和onmouseout两个事件,那么问题来了,随着桌面的图标增加要怎么办呢,再去增加时间监听?想想不科学,后来把这两个事件放在了一个for循环内,无论Li有多少,都可以监听到,大大减少了代码量并且更科学。
8.类QQ列表的展开收缩扩展
在这个任务里,最主要的是学习到了给变量加一个索引,在for循环里想要捕获到监听到有动作的是第几个Li时就需要用到这个索引。这样就使得逻辑变得简单起来。