几个不错js倒计时程序实例
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] js要实现倒计时我们需要用到setTimeout函数来操作，setTimeout可以设置执行的时间也可以把显示时间放到input,div或其它容器中。...
|
1.简单的计时弹窗：
在这个实例中，我们将在页面上创建一个按钮，当这个按钮被点击时，页面上就将会在3秒后跳出警告窗
口，请看具体的代码，大家可以自行测试即可：
| 代码如下 |
复制代码 |
|
//javascript简单的计时
<html>
<head>
<script type="text/javascript">
//创建一个函数用来执行计时弹窗
function timedMsgDemo()
{
//声明变量，用来接收3秒弹窗，这里的时间单位为毫秒
var timeDemo=setTimeout("alert('3秒弹窗！')",3000)
}
</script>
</head>
<body>
<form>
//创建一个按钮，用来触发事件
<input type="button" value="点击按钮，3秒后显示弹窗" onClick = "timedMsgDemo()">
</form>
<p>当你点击这个按钮之后，页面将会在3秒后跳出警告窗口！</p>
</body>
</html>
|
2.显示预订时间的计时特效：
在这个实例中，我们预先设定几个时间，当页面显示到这个时间时，页面上则会显示出我们预订的这几
个时间，通过这个实例，我们完全可以灵活的去实现很多计时的特效，比如说每当页面超过了多长时间
后，页面上则会自动显示用户已经登录多长时间的提示，请看下面的示例代码，您可以自行扩展：
| 代码如下 |
复制代码 |
|
//预先设置几个时间，每当页面打开到达这个时间，页面上则会显示不同文本
<html>
<head>
<script type="text/javascript">
function timedTextDemo()
{
//一定要注意时间单位为毫秒数
var txt1=setTimeout("document.getElementById('txt').value='您已经在线1分钟！欢迎撸主归
来！'",60000)
var txt2=setTimeout("document.getElementById('txt').value='您已经在线10分钟！小撸怡情！
'",600000)
var txt3=setTimeout("document.getElementById('txt').value='您已经在线1小时！大撸伤身，
请保重身体！'",3600000)
}
</script>
</head>
<body>
<form>
<input type="button" value="点击按钮每隔一段时间显示不同文本" onClick="timedTextDemo
()">
//创建一个文本框，用来显示我们要输出的文本
<input type="text" id="txt">
</form>
<p>在本实例中，当页面打开时间分别为1分钟、10分钟、1小时三个时间时，在文本框中则会显示不
同的文本</p>
</body>
</html>
|
3.简单的时钟特效：
这个特效还是挺简单的，不过也是最为实用的一个特效，大家请结合上两篇内容知识来分析，很简单，
自行扩展的话，效果会很好,请看下面的代码：
| 代码如下 |
复制代码 |
|
<html>
//页面上显示简单的小时钟特效
<head>
<script type="text/javascript">
//创建一个函数，用来显示时钟
function startTimeDemo()
{
//创建一个新时间对象
var today=new Date()
//声明一个变量用来接收小时数
var h=today.getHours()
//接收分钟数
var m=today.getMinutes()
//接收秒数
var s=today.getSeconds()
m=checkTimeDemo(m)
s=checkTimeDemo(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTimeDemo()',500)
}
//在数字面前添加一个0，当数值小于10的时候
function checkTimeDemo(i)
{
if (i<10)
{i="0" + i}
return i
}
</script>
</head>
<body onload="startTimeDemo()">
<div id="txt"></div>
</body>
</html>
|
好了，目前就先提供三个实例供大家学习参考，请继续关注后续内容吧！ |
