因对前端开发感兴趣,于是自学前端技术,现在已经会HTML、CSS、java script基础技术。但水平处于小白阶段,在网上找一些小项目练练手,促进自己的技术成长。文章记录自己的所思所想,以及借鉴前端大牛的思路,谨个人想法,存在不足,欢迎指正。
项目介绍:
从最简单的开始,在网上找到了一个简单的用JS控制DIV属性的小项目,咋一看很简单,自己动手之后才发现自己的代码之冗余和初阶,深深汗颜。先写自己想法路程,然后把大牛源码奉上,涉及相关知识点一一记录。
项目效果图
整体思路,先变量保存属性,然后写方法复用,遍历数组,添加方法,对重置的元素用&&判断并使用cssText方法。
不多说,上源码:
1. CSS样式:
实现多重边框,使用outline方案。
在某些情况下,你可能只需要两层边框,可以先设置一层常规边框,再加上outline(描边)属性来产生外层的边框。描边的好处在于,你可以通过outline-offset属性来控制它跟元素的边缘之间的间距,这个属性可以接受负值。
2. java script方法:
tips:&&和||在java script中的另类用法
a() && b() :如果执行a()后返回true,则执行b()并返回b的值;如果执行a()后返回false,则整个表达式返回a()的值,b()不执行;
a() || b() :如果执行a()后返回true,则整个表达式返回a()的值,b()不执行;如果执行a()后返回false,则执行b()并返回b()的值;
&& 优先级高于 ||
分析
语句①:1&&3 返回3 => 3 || 0 返回 3 => 3&&4 返回 4
语句②:先执行1&&3 返回3,在执行0&&4返回0,最后执行结果比较 3||0 返回 3
语句③:先执行0&&3 返回0,在执行1&&4返回4,最后执行结果比较 0||4 返回 4
注:非0的整数都为true,undefined、null和空字符串”" 为false。
这算是最最基础的js练习了,模仿过一遍熟悉了通过js控制css样式改变。