如何用JS实现10秒以后自动弹出表单窗口。

JavaScript010

如何用JS实现10秒以后自动弹出表单窗口。,第1张

表单的位置大小需要你用CSS设计。以下代码只是实现了你要的弹出功能。

<!DOCTYPE html>

<html>

 <head>

  <title>HTML模板</title>

  <meta charset="UTF-8"/>

  <style type="text/css">

   form{

    position:absolute

    left:100px

    top:50px

    width:400px

    height:300px

    border:1px solid #aaaaaa

   }

  </style>

  <script>

   var t

   function closeForm(){

    var form=document.getElementById("form")

    form.style.display="none"

   }

   function showForm(){

    var form=document.getElementById("form")

    form.style.display="block"

    window.clearTimeout(t)

   }

   function timer(){

    t=window.setTimeout(showForm,10000)

   }

  </script>

 </head>

 <body onload="timer()">

  <form id="form" style="display:none">

   <input type="text"/>

   <input type="button" value="关闭" onclick="closeForm()"/>

  </form>

 </body>

</html>

这个问题涉及到了两个知识点，一个知识点是利用js操作dom的css属性；另一个知识点是js进行定时操作。

有两种实现方式，一种是用原生js，另一种是用jquery。为了简单，以jquery为例：

<html>

<head>

<script src="./jquery.js"></script>

</head>

<body>

<div id="d1" style="display:none">d1</div>

<div id="d2">d2</div>

<script>

$(function(){

//转换div

function changeDiv(){

if($("#d1").style.display==none){

$("#d1").show()

$("#d2").hide()

}else{

$("#d1").hide()

$("#d2").show()

}

}

//利用setInterval，设置每隔10秒执行changeDiv函数。

window.setInterval("changeDiv()",10000)

})

</script>

</body>

</html>