说明:一般我们在一些淘宝类店铺中会看到一些像搞竞拍之类的活动,从中我们时而会发现一些倒计时的效果,在一些年会等场合我们也会发现一些抽奖活动,从中我们也可以看到一些随即滚动的效果。这里给大家分享一种实现倒计时和文字滚动的方法,希望可以对大家有所帮助。这里主要是通过js实现的。
一、倒计时效果的实现
前台部分的完整代码如下:
复制代码 代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>倒计时效果的实现</title>
</head>
<body>
<form runat="server">
<div>计算中。。。</div>
<script type="text/javascript">
var i = 0;
function TimeTo(dd, nowtstr) {
var t = new Date(dd), //取得指定时间的总毫秒数
n = (new Date(nowtstr)) - (-100 * i), //取得当前毫秒数
c = t - n; //得到时间差
if (c <= 0) {//如果差小于等于0 也就是过期或者正好过期,则推出程序
document.getElementById('timer').innerHTML = '活动已经结束';
clearInterval(window['ttt']); //清除计时器
return; //结束执行
}
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('timer').innerHTML = '<p> <b>' + d + '</b> 天 <b>' + h + '</b> 小时 <b>' + m + '</b> 分<b>' + s + '</b> 秒</p>'; //最后这里将固定格式的字符串 更新到 ID为 timer的 div中
i++;
}
(function () {
window['ttt'] = setInterval(function () {
// var timestr = "<%=EndTimeStr %>";//这里可以通过后台向前台传递活动截止时间,注意要是"yyyy-MM-dd"这个格式的
// var nowtstr = "<%=NowTimeStr %>";//同样这里也可以通过后台向前台传递当前时间,注意也要是"yyyy-MM-dd"这个格式的
var timestr = "2013-10-21";//这里也可以自定义"yyyy-MM-dd"这个格式的截至活动时间
var nowtstr = "2013-08-23";//这里也可以自定义"yyyy-MM-dd"这个格式的当前时间
if (timestr != "") {
TimeTo(timestr, nowtstr); //定义倒计时的相差时间,注意格式
}
}, 100); //定义计时器,每隔100毫秒 也就是1秒 计算并更新 div的显示
})();
</script>
</form>
</body>
</html>
补充:倒计时效果精简版:
复制代码 代码如下: