文档章节

轮播图页面的倒计时

俺又不乱来
 俺又不乱来
发布于 2016/04/08 17:26
字数 275
阅读 35
收藏 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
landptf/landptf

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

landptf
2017/03/06
0
0
使用axure动态面板制作轮播图效果

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

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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

spring-boot | 日志

引言 好久不见,都还好吗? 大家都知道,我一般都是带来实用的东西,这次也一样,我们来试试项目开发中的日志处理。 理论知识 1、为什么要用日志?你是否因为项目出现问题,查找日志文件定位...

成都_小冯同学
15分钟前
0
0
dubbo下的补偿实现(一)

背景 由于前面几篇文章涉及的问题 分布式事务的思考 在我们微服务的场景下 各种本地事务都没有办法控制的很好。 A服务调用B服务 当B服务成功提交之后 A发生了异常 这种情况下要如何处理呢??...

Mr_Qi
23分钟前
2
0
HTML显示json字符串并且进行格式化

通过pre标签进行格式化展示,使用JSON.stringify()方法转换。 代码如下:   <html> <head> <title>HTML显示json字符串并且进行格式化</title> </head> <body> <p id="show_p">{ "name": "B......

writeademo
44分钟前
0
0
LNMP——php-fpm

php-fpm的pool •vim /usr/local/php/etc/php-fpm.conf //在[global]部分增加include并删除我们之前www池子 • include = etc/php-fpm.d/*.conf • mkdir /usr/local/php/etc/php-fpm.d/ • ......

chencheng-linux
47分钟前
0
0
TensorFlow layers slim 模块搭建cnn对mnist分类,比较bn效果

shape变化 (?, 784)(?, 28, 28, 1)(?, 14, 14, 8)(?, 7, 7, 8)(?, 1, 1, 8)(?, 8)(?, 10) 结果对比,基本上还是有点用的 0.91725457 0.9232 0.9548 0.95530.9177273 0.9234 0....

阿豪boy
50分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部