倒计时效果
倒计时效果
Clover286 发表于8个月前
倒计时效果
  • 发表于 8个月前
  • 阅读 8
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

说明:前端实现,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() {
//倒计时结束执行
},
  });
})

 

共有 人打赏支持
粉丝 9
博文 161
码字总数 57698
×
Clover286
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: