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


Posted in Javascript onOctober 29, 2014

本文实例讲述了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>

最终我们可以看到类似于如下图所示的效果:

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>

   <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); //页面加载的时候执行

 });
      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" id="TextBox1"/>

<input type="button" value="开始抽奖" onClick="TimeTo2();"/>

<input type="button" value="获取幸运观众" onClick="stopInterval();"/>

</form>

</body>

</html>

最终实现的效果图如下:

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

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

知识补充:

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开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime=myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间

希望本文所述对大家基于js的web程序设计有所帮助。

Javascript 相关文章推荐
javascript的事件描述
Sep 08 Javascript
jquery 笔记 事件
Nov 02 Javascript
阻止子元素继承父元素事件具体思路及实现
May 02 Javascript
javascript中数组中求最大值示例代码
Dec 18 Javascript
优化javascript的执行效率一些方法总结
Dec 25 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
vue内置组件transition简单原理图文详解(小结)
Jul 12 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
解决vuecli3中img src 的引入问题
Aug 04 Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 #Javascript
jQuery中parents()和parent()的区别分析
Oct 28 #Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 #Javascript
JS对象与json字符串格式转换实例
Oct 28 #Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 #Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 #Javascript
JavaScript极简入门教程(三):数组
Oct 25 #Javascript
You might like
php将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
php mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
浅析使用Turck-mmcache编译来加速、优化PHP代码
2013/06/20 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
文本框中,回车键触发事件的js代码[多浏览器兼容]
2010/06/07 Javascript
深入理解JavaScript 闭包究竟是什么
2013/04/12 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
浅析javascript中函数声明和函数表达式的区别
2015/02/15 Javascript
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
three.js 如何制作魔方
2020/07/31 Javascript
python 快速排序代码
2009/11/23 Python
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
python实现录音小程序
2020/10/26 Python
python实现从pdf文件中提取文本,并自动翻译的方法
2018/11/28 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
精灵市场:Pixie Market
2019/06/18 全球购物
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
哈曼俄罗斯官方网上商店:Harman.club
2020/07/24 全球购物
关于安全演讲稿
2014/05/09 职场文书
中文专业求职信
2014/06/20 职场文书
2014年教研组工作总结
2014/11/26 职场文书
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android