文档章节

倒计时效果

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
20 款绝佳的 jQuery 倒计时脚本和插件

Circular Countdown jQuery Plugin - MORE INFO / DEMO Coconut – Jquery Countdown Plugin - MORE INFO / DEMO 包含四种不同尺寸的圆。 Dynamic Countdown with Counter – MORE INFO / DE......

oschina
2013/08/29
16.9K
7

没有更多内容

加载失败,请刷新页面

加载更多

Apache用户认证,域名跳转

11月15日任务 11.18 Apache用户认证 11.19/11.20 域名跳转 11.21 Apache访问日志 11.18 Apache用户认证 vim /usr/local/apache2.4/conf/extra/httpd-vhosts.conf //把123.com那个虚拟主机编辑......

zgxlinux
37分钟前
1
0
idea 添加 VUE 的语法支持和开发

《一》VUE的开发分两种,一种是直接在HTML文件中使用,一种是VUE文件的形式开发 1,首先我们先让 HTML 文件支持 VUE 的语法指令提示 2,File -> Setting -> Edit -> Inspections -> html 3,...

文文1
55分钟前
1
0
【NLP】【七】fasttext源码解析

【一】关于fasttext fasttext是Facebook开源的一个工具包,用于词向量训练和文本分类。该工具包使用C++11编写,全部使用C++11 STL(这里主要是thread库),不依赖任何第三方库。具体使用方法...

muqiusangyang
今天
3
0
防止Tweak

什么是tweak? 英文意思为捏, 拧,扭,稍稍调整(机器、系统等)。 依据维基百科的定义,tweak指的是对电子系统进行轻微调整来增强其功能的工具;在ios中tweak特指那些能够增强其它可执行程...

HeroHY
今天
3
0
linux中常用标识---不定期更新

LINUX常用标识符: 1 & && | || &: 表示进程在后台运行 例如 redis-server & 不是所有后台运行都是& 比如es ./bin/elasticsearch -d es后台运行&&: 第一个命令执行成功后 才执行后面的命令...

geek土拨鼠
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部