提交表单时的等待效果动画

在某些表单提交中，为了更好的用户体验，会加一个等待框，以便于告诉用户系统正在进行数据提交。下面是自己用js和css写的一个等待效果。如图。等待效果js代码：function showWaiting(){var node=document.createElement("div");//创建一个div元素节点，作为整个背景的容器var nodeClass=docume...

glgom

4718人浏览 · 2019-03-12 21:40:49

glgom · 2019-03-12 21:40:49 发布

在某些表单提交中，为了更好的用户体验，会加一个等待框，以便于告诉用户系统正在进行数据提交。下面是自己用js和css写的一个等待效果。如图。

js代码：

function showWaiting(){
	var node=document.createElement("div");  //创建一个div元素节点，作为整个背景的容器
	var nodeClass=document.createAttribute("class"); //创建class元素属性
	var nodeStyle = document.createAttribute("style"); //创建style元素属性
	var nodeName = document.createAttribute("name"); //创建name元素属性
	nodeName.value = "divWaiting"; //给元素节点命名
	nodeClass.value = "div-waiting"; //元素属性赋值
	nodeStyle.value = "height:"+window.innerHeight + "px; width:"+window.innerWidth+"px;";
	node.setAttributeNode(nodeClass); //设置元素节点的属性及值
	node.setAttributeNode(nodeStyle);
	node.setAttributeNode(nodeName);
	var iconNode = document.createElement("div");  //创建一个div元素节点，作为旋转图标的容器
	var iconClass = document.createAttribute("class");
	iconClass.value = "icon-waiting";
        //iconClass.value = "fa fa-spinner fa-pulse icon-position";
	iconNode.setAttributeNode(iconClass);
	
	node.appendChild(iconNode);  //将图标节点放到整个背景的元素节点
	document.body.appendChild(node); //将整个背景div插入到body中
}

function closeWaiting(){
	var wait = document.getElementsByName("divWaiting"); //获取name为divWaiting的元素节点
	console.log(wait);
    //遍历所有的节点，将body中的所有等待旋转效果去掉
	for(var i=wait.length - 1; i>=0; i--){  
		document.body.removeChild(wait[i]); 
	}
}

css代码：

@-webkit-keyframes spin {
	  	to {
	    	-webkit-transform: rotate(360deg);
	        transform: rotate(360deg);
	  	}
	}
	
	@keyframes spin {
		to {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}
	.div-waiting{
		position: fixed;
	    z-index: 998;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
		opacity: 1;
	    background: rgba(0,0,0,0.2);
	    vertical-align: middle;
	    text-align: center;
	}
	.icon-waiting{
		position: relative;
		top: 48%;
	    width: 5rem;
	    height: 5rem;
	    margin: 0 auto;
	    border-radius: 50%;
	    border: 0.5rem solid rgba(21, 21, 21, 0.4);
	    border-top-color: #e1e1e1;
	    -webkit-animation: 1.5s spin infinite linear;
	    animation: 1.5s spin infinite linear;
	}
        .icon-position{
            position: relative;
            top: 48%;
            margin: 0 auto;
            font-size: 30px;
        }

还可以引用fontawesome的样式 fa-spin使任意图标旋转：

使用 fa-spin 类来使任意图标旋转，现在您还可以使用 fa-pulse 来使其进行8方位旋转。尤其适合 fa-spinner、fa-refresh 和 fa-cog 。

将iconClass节点的value赋值为 “fa fa-spinner fa-pulse icon-position”

以下是全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>等待旋转效果</title>
    <link rel="stylesheet" href="../extends/font-awesome-4.7.0/css/font-awesome.css">
    <style type="text/css">
        @-webkit-keyframes spin {
            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes spin {
            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        .div-waiting{
            position: fixed;
            z-index: 998;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            opacity: 1;
            background: rgba(0,0,0,0.2);
            vertical-align: middle;
            text-align: center;
        }
        .icon-waiting{
            position: relative;
            top: 48%;
            width: 5rem;
            height: 5rem;
            margin: 0 auto;
            border-radius: 50%;
            border: 0.5rem solid rgba(21, 21, 21, 0.4);
            border-top-color: #e1e1e1;
            -webkit-animation: 1.5s spin infinite linear;
            animation: 1.5s spin infinite linear;
        }
        .icon-position{
            position: relative;
            top: 48%;
            margin: 0 auto;
            font-size: 30px;
        }
        button{
            padding: 6px 12px;
            margin: 10px;
            background: #00bbee;
            border: 1px solid #00bfff;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <button onclick="showWaiting()">显示</button>
    <button onclick="closeWaiting()" style="z-index: 10000;position: relative;">关闭</button>
</body>

<script type="text/javascript">
    function showWaiting(){
        var node=document.createElement("div");  //创建一个div元素节点，作为整个背景的容器
        var nodeClass=document.createAttribute("class"); //创建class元素属性
        var nodeStyle = document.createAttribute("style"); //创建style元素属性
        var nodeName = document.createAttribute("name"); //创建name元素属性
        nodeName.value = "divWaiting"; //给元素节点命名
        nodeClass.value = "div-waiting"; //元素属性赋值
        nodeStyle.value = "height:"+window.innerHeight + "px; width:"+window.innerWidth+"px;";
        node.setAttributeNode(nodeClass); //设置元素节点的属性及值
        node.setAttributeNode(nodeStyle);
        node.setAttributeNode(nodeName);
        var iconNode = document.createElement("div");  //创建一个div元素节点，作为旋转图标的容器
        var iconClass = document.createAttribute("class");
        iconClass.value = "icon-waiting";
        //iconClass.value = "fa fa-spinner fa-pulse icon-position";
        iconNode.setAttributeNode(iconClass);

        node.appendChild(iconNode);  //将图标节点放到整个背景的元素节点
        document.body.appendChild(node); //将整个背景div插入到body中
    }

    function closeWaiting(){
        var wait = document.getElementsByName("divWaiting"); //获取name为divWaiting的元素节点
        console.log(wait);
        //遍历所有的节点，将body中的所有等待旋转效果去掉
        for(var i=wait.length - 1; i>=0; i--){
            document.body.removeChild(wait[i]);
        }
    }
</script>
</html>

以下是js代码，可写为js文件，以后使用调用js文件即可

function showWaiting(){
    var node=document.createElement("div");  //创建一个div元素节点，作为整个背景的容器
    var nodeClass=document.createAttribute("class"); //创建class元素属性
    var nodeStyle = document.createAttribute("style"); //创建style元素属性
    var nodeName = document.createAttribute("name"); //创建name元素属性
    nodeName.value = "divWaiting"; //给元素节点命名
    var nodeStyleVal = "position: fixed; z-index: 998; top: 0; right: 0; bottom: 0; left: 0; opacity: 1; background: rgba(0,0,0,0.2); vertical-align: middle; text-align: center;"
    	nodeStyleVal += "height:"+window.innerHeight + "px; width:"+window.innerWidth+"px;";
    nodeStyle.value = nodeStyleVal;
    node.setAttributeNode(nodeClass); //设置元素节点的属性及值
    node.setAttributeNode(nodeStyle);
    node.setAttributeNode(nodeName);
    var iconNode = document.createElement("div");  //创建一个div元素节点，作为旋转图标的容器
    var iconClass = document.createAttribute("class");
    iconClass.value = "fa fa-spinner fa-pulse"; //必须引用font-awesome
    var iconStyle = document.createAttribute("style");
    var iconStyleValue = "position: relative;top: 48%;margin: 0 auto;font-size: 30px;";
    iconStyle.value = iconStyleValue;
    iconNode.setAttributeNode(iconStyle);
    iconNode.setAttributeNode(iconClass);

    node.appendChild(iconNode);  //将图标节点放到整个背景的元素节点
    document.body.appendChild(node); //将整个背景div插入到body中
}

function closeWaiting(){
    var wait = document.getElementsByName("divWaiting"); //获取name为divWaiting的元素节点
    //遍历所有的节点，将body中的所有等待旋转效果去掉
    for(var i=wait.length - 1; i>=0; i--){
        document.body.removeChild(wait[i]);
    }
}

向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

云原生

所有评论(0)

查看更多评论

glgom

@glgom

已为社区贡献1条内容