文档章节

倒计时效果

Clover286
 Clover286
发布于 2017/04/27 15:50
字数 154
阅读 9
收藏 0

说明:前端实现,jQuery

一.参考文献

1.GitHub:https://github.com/Reflejo/jquery-countdown

二.使用方法

1.引入依赖

<link rel="stylesheet" type="text/css" href="../css/media.css">
<script type="text/javascript" src="../js/jquery1.91.min.js"></script>		
<script type="text/javascript" src="../js/jquery.countdown.min.js"></script>

2.初始化

HTML

<!-- 倒计时开始 -->
<div class="wrapper">
	<div class="cell">
		<div id="holder">
			<div id="counter"></div>
		</div>
	</div>
</div>
<!-- 倒计时结束 -->

JS

如下这个例子是根据官网Complete usage改变的,其他情况请参考官网。另:样式可根据需求改

$(function(){
	 $('#counter').countdown({
    image: "../img/digits.png",
   	stepTime: 60,
    format: 'mm:ss',
    startTime: "10:00",//10分钟倒计时
    timerEnd: function() {
//倒计时结束执行
},
  });
})

 

© 著作权归作者所有

共有 人打赏支持
Clover286
粉丝 8
博文 199
码字总数 65713
作品 0
武汉
程序员
私信 提问
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)

前言:   此事例是在vue组件中,使用canvas实现倒计时动画的效果。其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了   canvas动画的原理:利用定时器...

damon风
2017/11/23
0
0
js倒计时效果

不涉及任何图片等,直接复制然后运行即可! 下载地址请点击 效果截图:可创建多个实例 html:结构: js:多实例调用 效果1 倒计时,把div的id作为容器参数,总秒数做参数,还可以设置结束时调...

透笔度
2016/05/18
192
2
6款不容错过的超棒倒计时jQuery插件

日期:2012-11-12 来源:GBin1.com 如果你曾经开发过类似限时抢购的网站或者应用的话,或者你需要在发布一款超棒游戏之前添加一些神秘元素的话,一个超棒或者超酷的倒计时页面绝对是非 常有必...

gbin1
2012/11/13
1
0
10 款精致的 jQuery 倒计时插件推荐

倒计时功能在很多项目中都会使用到,比如网站维护、团购网站和限时下载网站等等。通过使用jQuery倒计时插件,你可以简化你的工作量,却同样创造出超酷的jQuery倒计时功能。 本文整理了10款j...

鉴客
2012/04/16
3.1K
5
Android优化之内存优化倒计时篇

本文来自网易云社区 作者:聂雷震 本篇文章介绍的内容是如何在安卓手机上实现高效的倒计时效果,这个高效有两个标准:1、刷新频率足够高,让用户觉得这个倒计时的确是倒计时,而不是幻灯片;...

网易云
2018/09/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql 查询当天、本周,本月,上一个月的数据

今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天 SELECT * FROM 表名 WHERE TO_DAYS( NOW( ) ) - TO_DAYS( 时间字段名) <= 1 近7天 SELECT * FROM 表名 wher......

BraveLN
20分钟前
2
0
Android Multimedia框架总结(六)C++中MediaPlayer的C/S架构

前面几节中,都是通过java层调用到jni中,jni向下到c++层并未介绍 看下Java层一个方法在c++层 MediaPlayer后续过程 frameworks/av/media/libmedia/MediaPlayer.cpp 找一个我们之前熟悉的setDa...

天王盖地虎626
38分钟前
2
0
【Linux】【MySQL】CentOS7安装最新版MySQL8.0.13(最新版MySQL从安装到运行)

1、前言   框框博客在线报时:2018-11-07 19:31:06   当前MySQL最新版本:8.0.13 (听说比5.7快2倍)   官方之前表示:MySQL 8.0 正式版 8.0.11 已发布,MySQL 8 要比 MySQL 5.7 快 2 ...

Code辉
38分钟前
1
0
oracle dg备库重建redolog:ora-00313,ora-00312

trace文件: Errors in file /crbank/dbs/app/product/diag/rdbms/rdbs/dbs/trace/dbs_mrp0_24445130.trc: ORA-00313: open failed for members of log group 8 of thread 1 ORA-00312: onl......

hnairdb
52分钟前
1
0
深入分析Java I/O的工作机制 (一)

1.Java的I/O类库的基本架构 先说一下什么是类库:可以说是类的集合,类库包括接口、抽象类、具体类等。 I/O是机器获取和交互信息的主要渠道。 java在I/O上也一直在做持续的优化,在1.4版开始...

java菜分享
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部