javascript - jQuery 倒数计时器未显示在浏览器中

Question

使用 jQuery 创建了一个倒数计时器。因此，只有在用户从上一页导航到当前页面后，倒计时才会被激活。因此，在当前页面中，要显示的 block 将是

1.) 倒数计时器 2.) 滚轮

问题:

可以显示滚动条，但不能显示倒数计时器。我做错了什么。

代码:

 var count = 5;

 function updateTimer() {
   if (count > 0) {
     $("#content").fadeOut('slow', function() {
       $("#content").text(count);
       $("#content").fadeIn();
       count--;
     });

   } else if (count == 0) {
     $("#content").fadeOut('slow', function() {
       $("#content").text("Start!");
       $("#content").fadeIn();
       count--;
       /*To display the canvas and countDown() function in 2 sec interval
       after the fadein countdown is completed
       */
       setTimeout(function() {
         //canvasFunction();


         //TEST: Countdown Gauge   
         (function($) {
           var settings;
           var timer;
           var circleSeconds;
           var layerSeconds;

           var element;
           var callbackFunction;

           $.fn.final_countdown = function(options, callback) {
             element = $(this);

             // Element is not visibile
             if (!element.is(':visible')) {
               return;
             }

             var defaults = $.extend({
               start: undefined,
               end: undefined,
               now: undefined,
               selectors: {
                 value_seconds: '.clock-seconds .val',
                 canvas_seconds: 'canvas-seconds'
               },
               seconds: {
                 borderColor: '#654321',
                 borderWidth: '6'
               },
             }, options);

             settings = $.extend({}, defaults, options);

             if (settings.start === undefined) {
               settings.start = element.data('start');
             }

             if (settings.end === undefined) {
               settings.end = element.data('end');
             }

             if (settings.now === undefined) {
               settings.now = element.data('now');
             }

             if (element.data('border-color')) {
               settings.seconds.borderColor = element.data('border-color');
             }

             if (settings.now < settings.start) {
               settings.start = settings.now;
               settings.end = settings.now;
             }

             if (settings.now > settings.end) {
               settings.start = settings.now;
               settings.end = settings.now;
             }

             if (typeof callback == 'function') { // make sure the callback is a function
               callbackFunction = callback;
             }

             responsive();
             dispatchTimer();
             prepareCounters();
             startCounters();
           };

           function responsive() {
             $(window).load(updateCircles);

             $(window).on('redraw', function() {
               switched = false;
               updateCircles();
             });
             $(window).on('resize', updateCircles);
           }

           function updateCircles() {
             layerSeconds.draw();
           }

           function convertToDeg(degree) {
             return (Math.PI / 180) * degree - (Math.PI / 180) * 90
           }

           function dispatchTimer() {
             timer = {
               total: Math.floor((settings.end - settings.start) / 86400),
               seconds: 60 - Math.floor((((settings.end - settings.now) % 86400) % 3600) % 60)
             }
           }

           function prepareCounters() {
             // Seconds
             var seconds_width = $('#' + settings.selectors.canvas_seconds).width()
             var secondsStage = new Kinetic.Stage({
               container: settings.selectors.canvas_seconds,
               width: seconds_width,
               height: seconds_width
             });

             circleSeconds = new Kinetic.Shape({
               drawFunc: function(context) {
                 var seconds_width = $('#' + settings.selectors.canvas_seconds).width()
                 var radius = seconds_width / 2 - settings.seconds.borderWidth / 2;
                 var x = seconds_width / 2;
                 var y = seconds_width / 2;

                 context.beginPath();
                 context.arc(x, y, radius, convertToDeg(0), convertToDeg(timer.seconds * 6));
                 context.fillStrokeShape(this);

                 $(settings.selectors.value_seconds).html(10 - timer.seconds);
               },
               stroke: settings.seconds.borderColor,
               strokeWidth: settings.seconds.borderWidth
             });

             layerSeconds = new Kinetic.Layer();
             layerSeconds.add(circleSeconds);
             secondsStage.add(layerSeconds);
           }

           function startCounters() {
             //var timer.seconds = 10;

             var interval = setInterval(function() {

               if (timer.seconds > 11) {
                 if (10 - timer.minutes == 0) {
                   clearInterval(interval);
                   if (callbackFunction !== undefined) {
                     callbackFunction.call(this); // brings the scope to the callback
                   }
                   return;
                 }

                 timer.seconds = 0;

               } else {
                 timer.seconds++;
               }

               layerSeconds.draw();
             }, 1000);
           }
         })(jQuery);
         //TEST


         $("#UserInteraction").show();
         //countDown();   
       }, 2000)
     });
     $("#content").fadeOut();
   } else {
     $("#content").fadeOut();
     clearInterval(interval);
   }
 }
 setInterval(function() {
   updateTimer()
 }, 2000);

  .countdown-container {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .clock-item .inner {
    height: 0px;
    padding-bottom: 100%;
    position: relative;
    width: 100%;
  }
  .clock-canvas {
    background-color: rgba(255, 255, 255, .1);
    border-radius: 50%;
    height: 0px;
    padding-bottom: 100%;
  }
  .text {
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    margin-top: -50px;
    position: absolute;
    top: 50%;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
    width: 100%;
  }
  .text .val {
    font-size: 50px;
  }
  .text .type-time {
    font-size: 20px;
  }
  @media (min-width: 768px) and (max-width: 991px) {
    .clock-item {
      margin-bottom: 30px;
    }
  }
  @media (max-width: 767px) {
    .clock-item {
      margin: 0px 30px 30px 30px;
    }
  }

<div id="page2" class="img-wrapper" align="center" style=" position: relative; background-image: url(Image/Page2.png); background-repeat: no-repeat; width: 100%;height: 100%;">

  <div id='content'></div>
  <!-- <canvas id="canvas" width="300" height="300">
            </canvas>
            <canvas id="Counter" width="300" height="300">
            </canvas>-->
  <div id="scroller">
    <p id="scrollTopId"></p>
  </div>
  <div id="UserInteraction" style="display:none" z-index="2">
    <img id="roller" style="position: relative; top:1100px; width: 100%" src="image/rolling_pin/Rolling_Pin_Spin000.png" />
    <img id="scroll" style="position:absolute; top: 1250px; left: 380px; overflow-y: auto;" src="image/Scroll.png">
  </div>

</div>

Answer 1

你在根 div page2 上有 display:none:

<div id="page2" class="img-wrapper" align="center" style=" position: relative; background-image: url(Image/Page2.png); background-repeat: no-repeat; display: none; width: 100%;height: 100%;">

删除 display:none 或将其设置为 display:block

https://jsfiddle.net/kebw53ue/1/