自定义的二维码

 

                                               （作者：老薛，撰写时间：2019年1月28日）

一开始老师教我们的表格是一很简单的表格，请看下面图。

我做的也是根据上图的来进行完成我自己的，而我做的是要把它变成可以切换的效果。所以要应用到JS的部分来完成。下面图片是我要做的效果。

                                     图1

                                  图2

                                 图3 

大家也看到，从图1到图2的变化，我从图1点击字母B之后，经过2秒钟后变成图2的样子，从图1蓝色字母A再到蓝色字母B变化，而图1的内容里的表情也变成了图2的表情，按照这样子，图2到图3也是一样的道理。
接下来就是代码的部分，请看下图

大家也看到，先给一个div，然后在div里面a标签里，给它一个你要输入的内容，大家也看到我的是字母ABC，再然后也给一个div，里面要装的是表情符号，最后就是引入JS就行了 。

接下来就是CSS部分，请看下面这张图片

我觉得css部分重要性不大，先给它设置定位、宽高、还有颜色，然后隐藏掉。

最后，我们还要需要注意给它高亮的属性就行了。

到下一步就是JS部分，如下图

我是先给它一个按钮为点击事件，然后输入内容（就是我写的字母）。下一步就要判断按钮与内容长度是否一致。再下一步就是去掉当前按钮的高亮样式以及隐藏对应内容区，最后一步为点击事件延迟2秒执行。

就这样完成了，这是个很简单的表格切换，看完之后希望大家都会。