文档章节

轮播图页面的倒计时

俺又不乱来
 俺又不乱来
发布于 2016/04/08 17:26
字数 275
阅读 37
收藏 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
【161203】工作小记

1、商城活动页面倒计时调整 2、修改主图轮播存在空白图片问题 3、了解typeScript

missjanel
2016/12/03
0
0
【2017-12-1】黄水勤:工作日志

1.增加用户申请成为平台客户审核失败页面。 2.客户管理增加点击审核状态可进行状态修改,客户管理修改功能完善。 3.用户端app,欢迎界面轮播修改成gif以及右上角有倒计时,可点击或等倒计时跳...

水勤
2017/12/01
0
0
Vue项目中使用better-scroll实现一个轮播图

前言 better-scroll是一个非常非常强大的第三方库 在移动端利用这个库 不仅可以实现一个非常类似原生ScrollView的效果 也可以实现一个轮播图的效果 这里就先记录一下自己实现这个效果的一些过...

皮蛋和豆树
12/03
0
0
2013 年最好的 20 款免费 jQuery 插件

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

oschina
2014/01/11
12.9K
24

没有更多内容

加载失败,请刷新页面

加载更多

Ubuntu18.04 安装MySQL

1.安装MySQL sudo apt-get install mysql-server 2.配置MySQL sudo mysql_secure_installation 3.设置MySQL非root用户 设置原因:配置过程为系统root权限,在构建MySQL连接时出现错误:ERROR...

AI_SKI
今天
2
0
3.6 rc脚本(start方法) 3.7 rc脚本(stop和status方法) 3.8 rc脚本(以daemon方式启动)

3.6-3.7 rc脚本(start、stop和status方法) #!/usr/bin/env python# -*- coding: utf-8 -*-# [@Version](https://my.oschina.net/u/931210) : python 2.7# [@Time](https://my.oschina.......

隐匿的蚂蚁
今天
3
0
Cnn学习相关博客

CNN卷积神经网络原理讲解+图片识别应用(附源码) 笨方法学习CNN图像识别系列 深度学习图像识别项目(中):Keras和卷积神经网络(CNN) 卷积神经网络模型部署到移动设备 使用CNN神经网络进行...

-九天-
昨天
4
0
flutter 底部输入框 聊天输入框 Flexible

想在页面底部放个输入框,结果键盘一直遮住了,原来是布局问题 Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("评论"), ...

大灰狼wow
昨天
4
0
Kernel I2C子系统

备注:所有图片来源于网络 1,I2C协议: 物理拓扑: I2C总线由两根信号线组成,一条是时钟信号线SCL,一条是数据信号线SDA。一条I2C总线可以接多个设备,每个设备都接入I2C总线的SCL和SDA。I...

yepanl
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部