<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>倒计时精简版效果的实现</title>
</head>
<body>
<form runat="server">
<table>
<tr>
<th></th>
<thwidth="100"></th>
<thwidth="100"></th>
<thwidth="100"></th>
</tr>
</table>
<script type="text/javascript">
function timestr()
{
var c = Date.parse("2014-11-11")-Date.parse((new Date()));
if(c<=0)
{
alert('活动已经结束');
clearInterval(aa);//清除定时器
}
var ds = 60 * 60 * 24 * 1000, //一天共多少毫秒
d = parseInt(c / ds), //总毫秒除以一天的毫秒 得到相差的天数
h = parseInt((c - d * ds) / (3600 * 1000)), //然后取完天数之后的余下的毫秒数再除以每小时的毫秒数得到小时
m = parseInt((c - d * ds - h * 3600 * 1000) / (60 * 1000)), //减去天数和小时数的毫秒数剩下的毫秒，再除以每分钟的毫秒数，得到分钟数
s = parseInt((c - d * ds - h * 3600 * 1000 - m * 60 * 1000) / 1000); //得到最后剩下的毫秒数除以1000 就是秒数，再剩下的毫秒自动忽略即可
document.getElementById('day').innerHTML = '<p> <b>' + d + '</b>天 </p>';
document.getElementById('day2').innerHTML = '<p> <b>' + h + '</b> 时</p>';
document.getElementById('day3').innerHTML = '<p> <b>' + m + '</b> 分</p>'
document.getElementById('day4').innerHTML = '<p> <b>' + s + '</b> 秒</p>'
}
var aa = setInterval(timestr,1000);
</script>
</form>
</body>
</html>
最终我们可以看到类似于如下图所示的效果：
二、文字滚动效果的实现
前台代码部分如下：
复制代码 代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字滚动效果的实现</title>
<script type="text/javascript" src="https://www.jb51.net/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
function TimeTo(dd) {
document.getElementById('TextBox1').value = dd; //最后这里将固定格式的字符串 更新到 ID为 TextBox1的文本框中
}
$(function(){
window['ttt'] = setInterval(aaa,100); //页面加载的时候执行
});
function stopInterval()
{
clearInterval(window['ttt']); //清除计时器
window['ttt']="";
var aa = "张三,李四,王五,赵六,孙七,胡八,曾九,刘十,伊一,朴二";
var arr = aa.split(',');
var rdd = 9 * Math.random();
var leth = Math.round(rdd);
var leths = arr[leth].toString();
document.getElementById('TextBox1').value = leths;
}
function aaa() {
var aa = "张三,李四,王五,赵六,孙七,胡八,曾九,刘十,伊一,朴二";
var arr = aa.split(',');
var rdd = 9 * Math.random();
var leth = Math.round(rdd);
var leths = arr[leth].toString();
TimeTo(leths)
}
function TimeTo2(){
if(window['ttt']==""){
window['ttt'] = setInterval(aaa,100);
}
}
</script>
</head>
<body>
<form runat="server">
<input type="text"/>
<input type="button" value="开始抽奖"/>
<input type="button" value="获取幸运观众"/>
</form>
</body>
</html>
最终实现的效果图如下：
知识补充：