萬盛學電腦網 >> 腳本專題 >> javascript >> JS實現倒計時和文字滾動的效果實例
JS實現倒計時和文字滾動的效果實例
說明：一般我們在一些淘寶類店鋪中會看到一些像搞競拍之類的活動，從中我們時而會發現一些倒計時的效果，在一些年會等場合我們也會發現一些抽獎活動，從中我們也可以看到一些隨即滾動的效果。這裡給大家分享一種實現倒計時和文字滾動的方法，希望可以對大家有所幫助。這裡主要是通過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 id="timer">計算中。。。</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 style="margin-top:5px;"> <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>
補充：倒計時效果精簡版:
代碼如下: <!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 border="1">
<tr>
<th id="day" width="100"></th>
<th id="day2"width="100"></th>
<th id="day3"width="100"></th>
<th id="day4"width="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 style="margin-top:5px;"> <b>' + d + '</b>天 </p>';
document.getElementById('day2').innerHTML = '<p style="margin-top:5px;"> <b>' + h + '</b> 時</p>';
document.getElementById('day3').innerHTML = '<p style="margin-top:5px;"> <b>' + m + '</b> 分</p>'
document.getElementById('day4').innerHTML = '<p style="margin-top:5px;"> <b>' + s + '</b> 秒</p>'
}
var aa = setInterval(timestr,1000);<
