怎么用js实现延时弹出窗口

JavaScript013

怎么用js实现延时弹出窗口,第1张

延迟出口弹出,最简单方法就是用js里的setTimeout方法,下面是一个简单的例子:

<body>

<input type="button" id="btn" value="click me" />

<div id="div" style="width:100pxheight:100pxbackground:#cccdisplay:none"

</body>

<script>

var oDiv = document.getElementById('div')

var oBtn = document.getElementById('btn')

oBtn.onclick=function(){

setTimeout(function(){

oDiv.style.display = 'block'

},1000)

}

</script>

点击btn后然div一秒后显示。

1.setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

<html>

<body>

<input type="text" id="clock" size="35" />

<script language=javascript>

var int=self.setInterval("clock()",50)

function clock()

  {

  var t=new Date()

  document.getElementById("clock").value=t

  }

</script>

</form>

<button onclick="int=window.clearInterval(int)">

Stop interval</button>

</body>

</html>

2.setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。setTimeout() 只执行 code 一次。

<html>

<head>

<script type="text/javascript">

function timedMsg()

{

   var t=setTimeout("alert('5 seconds!')",5000)

}

</script>

</head>

<body>

<form>

<input type="button" value="Display timed alertbox!" onClick="timedMsg()">

</form>

<p>Click on the button above. An alert box will be displayed after 5 seconds.</p>

</body>

</html>

1、使用两个setTimeout 第个用意是1秒后调用onWidthChange函数,第二处是在函内部每当函数运行结束1秒后再次调用onWidthChange函数,这里实现了每过1秒都会调用onWidthChange函数。

2、$(document).ready(function(){})

文档载入完成执行,如果代码在文档底部执行,文档说明已加载过了。这里就可以不用