(≧3≦) 2022-03-10 17:12 采纳率: 50%
浏览 34
已结题

前端实现商品倒计时效果，数据来自数据库

目前前端代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script src="../js/jquery-3.4.1.min.js"></script>
    <style>
        html,
        body,
        .layuimini-container,
        .layui-tab {
            width: 100%;
            height: 100%;
        }

        .layui-tab-content {
            height: calc(100% - 61px);
        }

            .layui-tab-content .layui-tab-item {
                height: 100%;
                width: 100%;
            }

        .layui-side,
        .layuimini-main {
            position: relative;
        }

        .layui-tab-title li {
            font-weight: bold;
            padding: 0 20px;
        }
    </style>
</head>

<body>
  <div class="layuimini-container">
      <div class="newimg" id="newimg"></div>

  </div>
  <script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
  <script>
      myfunction();
      function myfunction() {

          for (var i = 0; i < 2; i++) {
              var mokuai = "<div class='img'>";
              mokuai += "<div>";
              mokuai += "<a href='javascript;'>";
              mokuai += "<img src='../image/qrcode-corner.png' />";
              mokuai += "</a>";
              mokuai += "</div>";
              mokuai += "<div class='text'>";
              mokuai += "<span class='spana'>5人成团</span><span class='span'> </span><p class='jia'><span class='xianjia'>￥5.55</span><span style='color:#FF7013;'> </span><span style='color:#C9C9C9;' class='hua'>￥6.22</span></p>";
              mokuai += "<p class='xs'><span>已成5团 / 可成10团 / 每人限购1份</span><span class='txt'>提货点：sdfgsd</span></p>";
              mokuai += "<p class='djs'><span class='sp'>结束时间：</span><span id='sj1' class='sj"+i+"'></span></p>";
              mokuai += ' <input type="hidden" class="time'+i+'" value="2022-03-2'+i+' 00:00:00" /> ';
              mokuai += " </div>";
              mokuai += "</div>";
              mokuai += "<div>";
              mokuai += "</br>";

          
                  var showtime = function () {
                      var nowtime = new Date(),  //获取当前时间
                          endtime = new Date($(".time1").val());  //定义结束时间

                      var lefttime = endtime.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
                          leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)),  //计算天数
                          lefth = Math.floor(lefttime / (1000 * 60 * 60) % 24),  //计算小时数
                          leftm = Math.floor(lefttime / (1000 * 60) % 60),  //计算分钟数
                          lefts = Math.floor(lefttime / 1000 % 60);  //计算秒数
                      return leftd + "天" + lefth + ":" + leftm + ":" + lefts;  //返回倒计时的字符串
                  }
                  setInterval(function () {
                      var s = showtime();
                      $('.sj1').append(s);
                      $('.sj1').html(" ");
                      s = showtime();
                      $('.sj1').append(s);
                  }, 1000);  //反复执行函数本身
              

              $("#newimg").append(mokuai);
          }

      }

  </script>

</body>

</html>
  • 写回答

1条回答 默认 最新

  • 代码的灵魂是bug！ 2022-03-10 17:41
    关注

    你的myfunction方法改了一下，满意请采纳

    function myfunction() {
            var mokuai = '';
          for (var i = 0; i < 2; i++) {
              mokuai += "<div class='img'>";
              mokuai += "   <div>";
              mokuai += "       <a href='javascript;'>";
              mokuai += "           <img src='../image/qrcode-corner.png' />";
              mokuai += "       </a>";
              mokuai += "   </div>";
              mokuai += "   <div class='text'>";
              mokuai += "       <span class='spana'>5人成团</span><span class='span'> </span><p class='jia'><span class='xianjia'>￥5.55</span><span style='color:#FF7013;'> </span><span style='color:#C9C9C9;' class='hua'>￥6.22</span></p>";
              mokuai += "       <p class='xs'><span>已成5团 / 可成10团 / 每人限购1份</span><span class='txt'>提货点：sdfgsd</span></p>";
              mokuai += "       <p class='djs'><span class='sp'>结束时间：</span><span id='sj"+i+"' class='sj"+i+"'></span></p>";
              mokuai += '       <input type="hidden" class="time'+i+'" value="2022-03-2'+i+' 00:00:00" /> ';
              mokuai += "   </div>";
              mokuai += "</div>";
              mokuai += "</br>";
          }
          $("#newimg").append(mokuai);

        $.each($('.newimg .img'),function(index,value){
            var showtime = function (index) {
                var nowtime = new Date(),  //获取当前时间
                    endtime = new Date($(".time"+index).val());  //定义结束时间

                var lefttime = endtime.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
                      leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)),  //计算天数
                      lefth = Math.floor(lefttime / (1000 * 60 * 60) % 24),  //计算小时数
                      leftm = Math.floor(lefttime / (1000 * 60) % 60),  //计算分钟数
                      lefts = Math.floor(lefttime / 1000 % 60);  //计算秒数
                return leftd + "天" + lefth + ":" + leftm + ":" + lefts;  //返回倒计时的字符串
            }

              setInterval(function () {
                  var s = showtime(index);
                  $('.sj'+index).html(s);
              }, 1000);  //反复执行函数本身
        });
      }
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 3月19日
  • 已采纳回答 3月11日
  • 创建了问题 3月10日

悬赏问题

  • ¥50 求图像处理的matlab方案
  • ¥50 winform中使用edge的Kiosk模式
  • ¥15 关于#python#的问题：功能监听网页
  • ¥15 怎么让wx群机器人发送音乐
  • ¥15 fesafe材料库问题
  • ¥35 beats蓝牙耳机怎么查看日志
  • ¥15 Fluent齿轮搅油
  • ¥15 八爪鱼爬数据为什么自己停了
  • ¥15 交替优化波束形成和ris反射角使保密速率最大化
  • ¥15 树莓派与pix飞控通信