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

1、随机撒花特效

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    </head>

    <body style="background-color:#000">

        <div id="content-wrapper">

        </div>

        <script>

          $(document).ready( function(){

          $.fn.snow( { minSize: 2, maxSize: 150, newOn: 200, flakeColor: '#FFFFFF' } );

          });

        </script>

    </body>

</html>

<script>

(function($){

    $.fn.snow = function(options){

        var $flake             = $('<div id="flake" />').css({'position': 'absolute', 'top': '-50px'}).html('❄'),

            documentHeight     = $(document).height(),

            documentWidth    = $(document).width(),

            defaults        = {

                                minSize        : 2,

                                maxSize        : 2,

                                newOn        : 50,

                                flakeColor    : "#FFFFFF"

                            },

            options            = $.extend({}, defaults, options);

        //setInterval-setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

        //开始一个周期-开始添加雪花

            var interval = setInterval( function(){

                var startPositionLeft     = Math.random() * documentWidth - 100,

                     startOpacity        = 0.5 + Math.random(),

                    sizeFlake            = options.minSize + Math.random() * options.maxSize,

                    endPositionTop        = documentHeight - 40,

                    endPositionLeft        = startPositionLeft - 100 + Math.random() * 200,

                    durationFall        = documentHeight * 10 + Math.random() * 5000;

                $flake

                    .clone()

                    .appendTo('body')

                    .css(

                        {

                            left: startPositionLeft,

                            opacity: startOpacity,

                            'font-size': sizeFlake,

                            color: options.flakeColor

                        }

                    )

                    .animate(//增加雪花动态效果

                        {

                            top: endPositionTop,

                            left: endPositionLeft,

                            opacity: 0.2

                        },

                        durationFall,

                        'linear',

                        function() {

                            $(this).remove()

                        }

                    );

            }, options.newOn);

        //结束周期-停止添加雪花

        setTimeout(function(){

            window.clearInterval(interval);

        },5000);

    };

})(jQuery);

</script>

2、修改伪元素样式

　　修改伪元素样式的方式有俩种：1、动态修改class类名 2、动态添加<style>标签： $('html head').append("<style>.example::after{border-top-color:#ffefd8}</style>");

3、contenteditable属性　　

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

<div id="test" contenteditable style="width: 200px;height:100px;background:#f5f5f5"></div>

<script>

var div = document.querySelector('#test');

div.onblur = function() {

　　var html = div.innerText

　　div.innerHTML = html;

}

</script>

4、VConsole

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

<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>

<script>

    /* 初始化 */

   var vConsole = new VConsole();

</script>

5、浏览器端debug调试

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

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

周记5——随机撒花特效、动态修改伪元素样式、contenteditable属性、手机端调试利器VConsole、浏览器端debug调试的更多相关文章

  1. 动态改变伪元素样式的方(用:after和:before生成的元素)

    自己查资料总结的两种方法 一.纯css改变 a:hover:before{left:-20%;} a:hover:after{right:-20%;} a:before{ left:-100%; } ...

  2. Android——仿QQ聊天撒花特效

    实现这样的效果,你要知道贝塞尔曲线,何谓贝塞尔曲线?其实就是曲线,嘿嘿,关于曲线的概念大家可以去 Android绘图机制(二)——自定义View绘制形, 圆形, 三角形, 扇形, 椭圆, 曲线,文字和 ...

  3. Android特效专辑（六）——仿QQ聊天撒花特效，无形装逼，最为致命

    Android特效专辑(六)--仿QQ聊天撒花特效,无形装逼,最为致命 我的关于特效的专辑已经在CSDN上申请了一个专栏--http://blog.csdn.net/column/details/li ...

  4. 仿QQ撒花特效--第三方开源--FllowerAnimation

    点此下载资源 xml: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" ...

  5. 动态修改 dom 元素的伪类样式

    最近写代码,需要修改伪类的 content 属性,不想定义两个样式进行切换,而是直接通过 js 进行修改. html 中的伪类(如 a:hover / a:link / class::before / ...

  6. js动态修改Easyui元素不生效,EasyUI动态渲染解析解决方案

    easyui的渲染是在在网页加载完成后,相当于在$(document).ready()事件中,对整个网页进行了一次扫描,发现某个input标签含有easyui的属性,就在相应的地方进行ui的修改.因此 ...

  7. [SAP ABAP开发技术总结]动态修改选择屏幕

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  8. 微信小程序换皮肤,动态切换菜单栏和导航栏的样式,动态修改TabBar和NavigationBar

    在做微信小程序换皮肤的时候,需要动态修改菜单栏(TabBar)和导航栏(NavigationBar) 但是在小程序中它们的样式是写在app.json里面,而且app.json是静态编译,运行时哪怕你修 ...

  9. 【WPF】MVVM动态修改Bingding的另一种思路——用Style样式

    问题场景: 界面上有个ListBox控件,它的内容Item绑定了一个列表,即 ItemsSource =”{Binding StudentList}”.这个StudentList列表在该界面View对 ...

随机推荐

  1. List<object>进行Distinct()去重

    有时我们会对一个list<T>集合里的数据进行去重,C#提供了一个Distinct()方法直接可以点得出来.如果list<T>中的T是个自定义对象时直接对集合Distinct是 ...

  2. ZKEACMS 如何使用组件自定义样式/编辑样式

    前言 如果你还不知道ZKEACMS,不妨先了解一下. ASP.NET MVC 开源建站系统 ZKEACMS 推荐,从此网站“拼”起来 官方地址:http://www.zkea.net/zkeacms ...

  3. SprngBoot对静态资源的映射

    $.对前端js类库和框架的引用 使用webjars打包成jar的形式进行引用 webjars地址:https://www.webjars.org/; 选择使用版本-- >   选择管理方式--& ...

  4. [网络流24题] 最长K可重区间集问题

    题目链接:戳我 当时刷24题的时候偷了懒,没有写完,结果落下这道题没有写qwq结果今天考试T3中就有一部分要用到这个思想,蒟蒻我硬是没有想到网络流呜呜呜 最大费用流. 就是我们考虑将问题转化一下,转化 ...

  5. “全栈2019”Java第四十九章：重载与重写对比详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  6. spring quartz 的定时器cronExpression表达式写法（转载）

    转载来源:https://zhidao.baidu.com/question/240797777248343764.html====================================== ...

  7. php-elasticsearch scroll分页详解

    背景 ps:首先我们在一个索引里面写入一万条以上的数据.作为数据源 现在我想看到第一万零一条数据,首先第一想法是,from 10000 size 1 ,这样做会包下面错误.显然是不成立的.此时便会用到 ...

  8. MVC软件设计模式

    Model(模型):负责数据维护 View(视图):负责向用户呈现数据 Control(控制):负责模型和视图之间的交互 应用:Struts就是基于MVC模式的架构

  9. java中引用

    java中引用分为,强,弱,虚,软 (1)强引用 使用最普遍的引用.如果一个对象具有强引用,它绝对不会被gc回收.如果内存空间不足了,gc宁愿抛出OutOfMemoryError,也不是会回收具有强引 ...

  10. nginx如何设置禁止访问文件或文件夹

    目标: 1. 根目录 webroot: 2. 设置目标文件 /webroot/proj/deny.txt 不能访问: 做法: 1. 设置 nginx.conf ,添加一个“location”段落: 2 ...