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 this用法小结
Dec 19 Javascript
jquery获取table中的某行全部td的内容方法
Mar 08 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
js实现select组件的选择输入过滤代码
Oct 14 Javascript
最佳的JavaScript错误处理实践
Jul 16 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
原生JS封装animate运动框架的实例
Oct 12 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 Javascript
用node.js写一个jenkins发版脚本
May 21 Javascript
如何在JS文件中获取Vue组件
Sep 16 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 ADODB使用方法集锦
2008/03/25 PHP
php源代码安装常见错误与解决办法分享
2013/05/28 PHP
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
php中cookie的使用方法
2014/03/29 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
Bootstrap实现下拉菜单多级联动
2017/11/23 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
python模块之time模块(实例讲解)
2017/09/13 Python
python微信跳一跳系列之色块轮廓定位棋盘
2018/02/26 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
NumPy排序的实现
2020/01/21 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
Vrbo英国:预订度假屋
2020/08/19 全球购物
请假条怎么写
2014/04/10 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
党员思想汇报材料
2014/12/19 职场文书
施工员岗位职责
2015/02/10 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏