防止页面重复提交 (续）

最新推荐文章于 2024-05-29 07:51:18 发布

zlz_212

最新推荐文章于 2024-05-29 07:51:18 发布

阅读量885

点赞数

文章标签： function div javascript button float input

本文链接：https://blog.csdn.net/zlz_212/article/details/1108305

版权

这个想法的来源是126邮箱，当点发送之后，整个页面会被一个层遮住，同时弹出一个提示窗口。
基于这种方式，如果我们在用户点提交之后用一个层把整个页面遮盖住，用户就不能点任何的东西，从而防止用户重复点击提交按钮。
详细代码如下：

<html>
<head>
  <title>
   哈哈
  </title>
  <script language="javascript">
   function alertMsg()
   {
    //alert("haha");
    var T=document.getElementById("t");
    var S=t.style;
    S.display="";

    var M=document.getElementById("TheDiv").style;
    M.left=(document.body.offsetWidth-parseInt(M.width))/2;
    M.top=(document.body.offsetHeight-parseInt(M.height))/2;
    M.display="";
   }

   function setCookie(top,left)
{
document.cookie="top="+top;
document.cookie="left="+left;
}
function getCookie(name)
{
var mycookie=document.cookie;
var start=mycookie.indexOf(name+"=");
if (start!=-1)
{
start=mycookie.indexOf("=",start)+1;
var end=mycookie.indexOf(";",start);
if (end==-1)
end=mycookie.length;
var value=unescape(mycookie.substring(start,end));
if (value!=null)
{
var obj=document.getElementById("TheDiv");
if (name=="top")
obj.style.top=value;
if (name="left")
obj.style.left=value;
}
}
}
function moveobj(obj)
{
var x=event.clientX;
var y=event.clientY;
obj.setCapture();
function obj.onmousemove()
{
if(obj)
{
var nx=event.clientX;
var ny=event.clientY;
window.status="X="+nx+"Y="+ny;
obj.style.posLeft+=nx-x;
obj.style.posTop+=ny-y;
x=nx;
y=ny;
}
}
function obj.onmouseup()
{
var stop=0;
obj.releaseCapture();
var nowtop=obj.style.top;
var nowleft=obj.style.left;
setCookie(nowtop,nowleft);
obj=false;
}
}
function setspan()
{
span1.style.background="red";
}

function re()
{
    var T=document.getElementById("t");
    var S=t.style;
    S.display="none";

    var M=document.getElementById("TheDiv").style;
    M.display="none";

}
  </script>
</head>
<body>
  <div style="position:absolute;width:1024;height:800;background-color=beige;filter:Alpha(opacity=60);display:none" id="t"></div>
  <input type="button" id="test" value="提交数据" οnclick="alertMsg()" />
  <div id="TheDiv" οnmοusedοwn="moveobj(this)" style=" float:left; position:absolute;width:200px;height:200px;background:#355ddd;border:1px #356999 solid;cursor:move; z-index:0;display:none">
   <div align=center>
    <span id="span1" style="width:100px;height:100px;background:#355ddd; z-index:1;" οnmοuseοver="setspan();">
     sdfsd
    </span>
   </div>
   <div align="center"><input type="buttom" id="clk" οnclick="re()" value="已完成"/><div>
  </div>
</body>
</html>