Android实现View.setOnTouchListener简单的双击事件

数字统计 NOIP2010普及组

  返回  

js消息提示弹窗

2021/8/20 13:58:34 浏览:

js+css 实现消息弹窗(非alert)

思路

创建一个容器,默认在窗口之外,当事务处理完成之后使用js动态加载类名,这个类名包含这个窗口出现与隐藏的动画,之后在一段时间后清除这个类名,以便下次加载还有动画效果

具体代码如下:

html

<div id="successTips" >添加成功 √ </div>

css

// 设置容器样式
#successTips{
	position: absolute;
    left: 48%;
    top: -50px;
    padding: 5px;
    border-radius: 5px;
    background-color: transparent;
    color: transparent;
}
// 通过js动态加载类名实现元素的动画
.showAndHide{
    animation: showTips 1000ms cubic-bezier(0.5, 0.5, 1, 1);
}
// 动画实现
@keyframes showTips {
        0%{
            transform: translate(48%,0px);
            background-color: transparent;
            color: transparent;
        }
        25%{
            transform: translate(48%,100px);
            background-color: rgb(49, 226, 33);
            color: #fff;
        }
        75%{
            transform: translate(48%,100px);
            background-color: rgb(49, 226, 33);
            color: #fff;
        }
        100%{
            transform: translate(48%,0px);
            background-color: transparent;
            color: transparent;
        }
    }

JavaScript

// 点击页面弹出提示
document.onclick = function(){
    showTips();
}

// 这里封装了一个函数,哪里需要的时候调用就可以了
// 弹出提示
function showTips(){
    document.querySelector('#successTips').className = 'showAndHide';
    let timer = setTimeout(()=>{
        document.querySelector('#successTips').className = '';
    },2000)
    // clearTimeout(timer);
}

结束

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号