时间戳

首页 > 解决方案 > animateCongrat() 函数的显示时间

javascript - animateCongrat() 函数的显示时间

问题描述

我有一个计时器功能，每次单击按钮后都会重置。显示相应的花费时间。

我已经给出animateCongrat()了显示文本congradulationonclick 的效果。

我正在尝试在 buttonclick 上显示相应的时间，如祝贺文本以及效果

我如何实现它？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>



  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>


  <style>
    @font-face {
      font-family: 'Sigmar One';
      font-style: normal;
      font-weight: 400;
      src: local('Sigmar One Regular'), local('SigmarOne-Regular'), url(https: //fonts.gstatic.com/s/sigmarone/v8/co3DmWZ8kjZuErj9Ta3do6Tpow.ttf) format('truetype');
    }
    
    @import url(https: //fonts.googleapis.com/css?family=Sigmar+One);
    body {
      overflow: hidden;
    }
    
    .bodyblue {
      background: #3da1d1;
      color: #fff;
    }
    
    .congrats {
      position: absolute;
      top: 140px;
      width: 550px;
      height: 100px;
      padding: 20px 10px;
      text-align: center;
      margin: 0 auto;
      left: 0;
      right: 0;
      display: none;
    }
    
    h1 {
      transform-origin: 50% 50%;
      font-size: 50px;
      font-family: 'Sigmar One', cursive;
      cursor: pointer;
      z-index: 2;
      position: absolute;
      top: 0;
      text-align: center;
      width: 100%;
    }
    
    .blob {
      height: 50px;
      width: 50px;
      color: #ffcc00;
      position: absolute;
      top: 45%;
      left: 45%;
      z-index: 1;
      font-size: 30px;
      display: none;
    }
    
    .timetaken {
      margin-top: 50%;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script>



</head>

<body>

  <script type="text/javascript">
    var timeleft = 1;
    var downloadTimer = setInterval(function() {
      timeleft++;
      document.getElementById("countdowntimer").textContent = timeleft;
      if (timeleft >= 100)
        clearInterval(downloadTimer);
    }, 1000);



    function timenow() {
      document.getElementById("timetaken").textContent = timeleft;
      timeleft = 0;
      document.getElementById("countdowntimer").textContent = timeleft;
    }
  </script>


  <script>
    var images = ['https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random'];
    var index = 0;

    var timeOut;

    function animateCongrat() {

      $('.congrats').show();

      clearTimeout(timeOut);
      addBlueBody();

      reset();

      var numberOfStars = 20;

      for (var i = 0; i < numberOfStars; i++) {
        $('.congrats').append('<div class="blob fa fa-star ' + i + '"></div>');
      }

      animateText();
      animateBlobs();

      hideCongratAndBlueBody();

    }

    function addBlueBody() {
      $('body').addClass('bodyblue');
    }

    function hideCongratAndBlueBody() {
      timeOut = setTimeout(() => {
        $('.congrats').hide();
        $('body').removeClass('bodyblue');
      }, 4000);
    }

    function reset() {
      $.each($('.blob'), function(i) {
        TweenMax.set($(this), {
          x: 0,
          y: 0,
          opacity: 1
        });
      });

      TweenMax.set($('h1'), {
        scale: 1,
        opacity: 1,
        rotation: 0
      });
    }

    function animateText() {
      TweenMax.from($('h1'), 0.8, {
        scale: 0.4,
        opacity: 0,
        rotation: 15,
        ease: Back.easeOut.config(4),
      });
    }

    function animateBlobs() {

      var xSeed = _.random(350, 380);
      var ySeed = _.random(120, 170);

      $.each($('.blob'), function(i) {
        var $blob = $(this);
        var speed = _.random(1, 5);
        var rotation = _.random(5, 100);
        var scale = _.random(0.8, 1.5);
        var x = _.random(-xSeed, xSeed);
        var y = _.random(-ySeed, ySeed);

        TweenMax.to($blob, speed, {
          x: x,
          y: y,
          ease: Power1.easeOut,
          opacity: 0,
          rotation: rotation,
          scale: scale,
          onStartParams: [$blob],
          onStart: function($element) {
            $element.css('display', 'block');
          },
          onCompleteParams: [$blob],
          onComplete: function($element) {
            $element.css('display', 'none');
          }
        });
      });
    }
  </script>


  <p> Time <span id="countdowntimer">0 </span></p>
  <p> Time Taken <span id="timetaken">0 </span></p>
  <button onclick="timenow();animateCongrat();">Click to viw time taken</button>

  <div class="congrats">
    <h1>Congratulations!</h1>
    <h1 id="timetaken"> <span id="timetaken"></span><h1>
  </div>
</body>

</html>

标签： javascriptjqueryhtmlcss

解决方案

  1. 删除几个 jQuery - 你只能有一个
  2. 使 timetaken 成为全局变量
  3. 修复无效的 HTML - 跨越未关闭的 H1
  4. 删除 span 解决了重复 ID 问题
  5. 删除第二个 P 解决了 SECOND 重复 ID 问题
  6. 移除了 H1s 的绝对位置

var timeleft = 1;
window.onload = function() {
  
  var downloadTimer = setInterval(function() {
    timeleft++;
    document.getElementById("countdowntimer").textContent = timeleft;
    if (timeleft >= 100)
      clearInterval(downloadTimer);
  }, 1000);
}

function timenow() {
  document.getElementById("timetaken").textContent = timeleft;
  timeleft = 0;
  document.getElementById("countdowntimer").textContent = timeleft;
}
var images = ['https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random'];
var index = 0;

var timeOut;

function animateCongrat() {

  $('.congrats').show();

  clearTimeout(timeOut);
  addBlueBody();

  reset();

  var numberOfStars = 20;

  for (var i = 0; i < numberOfStars; i++) {
    $('.congrats').append('<div class="blob fa fa-star ' + i + '"></div>');
  }

  animateText();
  animateBlobs();

  hideCongratAndBlueBody();

}

function addBlueBody() {
  $('body').addClass('bodyblue');
}

function hideCongratAndBlueBody() {
  timeOut = setTimeout(() => {
    $('.congrats').hide();
    $('body').removeClass('bodyblue');
  }, 4000);
}

function reset() {
  $.each($('.blob'), function(i) {
    TweenMax.set($(this), {
      x: 0,
      y: 0,
      opacity: 1
    });
  });

  TweenMax.set($('h1'), {
    scale: 1,
    opacity: 1,
    rotation: 0
  });
}

function animateText() {
  TweenMax.from($('h1'), 0.8, {
    scale: 0.4,
    opacity: 0,
    rotation: 15,
    ease: Back.easeOut.config(4),
  });
}

function animateBlobs() {

  var xSeed = _.random(350, 380);
  var ySeed = _.random(120, 170);

  $.each($('.blob'), function(i) {
    var $blob = $(this);
    var speed = _.random(1, 5);
    var rotation = _.random(5, 100);
    var scale = _.random(0.8, 1.5);
    var x = _.random(-xSeed, xSeed);
    var y = _.random(-ySeed, ySeed);

    TweenMax.to($blob, speed, {
      x: x,
      y: y,
      ease: Power1.easeOut,
      opacity: 0,
      rotation: rotation,
      scale: scale,
      onStartParams: [$blob],
      onStart: function($element) {
        $element.css('display', 'block');
      },
      onCompleteParams: [$blob],
      onComplete: function($element) {
        $element.css('display', 'none');
      }
    });
  });
}
@font-face {
  font-family: 'Sigmar One';
  font-style: normal;
  font-weight: 400;
  src: local('Sigmar One Regular'), local('SigmarOne-Regular'), url(https: //fonts.gstatic.com/s/sigmarone/v8/co3DmWZ8kjZuErj9Ta3do6Tpow.ttf) format('truetype');
}

@import url(https: //fonts.googleapis.com/css?family=Sigmar+One);
body {
  overflow: hidden;
}

.bodyblue {
  background: #3da1d1;
  color: #fff;
}

.congrats {
  position: absolute;
  top: 140px;
  width: 550px;
  height: 100px;
  padding: 20px 10px;
  text-align: center;
  margin: 0 auto;
  left: 0;
  right: 0;
  display: none;
}

h1 {
  transform-origin: 50% 50%;
  font-size: 50px;
  font-family: 'Sigmar One', cursive;
  cursor: pointer;
  z-index: 2;
 /* position: absolute;
  top: 0; */
  text-align: center;
  width: 100%;
}

.blob {
  height: 50px;
  width: 50px;
  color: #ffcc00;
  position: absolute;
  top: 45%;
  left: 45%;
  z-index: 1;
  font-size: 30px;
  display: none;
}

.timetaken {
  margin-top: 50%;
}
<!-- in head -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!-- end of head -->

<!-- in body -->

<p> Time <span id="countdowntimer">0 </span></p>
<button onclick="timenow();animateCongrat();">Click to viw time taken</button>

<div class="congrats">
  <h1>Congratulations!</h1>
  <h1 id="timetaken"></h1>
</div>

推荐阅读