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 相关文章推荐
jquery获取checkbox的值并post提交
Jan 14 Javascript
Js与Jq获取浏览器和对象值的方法
Mar 18 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
JavaScript实现星级评分
Jan 12 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
javaScript中的空值和假值
Dec 18 Javascript
Javascript实现购物车功能的详细代码
May 08 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 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中几个常用的魔术常量
2012/02/23 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
基于jquery的Repeater实现代码
2010/07/17 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
layui中table表头样式修改方法
2018/08/15 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
在Django的模板中使用认证数据的方法
2015/07/23 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
2014升学宴答谢词
2014/01/26 职场文书
会计专业应届生自荐信
2014/02/07 职场文书
新春联欢会主持词
2014/03/24 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
谢师宴邀请函
2015/02/02 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
革命电影观后感
2015/06/18 职场文书
欢迎新生标语2015
2015/07/16 职场文书