随机撒花特效、动态修改伪元素样式、contenteditable属性、手机端调试利器VConsole、浏览器端debug调试

  记录一些小零碎知识点,以便日后查看~

 

1、随机撒花特效

  教师节快到了,公司的产品提出一个需求:在IM(即时聊天)聊天界面弹出教师节的祝福“广告”,用户点击“发送祝福”按钮,聊天界面会随机撒花。这里的重点是随机撒花,下面会附上随机撒花的代码:



    
        
        
        
    
    
        

 

2、修改伪元素样式

  修改伪元素样式的方式有俩种:1、动态修改class类名 2、动态添加"); 

 

3、contenteditable属性  

  textarea不能解析HTML标签,但HTML5新增了一个 contenteditable 属性,可以使标签内容可编辑,并且这个标签拥有input的方法,你可以看一下, 通过添加这个属性,监听onblur事件,然后在事件里获取输入的文本内容,再设置为innerHTML,就达到了解析标签的效果:

 

4、VConsole

  只需加入这几行代码,就可以在手机端拥有控制台:Elements、Console、Sources、Network...


 

5、浏览器端debug调试

  前端开发用惯了console.log()打印数据变量,居然连debug断点调试这么好的东西都忘了,这个必须捡起来...记得大一学C语言的时候老师就说过debug断点调试是必备的调试神器,可以查看程序的执行进度和详情...

随机撒花特效、动态修改伪元素样式、contenteditable属性、手机端调试利器VConsole、浏览器端debug调试_第1张图片

 

   不积跬步无以至千里,不积小流无以成江河...每天坚持进步,让自己一点一点的强大起来...

你可能感兴趣的:(随机撒花特效、动态修改伪元素样式、contenteditable属性、手机端调试利器VConsole、浏览器端debug调试)