隨機撒花特效、動態修改僞元素樣式、contenteditable屬性、手機端調試利器VConsole、瀏覽器端debug調試

時間 2019-12-06

標籤隨機特效動態修改元素樣式 contenteditable 屬性手機調試利器 vconsole 瀏覽器 debug 欄目瀏覽器简体版

原文原文鏈接

　　記錄一些小零碎知識點，以便往後查看~css

一、隨機撒花特效html

　　教師節快到了，公司的產品提出一個需求：在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>

二、修改僞元素樣式jquery

　　修改僞元素樣式的方式有倆種：一、動態修改class類名二、動態添加<style>標籤： $('html head').append("<style>.example::after{border-top-color:#ffefd8}</style>"); 瀏覽器

三、contenteditable屬性　　app

　　textarea不能解析HTML標籤，但HTML5新增了一個 contenteditable 屬性，能夠使標籤內容可編輯，而且這個標籤擁有input的方法，你能夠看一下，經過添加這個屬性，監聽onblur事件，而後在事件裏獲取輸入的文本內容，再設置爲innerHTML，就達到了解析標籤的效果：dom

<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>

四、VConsole函數

　　只需加入這幾行代碼，就能夠在手機端擁有控制檯：Elements、Console、Sources、Network...this

<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
<script>
    /* 初始化 */
   var vConsole = new VConsole();
</script>

五、瀏覽器端debug調試spa

　　前端開發用慣了console.log()打印數據變量，竟然連debug斷點調試這麼好的東西都忘了，這個必須撿起來...記得大一學C語言的時候老師就說過debug斷點調試是必備的調試神器，能夠查看程序的執行進度和詳情...

　　不積跬步無以致千里，不積小流無以成江河...天天堅持進步，讓本身一點一點的強大起來...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。