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

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

我codepen：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

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

Answer 3

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

它看起来像我使用引导程序。 （你的头文件中是否有这些要求？）你使用了什么其他的CSS？把你所有的代码放在一个codepen中是很有用的，因为那样我们可以看看它。

看起来好像你可能是新的编码，这是真棒。这是一个很棒的项目供你学习。