支持手机浏览的倒计时插件

来源:https://www.sucaihuo.com/js/518.html 2015-09-30 03:45浏览(3149) 收藏

本文倒计时的数字由css3完成,不是背景图。若是用于手机站,你只要自定义字体大小即可,注意单位是rem。
支持手机浏览的倒计时插件
分类:日期时间 > 倒计时 难易:中级
查看演示 下载资源 下载积分: 120 积分

HTML

<div class='end_times'>
    <div id="countdown"></div>
    <p id="note"></p>
</div>

引入countdown插件

<link rel="stylesheet" type="text/css" href="assets/countdown/jquery.countdown.mobile.css" />
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="assets/countdown/jquery.countdown.js"></script>

jQuery新年倒计时

$(function() {
    var note = $('#note');
    var ts = (new Date("2016-02-08")).getTime();
    $('#countdown').countdown({
        timestamp: ts,
        callback: function(days, hours, minutes, seconds) {

            var message = "距离2016新年还有";

            message += days + "天" + (days == 1 ? '' : '') + "";
            message += hours + "小时" + (hours == 1 ? '' : '') + "";
            message += minutes + "分" + (minutes == 1 ? '' : '') + "";
            message += seconds + "秒" + (seconds == 1 ? '' : '') + "";
            message += "...";
            note.html(message);
        }
    });
});
标签: 倒计时
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2