html照片4张 9张布局,JS原生练习（一）

83个js原生代码实例，从易到难，涵盖js算法和几乎开发中用到的知识点(实时更新中)

实例中也包括了很多布局例如：flex布局和gird布局。

(亲自做，对js的熟练度绝对的加深，有心的给个star，谢谢。)

第一课

第一个  控制DIV属性

说一下代码实现逻辑

用的是点击事件来实现的。

循环逻辑，五个按钮五个点击事件具有很多的相似之处，这样可以减少代码量。

判断逻辑，因为重置按钮需要清空之前的style，这里用if语句也可以，但是比较繁琐，所以我采用了与门操作符，好处就是代码量比较少。

第二个 网页换肤

首先先来说几个注意点，再来说代码逻辑

1、笔者用的是button，遵循JS语义化原则，使人更容易理解。但是得先设置box-sizing:content-box问题，不然按钮的宽高无法正常显示

2、笔者这里用了flex布局，简单方便。推荐这篇文章

代码逻辑

通过点击事件来实现，实现过程主要由一下两点

1、改变引入的css文件

2、改变按钮的class，添加一个active样式。(注：active笔者设置了import属性)

第三个 函数接收参数并弹出

代码逻辑

采用点击事件，获取值后将其传个函数

第四个 用循环将三个Div变成红色

亮点

使用flex布局。

代码逻辑

运用点击事件，当点击之后，利用循环改变背景颜色

第五个 鼠标移入改变样式，鼠标移出恢复

代码逻辑

用鼠标经过事件和鼠标移出事件。当鼠标移入是，改变div的style，移出是将style置为空。

第六个 记住密码提示框

代码逻辑

鼠标经过显示内容，鼠标移出内容隐藏

第二课

第一个 百度输入法

代码逻辑

点击事件控制导航栏的下拉，但是需要加一个if的判断，判断ul块的display属性。

第二个 点击Div，显示其innerHTML

代码逻辑

利用点击事件弹框p元素的innerHTML内容。这个实例，主要帮助理解innerHTML。

第三个  求出数组中所有数字的和

代码逻辑

利用点击事件，然后取得input的value值。

取得的是字符串类型，用split把字符串切成一个一个字符串。

在用Number逐个进行转换，最后累加起来取得和，在输出给另一个div块

第四个  弹出层效果

代码逻辑

利用点击事件，控制两个div块的display。

第五个  函数传参，改变Div任意属性的值

代码逻辑

利用点击事件将参数传递给change函数，改变属性值。

在利用点击事件，将style中的css清除掉。

第六个  图片列表：鼠标移入/移出改变图片透明度

布局

采用flex布局，(笔者越来越喜欢这个布局，感觉没有float那么繁琐，用起来十分方便)

代码逻辑

采用鼠标经过事件和鼠标移出事件改变其style属性。

第七个  简易选项卡

代码逻辑

利用鼠标经过事件改变内容块的display属性，以及本身的背景色。

注意两个点：

1、改变内容块时，笔者用了索引，因为i的不能被引用。

2、在赋值之前，要将所以style重置之后在进行。

第八个  简易JS年历

布局还是采用flex布局

代码逻辑

利用循环和鼠标经过事件改变内容块里面的内容。

第九个  单一按钮显示/隐藏一播放列表收缩展开

代码逻辑

利用点击事件，设定一个判断标准，比如笔者用了show，这个vue里面也有类似用到。

第十个  提示框效果

布局

采用flex布局

代码逻辑

利用的是循环和鼠标经过事件，以及鼠标移出事件，来改变图片的display属性。

第十一个  鼠标移过，修改图片路径

布局

推荐这个教程，挺完善的

代码逻辑

采用鼠标经过事件，切换图片的src属性，笔者用到了正则，减少代码量。

笔者还加了图片的懒加载判断，用的是一张gif的动图

第十二个  复选框(checkbox)全选/全不选/返选

代码逻辑

for循环判断每一个复选项框是不是被选中。

当不被选中时，checked为false，在js的与操作符中当前一项为false时，后一项不被执行。

当循环执行完，判断被选中的数量是不是等于复选项框的数量。

当数量相等时，把全选按钮的check的值赋为true。

当全选项框为true时，innerHTML的值为“全不选”，反之，则为“全选”。

接下去就是全选和全不选，以及反选的逻辑。都是利用循环，逻辑比较简单，不加以赘述。

第三课

第一个  用typeof查看数据类型

代码逻辑，用typoof判断数据类型。

第二个  用parseInt解析数字，并求和

代码逻辑

利用点击事件，累加两个input的值(经过parseInt()转换)。再讲值赋给res

在添加两个句柄，判断input的值为空时，将res切换回？。

第三个  累加按钮，自加1

代码逻辑

点击事件，使得n的数值自动累加，然后赋值给button。

第四个  输入两个数字，比较大小

代码逻辑

利用点击事件，判别两个值的大小，然后用正则选取内容，改变button的innerHTML的属性值。

第五个  页面加载后累加，自加1

代码逻辑

利用setInterval设置定时触发函数，然后给innerHTML的内容赋值。

第六个  判断数字是否为几位数

代码逻辑

先对input输入框采用松开按键事件，判断输入为什么，把所有除数字以外的置为空。

然后在判断input的value值的长度，来判断是几位数。

第七个  简易计算器

第八个  简易时钟

代码逻辑

先定义一个函数，用来获取几点几分几秒，然后在用setTnterval定时器来事实更新dom

正则的作用是当时间是各位数的时候在他前面加个0，使其变成两位数。

简易时钟

第九个  简易倒计时时钟

代码逻辑

定义一个函数，将时间换算成分秒形式，然后在让值递减，使其完成计时功能。

计时器