快捷導(dǎo)航

JS實現(xiàn)倒計時和文字滾動的效果實例

更新時間：2014年10月29日 10:37:22 投稿：shichen2014

這篇文章主要介紹了JS實現(xiàn)倒計時和文字滾動的效果,以實例的形式分析了倒計時與文字滾動效果的具體實現(xiàn)方法,并附有js時間變量的說明,非常具有實用價值,需要的朋友可以參考下

本文實例講述了JS實現(xiàn)倒計時和文字滾動效果的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：

說明：一般我們在一些淘寶類店鋪中會看到一些像搞競拍之類的活動，從中我們時而會發(fā)現(xiàn)一些倒計時的效果，在一些年會等場合我們也會發(fā)現(xiàn)一些抽獎活動，從中我們也可以看到一些隨即滾動的效果。這里給大家分享一種實現(xiàn)倒計時和文字滾動的方法，希望可以對大家有所幫助。這里主要是通過js實現(xiàn)的。

一、倒計時效果的實現(xiàn)

前臺部分的完整代碼如下：

復(fù)制代碼代碼如下:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   <title>倒計時效果的實現(xiàn)</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), //取得指定時間的總毫秒數(shù)

        n = (new Date(nowtstr)) - (-100 * i), //取得當前毫秒數(shù)

        c = t - n; //得到時間差

            if (c <= 0) {//如果差小于等于0  也就是過期或者正好過期，則推出程序

                document.getElementById('timer').innerHTML = '活動已經(jīng)結(jié)束';

                clearInterval(window['ttt']); //清除計時器

                return; //結(jié)束執(zhí)行

            }

            var ds = 60 * 60 * 24 * 1000, //一天共多少毫秒

        d = parseInt(c / ds), //總毫秒除以一天的毫秒 得到相差的天數(shù)

        h = parseInt((c - d * ds) / (3600 * 1000)), //然后取完天數(shù)之后的余下的毫秒數(shù)再除以每小時的毫秒數(shù)得到小時

        m = parseInt((c - d * ds - h * 3600 * 1000) / (60 * 1000)), //減去天數(shù)和小時數(shù)的毫秒數(shù)剩下的毫秒，再除以每分鐘的毫秒數(shù)，得到分鐘數(shù)

        s = parseInt((c - d * ds - h * 3600 * 1000 - m * 60 * 1000) / 1000);  //得到最后剩下的毫秒數(shù)除以1000 就是秒數(shù)，再剩下的毫秒自動忽略即可

            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>

補充：倒計時效果精簡版:

復(fù)制代碼代碼如下:

<!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>倒計時精簡版效果的實現(xiàn)</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('活動已經(jīng)結(jié)束');
        clearInterval(aa);//清除定時器
    }
       var ds = 60 * 60 * 24 * 1000, //一天共多少毫秒
        d = parseInt(c / ds), //總毫秒除以一天的毫秒得到相差的天數(shù)
        h = parseInt((c - d * ds) / (3600 * 1000)), //然后取完天數(shù)之后的余下的毫秒數(shù)再除以每小時的毫秒數(shù)得到小時
        m = parseInt((c - d * ds - h * 3600 * 1000) / (60 * 1000)), //減去天數(shù)和小時數(shù)的毫秒數(shù)剩下的毫秒，再除以每分鐘的毫秒數(shù)，得到分鐘數(shù)
        s = parseInt((c - d * ds - h * 3600 * 1000 - m * 60 * 1000) / 1000); //得到最后剩下的毫秒數(shù)除以1000 就是秒數(shù)，再剩下的毫秒自動忽略即可
            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);
</script>
</form>

</body>
</html>

最終我們可以看到類似于如下圖所示的效果：

二、文字滾動效果的實現(xiàn)

前臺代碼部分如下：

復(fù)制代碼代碼如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>文字滾動效果的實現(xiàn)</title>
   <script type="text/javascript" src="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); //頁面加載的時候執(zhí)行
});

最終實現(xiàn)的效果圖如下：

知識補充：

var myDate = new Date();
myDate.getYear(); //獲取當前年份(2位)
myDate.getFullYear(); //獲取完整的年份(4位,1970-????)
myDate.getMonth(); //獲取當前月份(0-11,0代表1月)
myDate.getDate(); //獲取當前日(1-31)
myDate.getDay(); //獲取當前星期X(0-6,0代表星期天)
myDate.getTime(); //獲取當前時間(從1970.1.1開始的毫秒數(shù))
myDate.getHours(); //獲取當前小時數(shù)(0-23)
myDate.getMinutes(); //獲取當前分鐘數(shù)(0-59)
myDate.getSeconds(); //獲取當前秒數(shù)(0-59)
myDate.getMilliseconds(); //獲取當前毫秒數(shù)(0-999)
myDate.toLocaleDateString(); //獲取當前日期
var mytime=myDate.toLocaleTimeString(); //獲取當前時間
myDate.toLocaleString( ); //獲取日期與時間

希望本文所述對大家基于js的web程序設(shè)計有所幫助。

您可能感興趣的文章: