文档章节

倒计时效果

Clover286
 Clover286
发布于 2017/04/27 15:50
字数 154
阅读 9
收藏 0
点赞 0
评论 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
武汉
程序员
js倒计时效果

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

透笔度
2016/05/18
192
2
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
点击按钮 倒计时60秒方可再次点击发送的Js代码

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

Carl_
2014/08/06
0
0
sunkm/Android_CountDown

#Android_CountDown 一个好看的Android倒计时控件。轻松搞定倒计时,避免造轮子 使用说明 1、在项目中引入CountDownLinearLayout.java和布局文件以及样式文件,注意styles.xml只复制需要的s...

sunkm
2016/11/04
0
0
商品促销倒计时效果实现

效果图展示 这里写图片描述 所有的知识点总结如下: 轮播图实现:swiper插件 倒计时功能的实现 倒计时结束,抢购按钮变为可点击状态 轮播图的实现 swiper插件:开源,免费,强大的移动端触摸...

云焱
2017/12/03
0
0
短信获取按钮倒计时

发送短信成功后需要倒计时一段时间才能够再次发送,在此记录一个比较好的实现方法,如有什么问题欢迎指正. 1.申明一个全局定时器timer dispatchsourcet _timer; 2.加载页面时候读取存储的时间...

toowhite
2017/11/16
0
0
微信小程序特殊效果合集—左滑、气泡各种酷炫动画

微信小程序的开发并不难,但是有时我们想做出比较炫的效果,可能会一时没有思路或找不到方法。下面就整理了微信小程序的一些特殊效果的案例,均来自网络,供你参考。 1、文字跑马灯效果:htt...

anda0109
2017/08/08
0
0
10 个jQuery/JavaScript的圣诞主题效果

圣诞节快到了,赶快为你的网站打扮一番,换上节日的盛装吧!本文为你整理了10款使用jQuery和 JavaScript打造的圣诞主题效果,希望能给你带来些许惊喜。(PS:经过小编测试,下面的部分效果仅...

开心303
2011/12/13
2.5K
8

没有更多内容

加载失败,请刷新页面

加载更多

下一页

多线程Thread-多线程顺序执行

需求:现在有两个任务,任务1和任务2,任务1中有多个线程,并且任务2必须等任务1完成后才能执行。 namespace TThread{ class Program { static void Main(string[] ar...

kaixinguo314
12分钟前
0
0
直播总结

https://blog.csdn.net/weiyuefei/article/details/70257616 视频: 上传服务,转码服务,视频一致性MD5 视频转码技术及转码实现详解 https://wenku.baidu.com/view/32702108844769eae009eda...

素雷
14分钟前
0
0
Linux系统-tcpdump常用抓包命令

序言 单独总结tcpdump抓包的常用命令 主要语法 过滤主机/IP: tcpdump -i eth1 host 172.16.7.206 抓取所有经过网卡1,目的IP为172.16.7.206的网络数据 过滤端口: tcpdump -i eth1 dst port...

MrBoyce
15分钟前
0
0
Nginx参数

#运行用户 user nobody; #启动进程,通常设置成和cpu的数量相等 worker_processes 1; #全局错误日志及PID文件 #error_log logs/error.log; #error_log logs/error.log notice; #error_log lo......

courtzjl
17分钟前
0
0
274. H-Index - LeetCode

Question 274. H-Index Solution 题目大意: 论文里的 h 因子判定,题目的意思可能有点晦涩。h 因子是评判学术成就的一种重要方法,h 因子越高越好,h 因子兼顾研究学术人员的学术产出数量与...

yysue
19分钟前
0
0
 Unable to read class [com.mrp.action.BaseAction]

struts2启动时,出现的 Unable to read class [com.mrp.action.BaseAction] java.lang.NoClassDefFoundError: com/opensymphony/xwork2/util/finder/DefaultClassFinder$InfoBuildingVisito......

uug
20分钟前
0
0
分发系统介绍&expect脚本远程登录&expect脚本远程执行命令&expect脚本传递参数

20.27 分发系统介绍 应用场景 企业中随之业务的逐渐增大,后端所使用的编程语言是php,系统为LAMP/LNMP架构,需要将代码上传到服务器中;代码会不断的迭代,这就需要在业务服务器上更新代码,...

影夜Linux
22分钟前
0
0
form 提交多个对象及springMVC接收

var priceSignList = new Array(); $("#appExponentPriceSignEditForm tr").each(function() { var that = this; var orderItemObj = new Object(); $(that).find("select,input").each(func......

fyliujj
24分钟前
1
0
Spring boot中关于多对多查询json无限递归问题

控制台异常 #...java.lang.Illegal State Exception: Cannot call sendError() after the response has been committed#... 父类 BusinessTemplate.java // ...@OneToMany(targetEnti......

亚林瓜子
25分钟前
0
0
oracle 排序 row_number() over(partition by 排序字段)

业务描述:按t.truckId,t.riskCode 分组,每个分组里有分数,取分组中分数最大的那条记录。 如:A1 B1 5 6 A1 B1 5 3 A1 B2 2 5 A1 B2 2 1 已经按 A,B分组了 但是 我需要第一条和第三条数据,...

轻量级赤影
26分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部