文档章节

倒计时效果

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
Android优化之内存优化倒计时篇

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

网易云
09/14
0
0
10 款精致的 jQuery 倒计时插件推荐

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

鉴客
2012/04/16
3.1K
5
点击按钮 倒计时60秒方可再次点击发送的Js代码

本节内容: Javascript 实现 点击按钮 倒计时60秒方可再次点击发送的效果。 比如,一些网站上的手机短信认证的功能,有类似实现点击按钮后,倒计时60秒才能再次点击发送的效果。 本文用Javas...

Carl_
2014/08/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

redis 系列二 -- 常用命令

1.基础命令 info ping quit save dbsize select flushdb flushall 2.键命令 2.1 set 直接赋值 set a a 2.2 get 取值 get a 2.3 exists 是否存在 exists a 2.4 expire 设置剩余时间 秒 expire......

imbiao
29分钟前
1
0
php foreach

<?php// 数组的引用$a=array(1,2,3,4,5);foreach($a as $key=>&$value){$value=$value*2;}print_r($a);echo " $key -------------------$value\r\n";/** * ...

小张525
38分钟前
1
0
12-利用思维导图梳理JavaSE-多线程

12-利用思维导图梳理JavaSE-多线程 主要内容 1.线程概念 2.线程开发 3.线程的状态 4.线程的同步和死锁 5.Java5.0并发库类 QQ/知识星球/个人WeChat/公众号二维码 本文为原创文章,如果对你有一...

飞鱼说编程
今天
0
0
JAVA集合之ArrayList

一、前言 Java 集合类提供了一套设计良好的支持对一组对象进行操作的接口和类,JAVA常用的集合接口有4类,分别是: Collection:代表一组对象,每一个对象都是它的子元素 Set:不包含重复元素...

木木匠
今天
3
0
转:XMLHttpRequest2 新技巧

”XMLHttpRequest 的异步调用网上找的例子运行没问题,但稍微改了一点点就报错”InvalidStateError: XMLHttpRequest has an invalid context“。断断续续 搞了3天终于通了,可以接收二进制文...

SamXIAO
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部