zoukankan      html  css  js  c++  java
  • 把时间数字分割成图片

    效果图:

    html代码:

    <div class="pay">
        <div class="pay-time">
            <p>支付剩余时间</p>
            <div class="time-data">
                <span class="fen1"></span>
                <span class="fen2"></span>
                <i>:</i>
                <span class="miao1"></span>
                <span class="miao2"></span>
            </div>
        </div>
    

     css代码:

    .time-data span{
        display: inline-block;
        padding-left: 0.1rem;
        0.5rem;
        height:0.6rem;
        line-height: 0.6rem;
        background: #ff9b2f;
        font-size: 0.56rem;
        letter-spacing:0.7rem;
        color: #ffffff;
    }
    

      

     js代码:

    //    倒计时
    var intDiff = parseInt(1200); //倒计时总秒数量
    function timer(intDiff) {
        window.setInterval(function () {
            var day = 0,
                hour = 0,
                minute = 0,
                second = 0; //时间默认值
            if (intDiff > 0) {
                day = Math.floor(intDiff / (60 * 60 * 24));
                hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
            }
            if (minute <= 9) minute = '0' + minute;
            if (second <= 9) second = '0' + second;
            $('.fen1').html('<s></s>' + (minute+"").charAt(0) );
            $('.fen2').html('<s></s>' + (minute+"").charAt(1) );
            $('.miao1').html('<s></s>' + (second+"").charAt(0) );
            $('.miao2').html('<s></s>' + (second+"").charAt(1) );
            intDiff--;
        }, 1000);
    }
    $(function () {
        timer(intDiff);
    });
    

      

  • 相关阅读:
    Asp.Net Core 3.1 使用Autofac Aop
    Abp中的工作单元UnitOfWork的Aop是如何实现的
    Asp.Net Core 3.1 Api 集成Abp项目AutoMapper
    Asp.Net Core 3.1 Api 集成Abp项目动态WebApi
    php限制登录次数
    vbs小实例
    php导出数据到excel
    mysqli单例模式连接数据库
    微信JsApi支付
    HTML5新增表单控件
  • 原文地址:https://www.cnblogs.com/yongwang/p/6729055.html
Copyright © 2011-2022 走看看