JS实现倒计时和文字滚动的效果实例

前端技术 2023/09/02 JavaScript

本文实例讲述了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);
</script>
 </form>

</body>
</html>

本文地址：https://www.stayed.cn/item/3569

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案