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 06 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
jQuery中has()方法用法实例
Jan 06 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
原生js实现放大镜特效
Mar 08 Javascript
WebSocket实现简单客服聊天系统
May 12 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
JS实现页面数据懒加载
Feb 13 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 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极大的增强功能和性能
2006/10/09 PHP
php 多关键字 高亮显示实现代码
2012/04/23 PHP
linux中cd命令使用详解
2015/01/08 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
Python中的字典遍历备忘
2015/01/17 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
对python 调用类属性的方法详解
2019/07/02 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
Python Merge函数原理及用法解析
2020/09/16 Python
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
实现向右循环移位
2014/07/31 面试题
SQL注入攻击的种类有哪些
2013/12/30 面试题
《充气雨衣》教学反思
2014/04/07 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
超市员工管理制度
2015/08/06 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技