zoukankan      html  css  js  c++  java
  • AJAX调用完成后的消息提示框

    之前因为写一些验证,会在调用成功或者失败后用到一些消息提示框,但找了很多了没找到比较合适的,对于一些框架中的组件感觉用着也不是很方便,于是自己用js写了一个简单的提示框,代码如下:

    var appendHTML=function(el, html){
        var divTemp = document.createElement("div"), nodes = null
            // 文档片段,一次性append,提高性能
            , fragment = document.createDocumentFragment();
        divTemp.innerHTML = html;
        nodes = divTemp.childNodes;
        for (var i=0, length=nodes.length; i<length; i+=1) {
           fragment.appendChild(nodes[i].cloneNode(true));
        }
        el.appendChild(fragment);
        // 据说下面这样子世界会更清净
        nodes = null;
        fragment = null;
    };
    
    function showMessage(message,type,time) {
            let str = ''
            switch (type) {
                case 'success':
                    str = '<div class="success-message animation" style="opacity:0; 300px;height: 40px;text-align: center;background-color:#daf5eb;;color: rgba(59,128,58,0.7);position: fixed;left: 50%;top: 30%;transform:translate(-50%,-50%);line-height: 40px;border-radius: 5px;z-index: 9999">
    ' +
                        '    <span class="mes-text">'+message+'</span></div>'
                    break;
                case 'error':
                    str = '<div class="error-message animation" style="opacity:0; 300px;height: 40px;text-align: center;background-color: #f5f0e5;color: rgba(238,99,99,0.8);position: fixed;left: 50%;top: 30%;transform:translate(-50%,-50%);line-height: 40px;border-radius: 5px;;z-index: 9999">
    ' +
                        '    <span class="mes-text">'+message+'</span></div>'
            }
    
    str='<style>.animation{animation:mymove 3s forwards ;-webkit-animation:mymove 3s forwards;}@keyframes mymove{0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}@-webkit-keyframes mymove{0%{opacity:1;}50%{opacity:0.5;}100%{opacity:0;}}</style>'+str;
            appendHTML( document.querySelector('body') , str );
            setTimeout(function () {
                document.querySelector('body').removeChild(document.querySelector('.'+type+'-message'));
            },time)
        }
    
    showMessage('添加成功','success',2000)

    https://blog.csdn.net/qq_42095753/article/details/90347845

  • 相关阅读:
    ios开发之 -- 自动轮播图创建
    swift开发之 -- 自动轮播图(UIScrollView+UIPageControl+Timer)
    HTML5开发之 -- 模态突出窗(bootstrap)
    ios开发之--UICollectionView的使用
    ios开发之--判断奇偶数
    swift开发之 -- ? 和 ! 的作用
    swift开发之--UISearchBar的使用/UISearchController的使用
    swift开发之--报错:Class "***ViewController" has no initializers
    Android开发相关
    沁园春·雪
  • 原文地址:https://www.cnblogs.com/7qin/p/12117318.html
Copyright © 2011-2022 走看看