如何使用纯JS完成Toas对话框（代码）1

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

本篇文章给大家带来的内容是关于如何使用纯JS实现Toas对话框（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>toast</title>
  </head>
  <style media="screen">
    @keyframes fadeIn {
      0%    {opacity: 0}
      100%  {opacity: 1}
    }
    @-webkit-keyframes fadeIn {
      0%    {opacity: 0}
      100%  {opacity: 1}
    }
    @-moz-keyframes fadeIn {
      0%    {opacity: 0}
      100%  {opacity: 1}
    }
    @-o-keyframes fadeIn {
      0%    {opacity: 0}
      100%  {opacity: 1}
    }
    @-ms-keyframes fadeIn {
      0%    {opacity: 0}
      100%  {opacity: 1}
    }
    @keyframes fadeOut {
      0%    {opacity: 1}
      100%  {opacity: 0}
    }
    @-webkit-keyframes fadeOut {
      0%    {opacity: 1}
      100%  {opacity: 0}
    }
    @-moz-keyframes fadeOut {
      0%    {opacity: 1}
      100%  {opacity: 0}
    }
    @-o-keyframes fadeOut {
      0%    {opacity: 1}
      100%  {opacity: 0}
    }
    @-ms-keyframes fadeOut {
      0%    {opacity: 1}
      100%  {opacity: 0}
    }
    #toast{
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      font-size: 14px;
      line-height: 1;
      padding:10px;
      border-radius: 3px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      -webkit-transform: translate(-50%,-50%);
      -moz-transform: translate(-50%,-50%);
      -o-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
      z-index: 9999;
    }
    .hide{
      display: none;
    }
    .fadeOut{
      animation: fadeOut .5s;
    }
    .fadeIn{
      animation:fadeIn .5s;
    }
  </style>
  <body></body>
</html>
<script>
  var toast = function(params){
    var el = document.createElement("p");
    el.setAttribute("id","toast");
    el.innerHTML = params.message;
    document.body.appendChild(el);
    el.classList.add("fadeIn");
    setTimeout(function(){
      el.classList.remove("fadeIn");
      el.classList.add("fadeOut");
      el.addEventListener("animationend", function(){
        el.classList.add("hide");
      });
    },params.time);
  };
  
  //使用
  toast({
    message:"提交成功",
    time:1500
  });
 
 
  /*------------------------
    author:codeTnt
    date:2018/7/13
  -------------------------*/
</script>

以上就是如何使用纯JS实现Toas对话框（代码）的详细内容，更多请关注php中文网其它相关文章！