js实现的倒计时按钮实例（js倒计时函数）

发布时间：2023-12-08

js实现的倒计时按钮实例（js倒计时函数）

更新： <time datetime="2022-11-13 04:47">2022-11-13 04:47</time>

本文目录一览：

  1. JS 倒计时实现代码(时、分，秒)
  2. JQuery实现的按钮倒计时效果
  3. js实现拍简单倒计时功能
  4. 用javascript实现：点击按钮后，页面出现倒计时，并开始倒计时

JS 倒计时实现代码(时、分，秒)

JS实现倒计时(时、分，秒)

var interval = 1000;
function ShowCountDown(year, month, day, divname) {
    var now = new Date();
    var endDate = new Date(year, month - 1, day);
    var leftTime = endDate.getTime() - now.getTime();
    var leftsecond = parseInt(leftTime / 1000);
    var day1 = Math.floor(leftsecond / (60 * 60 * 24));
    var hour = Math.floor((leftsecond - day1 * 24 * 60 * 60) / 3600);
    var minute = Math.floor((leftsecond - day1 * 24 * 60 * 60 - hour * 3600) / 60);
    var second = Math.floor(leftsecond - day1 * 24 * 60 * 60 - hour * 3600 - minute * 60);
    var cc = document.getElementById(divname);
    cc.innerHTML = "脚本之家提示距离" + year + "年" + month + "月" + day + "日还有：" + day1 + "天" + hour + "小时" + minute + "分" + second + "秒";
}
window.setInterval(function () {
    ShowCountDown(2010, 4, 20, 'divdown1');
}, interval);

[Ctrl+A 全选]
注: 如需引入外部Js需刷新才能执行

JQuery实现的按钮倒计时效果

本文实例讲述了JQuery实现的按钮倒计时效果。分享给大家供大家参考，具体如下： 一个实现了在按钮上显示倒计时，倒计时完毕自动将按钮设置为不可用的效果，具体代码如下：

HTML代码

<!DOCTYPE html>
<html>
<head>
    <title>test countdown button</title>
    <script src="jquery1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                var count = 10;
                var countdown = setInterval(CountDown, 1000);
                function CountDown() {
                    $("#btn").attr("disabled", true);
                    $("#btn").val("Please wait " + count + " seconds!");
                    if (count == 0) {
                        $("#btn").val("Submit").removeAttr("disabled");
                        clearInterval(countdown);
                    }
                    count--;
                }
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btn" value="Submit" />
</body>
</html>

运行效果截图如下： 希望本文所述对大家jQuery程序设计有所帮助。

js实现拍简单倒计时功能

看样子是一个竞拍网站，有很多商品的，你知道吗？这样的网站不是纯HTML的！一般是asp或asp.net等写出来的网页！用的是后台数据库！根本不是单纯的HTML。 以ASP为例吧： settime.asp（或者是HTML中嵌套了ASP），这里边设置了竞拍时间，然后将这个数值与其他数据地块存入了后台数据库（一般ASP挂的是ACCESS数据库，而ASP.NET挂的是SQL数据库，PHP挂的MYSQL数据库，这只是说一般）。 show.asp中从数据库中取出该条记录（或者从其他网页处得到request值），用当前时间相差，就可以显示了！ 可以显示竞拍时间等信息的！ 起码我想告诉你，纯HTML是实现不了的！

用javascript实现：点击按钮后，页面出现倒计时，并开始倒计时

<script language='javascript'>
    var _t;
    var _h = 0;
    var _m = 1;
    var _s = 0;
    var _v = formatTime(_h + ':' + _m + ':' + _s);
    function doTime() {
        _s--;
        if (_s == -1) {
            _m--;
            _s = 59;
        }
        if (_m == -1) {
            _h--;
            _m = 59;
        }
        var _b = ((_h == 0) && (_m == 0) && (_s == 0));
        if (_b) {
            _v = 'Welcome To RTBBS.NET';
            clearTimeout(_t);
        } else {
            _v = formatTime(_h + ':' + _m + ':' + _s);
            _t = setTimeout('doTime()', 1000);
        }
        document.all.oTime.innerHTML = _v;
    }
    function formatTime(_time) {
        return _time.replace(/\b(\w)\b/g, '0$1');
    }
    function start_time() {
        document.all.oTime.innerHTML = _v;
        _t = setTimeout('doTime()', 1000);
    }
</script>

<span id='oTime'></span>
<input type="button" name="button2" value="计时开始" onclick='start_time()' />
</body>
</html>
推荐文章