重复提交解决的几种方法

网页保存效果实现

最新推荐文章于 2025-07-20 19:36:07 发布

iteye_4916

最新推荐文章于 2025-07-20 19:36:07 发布

阅读量405

点赞数

分类专栏： JS 文章标签： javascript ViewUI

JS 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及JavaScript实现网页数据保存时的加载效果的方法。通过创建覆盖层和提示文本，能够提升用户体验，并确保用户在等待数据保存期间不会进行其他操作。

1：当然首选 token 但是当要做去效果的时候。可以用JS来实现
2：把按钮灰色了。直接obj.disable=true
3：这种方法是让整个页面的被一个div占据，中间给令一个去一直执行方框。显示正在保存，这个方法还可以用来输入用户名和密码。提交后redirect到这个页面的action就可以了。这个方法一直到该action结束才会结束。


<div id="savingPanel" align="center" style="z-index: 100000; display: none; top: 0; left: 0; filter: Alpha(Opacity=50); width: 100%; height: 100%; position: absolute; background-color: #B6CAFD;"></div>
<div id="savingText" align="left" style="z-index: 100000; padding-left: 8; display: none; top: 0; left: 0; height: 24; width: 168; position: absolute; background-color: #B6CAFD; border-style: solid; border-width: 1; border-color: #4A8CE2;">正在保存数据，请稍候......</div>
<script type="text/javascript">
var isSaving = false;
var savingPanel = document.getElementById("savingPanel");
var savingText = document.getElementById("savingText");
var count = 0;
function startShowDataIsSaving()//直接调用
{
	isSaving = true;
	savingPanel.style.display = "block";
	savingText.style.display = "block";
	showDataIsSaving();
	showDataIsSavingText();
}
function endShowDataIsSaving()
{
	isSaving = false;
	savingPanel.style.display = "none";
	savingText.style.display = "none";
}
function showDataIsSaving()
{
	if(isSaving)
	{
		savingPanel.style.height = document.body.scrollHeight;
	savingPanel.style.width = document.body.scrollWidth;
	savingText.style.top = document.body.scrollTop + document.body.clientHeight / 2 - 12;
	savingText.style.left = document.body.scrollLeft + document.body.clientWidth / 2 - 84;
	setTimeout(showDataIsSaving);
	}
}
function showDataIsSavingText()
{
	if(isSaving)
	{
		savingText.innerHTML = "正在保存数据，请稍候.";
		for(var i = 0; i < count; i++)
		{
			savingText.innerHTML += ".";
		}
		count++;
		count = count % 5;
		setTimeout(showDataIsSavingText, 150);
	}
}
</script>