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 刷新全集常用代码
Nov 22 Javascript
js 小数取整的函数
May 10 Javascript
Google AJAX 搜索 API实现代码
Nov 17 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
javascript中select下拉框的用法总结
Jan 07 Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 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为php增加openssl模块的方法
2011/06/14 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
js TextArea的选中区域处理
2010/12/28 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
jQuery中$.extend()用法实例
2015/06/24 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
javascript Function函数理解与实战
2017/12/01 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
对vue中methods互相调用的方法详解
2018/08/30 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
Layui实现主窗口和Iframe层参数传递
2019/11/14 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
python导入坐标点的具体操作
2019/05/10 Python
Python创建或生成列表的操作方法
2019/06/19 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
新锐科技Java程序员面试题
2016/07/25 面试题
编辑硕士自荐信范文
2013/11/27 职场文书
导航工程专业自荐信
2014/09/02 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
法人代表证明书
2014/09/18 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
党支部鉴定意见
2015/06/02 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
一篇带你入门Java垃圾回收器
2021/06/16 Java/Android