文档章节

轮播图页面的倒计时

俺又不乱来
 俺又不乱来
发布于 2016/04/08 17:26
字数 275
阅读 36
收藏 0

轮播图倒计时功能:(倒计时可轮播)

倒计时的显示代码需要放到显示图片和超链接之间

 <div class="downCount">
                           <div class="countdown-area">
                           <div class="csslb">
                           <div class="countdown-title">距离此活动开始还有</div>
                           <div class="countdown-dividingline"></div>
                                    <div id="countdown" class="countdown-time clearfix">
                                        <span class="day">-</span><span>天</span>
                                        <span class="hour">-</span><span>时</span>
                                        <span class="minute">-</span><span>分</span>
                                        <span class="second">-</span><span>秒</span>
                                    </div>
                                 </div>   
                                </div>
                           </div>
<script type="text/javascript">
                           $(function(){
                           //此处传入倒计时时间日期/此处需要格式化时间为yyyy/MM/dd HH:mm:ss
                                countDown("${fns:format(时间,'yyyy/MM/dd HH:mm:ss')}","#countdown .day","#countdown .hour","#countdown .minute","#countdown .second");
                            });

                            function countDown(time,day_elem,hour_elem,minute_elem,second_elem){
                                //if(typeof end_time == "string")
                                var end_time = new Date(time).getTime(),//月份是实际月份-1
                                //current_time = new Date().getTime(),
                                sys_second = (end_time-new Date().getTime())/1000;
                                var timer = setInterval(function(){
                                    if (sys_second > 0) {
                                        sys_second -= 1;
                                        var day = Math.floor((sys_second / 3600) / 24);
                                        var hour = Math.floor((sys_second / 3600) % 24);
                                        var minute = Math.floor((sys_second / 60) % 60);
                                        var second = Math.floor(sys_second % 60);
                                        day_elem && $(day_elem).text(day);//计算天
                                        $(hour_elem).text(hour<10?"0"+hour:hour);//计算小时
                                        $(minute_elem).text(minute<10?"0"+minute:minute);//计算分
                                        $(second_elem).text(second<10?"0"+second:second);// 计算秒
                                    } else { 
                                        clearInterval(timer);
                                    }
                                }, 1000);
                            }

                            </script>


© 著作权归作者所有

共有 人打赏支持
俺又不乱来
粉丝 0
博文 33
码字总数 6842
作品 0
徐汇
程序员
加载中

评论(3)

俺又不乱来
俺又不乱来

引用来自“jenn88”的评论

3 为神马有问题
你好!有什么问题啊!
俺又不乱来
俺又不乱来

引用来自“jenn88”的评论

3 为神马有问题

您好!遇到什么问题了啊!
jenn吖
jenn吖
3 为神马有问题
商品促销倒计时效果实现

效果图展示 这里写图片描述 所有的知识点总结如下: 轮播图实现:swiper插件 倒计时功能的实现 倒计时结束,抢购按钮变为可点击状态 轮播图的实现 swiper插件:开源,免费,强大的移动端触摸...

云焱
2017/12/03
0
0
2013 年最好的 20 款免费 jQuery 插件

互联网上面有很多 jQuery 插件,这里我们收集的是 2013 年最好的 20 款免费 jQuery 插件,这些插件对设计者和开发者都有很大的帮助,希望大家能够喜欢:) 现今互联网市场上提供很多 jQuery...

oschina
2014/01/11
12.7K
24
H5页面中的视频轮播(类似于banner轮播图效果)

先说下我的需求,如下图: 手机模型中间部分是视频播放,当一条视频播放完毕后,整屏会自动上滑切换到下一个视频。 详细效果展示请在PC端点击:http://www.17jianyue.cn/ 查看 提起轮播,我们...

guoxiaodi001
2017/05/12
0
0
授人以渔式解析原生JS写轮播图

需求与分析 需求: 循环无缝自动轮播五张图,按左右箭头可以手动切换图片,鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片。鼠标放到轮播图的图片上时不再自动轮播并且左...

Sadhu
10/16
0
0
使用axure动态面板制作轮播图效果

轮播图是网站、移动app首页中经常用到的视觉交互形式,本文中我们使用axure制作一个动态轮播图的案例。 达到的效果描述如下: 1.页面加载时自动向后轮播; 2.点击[1]处向前切换图片,切换后再...

狄睿鑫老师
2017/03/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

WinDbg

参考来自:http://www.cnit.net.cn/?id=225 SRV*C:\Symbols*http://msdl.microsoft.com/download/symbols ctrl + d to open dump_file Microsoft (R) Windows Debugger Version 6.12.0002.633......

xueyuse0012
今天
2
0
OSChina 周五乱弹 —— 想不想把92年的萝莉退货

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @罗马的王:分享松澤由美的单曲《地球ぎ》 很久没看圣斗士星矢了 《地球ぎ》- 松澤由美 手机党少年们想听歌,请使劲儿戳(这里) @开源中国首...

小小编辑
今天
12
1
springBoot条件配置

本篇介绍下,如何通过springboot的条件配置,控制Bean的创建 介绍下开发环境 JDK版本1.8 springboot版本是1.5.2 开发工具为 intellij idea(2018.2) 开发环境为 15款MacBook Pro 前言 很多时候,...

贺小五
今天
1
0
javascript source map 的使用

之前发现VS.NET会为压缩的js文添加一个与文件名同名的.map文件,一直没有搞懂他是用来做什么的,直接删除掉运行时浏览器又会报错,后来google了一直才真正搞懂了这个小小的map文件背后的巨大...

粒子数反转
昨天
1
0
谈谈如何学Linux和它在如今社会的影响

昨天,还在农耕脑力社会,今天已经人工智能技术、大数据、信息技术的科技社会了,高速开展并迅速浸透到当今科技社会的各个方面,Linux日益成为人们信息时代的到来,更加考验我们对信息的处理程...

linux-tao
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部