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


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

     

    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=" 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断点调试是必备的调试神器,可以查看程序的执行进度和详情...

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

  • 相关阅读:
    创建自定义图标和图像
    使用_CRTDBG_LEAK_CHECK_DF检查VC程序的内存泄漏(转)
    Hadoop Netflix数据统计分析2(转)
    系统提供的按钮和图标
    STATIC变量问题
    表格视图,文本视图和Web视图
    Hadoop Netflix数据统计分析1(转)
    获取程序数据路径(转)
    C++中STRING转为INT (转)
    netflix 推荐算法学习1(转)
  • 原文地址:https://www.cnblogs.com/chenwenhao/p/9613897.html
Copyright © 2020-2023  润新知