Question

我正在使用javascript倒计时问题。我已将代码放在我的.html文件中的某个div中，但倒计时显示在body元素的底部，当我需要它显示在某个部分内的div中时。我已尽力尝试了一切，但我刚刚开始使用javascript。任何输入都会很棒。

    <section id="information">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h2>Countdown to our Wedding Date!</h2>
        <div id="countdown">

        <script type="text/javascript">
        var ringer = {
          countdown_to: "11/24/2016",
          rings: {
            'DAYS': {
              s: 86400000, // mseconds in a day,
              max: 365
            },
            'HOURS': {
              s: 3600000, // mseconds per hour,
              max: 24
            },
            'MINUTES': {
              s: 60000, // mseconds per minute
              max: 60
            },
            'SECONDS': {
              s: 1000,
              max: 60
            },
          },
          r_count: 4,
          r_spacing: 10, // px
          r_size: 100, // px
          r_thickness: 2, // px
          update_interval: 11, // ms

          init: function(){

            $r = ringer;
            $r.cvs = document.createElement('canvas');

            $r.size = {
              w: ($r.r_size + $r.r_thickness) * $r.r_count + ($r.r_spacing*($r.r_count-1)),
              h: ($r.r_size + $r.r_thickness)
            };

            $r.cvs.setAttribute('width',$r.size.w);
            $r.cvs.setAttribute('height',$r.size.h);
            $r.ctx = $r.cvs.getContext('2d');
            $("#countdown").append($r.cvs);
            $r.cvs = $($r.cvs);
            $r.ctx.textAlign = 'center';
            $r.actual_size = $r.r_size + $r.r_thickness;
            $r.countdown_to_time = new Date($r.countdown_to).getTime();
            $r.cvs.css({ width: $r.size.w+"px", height: $r.size.h+"px" });
            $r.go();
          },
          ctx: null,
          go: function(){
            var idx=0;

            $r.time = (new Date().getTime()) - $r.countdown_to_time;


            for(var r_key in $r.rings) $r.unit(idx++,r_key,$r.rings[r_key]);

            setTimeout($r.go,$r.update_interval);
          },
          unit: function(idx,label,ring) {
            var x,y, value, ring_secs = ring.s;
            value = parseFloat($r.time/ring_secs);
            $r.time-=Math.round(parseInt(value)) * ring_secs;
            value = Math.abs(value);

            x = ($r.r_size*.5 + $r.r_thickness*.5);
            x +=+(idx*($r.r_size+$r.r_spacing+$r.r_thickness));
            y = $r.r_size*.5;
            y += $r.r_thickness*.5;

            // calculate arc end angle
            var degrees = 270-(value / ring.max) * 360.0;
            var endAngle = degrees * (Math.PI / 180);

            $r.ctx.save();

            $r.ctx.translate(x,y);
            $r.ctx.clearRect($r.actual_size*-0.5,$r.actual_size*-0.5,$r.actual_size,$r.actual_size);

            // first circle
            $r.ctx.strokeStyle = "rgba(128,128,128,0.2)";
            $r.ctx.beginPath();
            $r.ctx.arc(0,0,$r.r_size/2,0,2 * Math.PI, 2);
            $r.ctx.lineWidth =$r.r_thickness;
            $r.ctx.stroke();

            // second circle
            $r.ctx.strokeStyle = "rgba(253, 128, 1, 0.9)";
            $r.ctx.beginPath();
            $r.ctx.arc(0,0,$r.r_size/2,3*Math.PI/2,0,endAngle, 1);
            $r.ctx.lineWidth =$r.r_thickness;
            $r.ctx.stroke();

            // label
            $r.ctx.fillStyle = "#ffffff";

            $r.ctx.font = '12px Helvetica';
            $r.ctx.fillText(label, 0, 23);
            $r.ctx.fillText(label, 0, 23);

            $r.ctx.font = 'bold 40px Helvetica';
            $r.ctx.fillText(Math.floor(value), 0, 10);

            $r.ctx.restore();
          }
        }

        ringer.init();
        </script>
        </div>

      </div>
    </div>
  </div>
</section>

P.S。 javascript代码来自http://codepen.io/lawrencealan/pen/cdwhm

我的代码：http://codepen.io/razahuss/pen/qZKBKQ

Answer 1

更改此行：

$("#countdown").append($r.cvs);

对此：

$("#countdown").html($r.cvs);

另外，您应该在倒计时div中添加一个高度值，以确保它不会崩溃，并用以下内容替换开始标记：

<div id="countdown" style="height: 450px">

Answer 2

我看了一下这段代码的输出，看起来好像倒计时在#countdown div中呈现。正如用户Redu在几分钟前说的那样，这个javascript放在你的HTML中并不重要 - 定位将完全是HTML和CSS的问题。

在我看来，你正在使用bootstrap。（你的标题中是否有必要？）你使用的是什么CSS？将所有代码放在codepen中是有帮助的，因为我们可以看看它。

好像你可能不熟悉编码，这太棒了。这是一个很好的项目，供您学习。

Answer 3

你可以用你的代码创建一个codepen或jsfiddle。问题似乎与绘制倒计时的div的css有关。

如何将javascript从body元素移动到特定的div元素？

3 个答案: