[html]一个动态js倒计时小组件

本文介绍了一个利用JavaScript和CSS(包括SVG)创建的动态倒计时组件,通过定时器和SVG路径动画展示剩余时间,当时间结束时颜色变为红色。
摘要由CSDN通过智能技术生成

先看效果

在这里插入图片描述
在这里插入图片描述

代码

<style>
    .alert-sec-circle {
        stroke-dasharray: 735;
        transition: stroke-dashoffset 1s linear;
    }
</style>


<div style="width: 110px; height: 110px; float: left;">
    <svg style="width:110px;height:110px;">
        <circle cx="55" cy="55" r="40" fill="#FFF" stroke="#F4F1F1" stroke-width="6"></circle>
        <circle id="js-sec-circle" class="alert-sec-circle" cx="55" cy="55" r="40" fill="transparent" stroke="#43AEFA" stroke-width="6" transform="rotate(-90 55 55)" style="stroke-dashoffset: 0;">&gt;</circle>
        <text style="font-size: 14px;" x="35" y="50" fill="#BDBDBD">倒计时</text>
        <text x="35" y="68" fill="#ff0000" id="show_clock" style="font-size: 14px;">00:00</text>
    </svg>
</div>


<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>

    function padToTwoDigits(n) {
        return String(n).padStart(2, '0');
    }

    function show_clock(time) {
        var m = parseInt(time / 60);
        var s = time - m * 60;
        if (m < 0) {
            m = 0;
        }
        if (s < 0) {
            s = 0;
        }
        var show = padToTwoDigits(m) + ":" + padToTwoDigits(s);
        $('#show_clock').html(show);
    }

    function djs(sj, red_sj) {
        var jsc = $("#js-sec-circle");
        var span = parseFloat(252 / (sj));
        var itv;
        itv = setInterval(function () {
            show_clock(sj);
            r = (sj - 1) * span - 252;
            jsc.attr("style", "stroke-dashoffset: " + r + ";")
            if (r < -red_sj * span) {
                jsc.attr("stroke", "red");
            }
            if (r < -252) {
                clearInterval(itv);
            }
            sj = sj - 1;
        }, 1000);

    }

    djs(5, 2);

</script>
  • 5
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值