文档章节

轮播图页面的倒计时

俺又不乱来
 俺又不乱来
发布于 2016/04/08 17:26
字数 275
阅读 32
收藏 0
点赞 1
评论 3

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

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

 <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
博文 32
码字总数 6842
作品 0
徐汇
程序员
加载中

评论(3)

俺又不乱来
俺又不乱来

引用来自“jenn88”的评论

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

引用来自“jenn88”的评论

3 为神马有问题

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

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

云焱 ⋅ 2017/12/03 ⋅ 0

2013 年最好的 20 款免费 jQuery 插件

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

oschina ⋅ 2014/01/11 ⋅ 24

H5页面中的视频轮播(类似于banner轮播图效果)

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

guoxiaodi001 ⋅ 2017/05/12 ⋅ 0

landptf/landptf

自定义控件 #一 Android Studio 引用方式 在build.gradle文件中加入 compile 'com.landptf:landptf:1.0.2' #二 控件效果及实现 1 Android自定义控件系列(一)—Button七十二变 2 Android自定义...

landptf ⋅ 2017/03/06 ⋅ 0

使用axure动态面板制作轮播图效果

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

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

8.轮播图组件及vue-awesome-swiper的引入(手把手教你用vue+node+mongodb搭建一个小商城)

GitHub:https://github.com/Ewall1106/mall 一、新建home.vue 1、上篇我们为了便于展示,把头部组件放在了页面,现在我们删掉里面的头部组件然后我们在view文件里面新建一个页面,然后把头部...

Ewall_ ⋅ 05/30 ⋅ 0

【京东商城首页实战11】制作轮播图

上一节咱们添加了通栏背景并了解了布局思路,下面就开始做轮播图啦! 附上轮播图图片: 分析: 1.轮播图左右切换按钮和轮播序号都显示在图片上,所以可以利用定位来做。 2.轮播序号是一个盒子...

sinat_34647836 ⋅ 2017/05/04 ⋅ 0

Android ViewPager+Fragment生命周期优化

一.页面缓存 ViewPager默认会缓存1~2个页面,也就是当前页面的前一个页面和后一个页面,如果后一个页面不存在,则不在缓存,反之会被缓存 offscreenPageLimit的默认值为1 int offscreenPage...

IamOkay ⋅ 2015/03/23 ⋅ 0

回顾自己三次失败的面试经历

前言 时间的齿轮已经来到了2017年的11月份,距离2018年仅仅还剩下不到两个月的时间。站在这个时间点上,我对自己之前三次失败的面试经历做了一次深度回顾。 可能很多小伙伴会问,为什么要去回...

闰土少年 ⋅ 2017/11/13 ⋅ 0

回顾自己三次失败的面试经历

前言 时间的齿轮已经来到了2017年的11月份,距离2018年仅仅还剩下不到两个月的时间。站在这个时间点上,我对自己之前三次失败的面试经历做了一次深度回顾。 可能很多小伙伴会问,为什么要去回...

闰土少年1991 ⋅ 2017/11/13 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Centos7重置Mysql 8.0.1 root 密码

问题产生背景: 安装完 最新版的 mysql8.0.1后忘记了密码,向重置root密码;找了网上好多资料都不尽相同,根据自己的问题总结如下: 第一步:修改配置文件免密码登录mysql vim /etc/my.cnf 1...

豆花饭烧土豆 ⋅ 今天 ⋅ 0

熊掌号收录比例对于网站原创数据排名的影响[图]

从去年下半年开始,我在写博客了,因为我觉得业余写写博客也还是很不错的,但是从2017年下半年开始,百度已经推出了原创保护功能和熊掌号平台,为此,我也提交了不少以前的老数据,而这些历史...

原创小博客 ⋅ 今天 ⋅ 0

LVM讲解、磁盘故障小案例

LVM LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理。 1.新建分区,更改类型为8e 即L...

蛋黄Yolks ⋅ 今天 ⋅ 0

Hadoop Yarn调度器的选择和使用

一、引言 Yarn在Hadoop的生态系统中担任了资源管理和任务调度的角色。在讨论其构造器之前先简单了解一下Yarn的架构。 上图是Yarn的基本架构,其中ResourceManager是整个架构的核心组件,它负...

p柯西 ⋅ 今天 ⋅ 0

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 今天 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 2

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

创建新用户和授予MySQL中的权限教程

导读 MySQL是一个开源数据库管理软件,可帮助用户存储,组织和以后检索数据。 它有多种选项来授予特定用户在表和数据库中的细微的权限 - 本教程将简要介绍一些选项。 如何创建新用户 在MySQL...

问题终结者 ⋅ 昨天 ⋅ 0

android -------- 颜色的半透明效果配置

最近有朋友问我 Android 背景颜色的半透明效果配置,我网上看资料,总结了一下, 开发中也是常常遇到的,所以来写篇博客 常用的颜色值格式有: RGB ARGB RRGGBB AARRGGBB 这4种 透明度 透明度...

切切歆语 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部