Javascript-需要重复功能

时间:2019-04-03 06:46:18

标签: javascript html css

这是我第一次使用stackoverflow :) 我创建了一个使用javascript播放带有计时器的视频的交互。互动是...默认情况下,视频将暂停,并在3秒钟后开始播放。同一件事,我必须重复三遍。我们能做到吗?我在这里分享了我的代码。

var timeLeft = 3;
var elem = document.querySelector('.countdown-content__count');
var timerId;

function countdown() {
  if (timeLeft == 0) {
    clearTimeout(timerId);
    $(".countdown-content__timer").fadeOut();
    $(".video-wrapper span").fadeOut();
    var playPromise = $("#video")[0].play();
    console.log(playPromise); 
  } else {
    elem.innerHTML = timeLeft;
    timeLeft--;
  }
}

function practiceShot(){
  setTimeout(function(){
    $(".countdown-content__head").slideUp(1000,               function(){
          $(".countdown-content__timer").css({
              opacity: 0,
              display: 'inline-block'     
          }).animate({opacity:1},600);
          timerId = setInterval(countdown, 1000);
          countdown();
        });
      }, 2000);
}
practiceShot();

jfiddle链接以进一步说明:jsfiddle code

4 个答案:

答案 0 :(得分:2)

您应该像这样在setTimeout()中调用practiceShot()而不是在practiceShot()中使用setInterval

 setInterval(function(){ practiceShot(); }, 2000);

setInterval()方法以指定的时间间隔(以毫秒为单位)调用函数或计算表达式。 setInterval()方法将继续调用该函数,直到调用clearInterval()或关闭窗口为止。

有关详细信息:setInterval() Method

答案 1 :(得分:1)

您可以尝试-我在视频addEventListener事件上应用了ended,并使用videoCounter变量仅运行了3次视频。它初始化为2,并在视频结束时递减。

var timeLeft = 3;
var videoCounter = 2;
var videoText = 2;
var elem = document.querySelector('.countdown-content__count');
var timerId;

function countdown() {
  if (timeLeft == 0) {
    clearTimeout(timerId);
    $(".countdown-content__timer").fadeOut();
    $(".video-wrapper span").fadeOut();
    var playPromise = $("#video")[0].play();
  } else {
    elem.innerHTML = timeLeft;
    timeLeft--;
  }
}

function practiceShot(){
  setTimeout(function(){
    $(".countdown-content__head").slideUp(1000, function(){
          $(".countdown-content__timer").css({
              opacity: 0,
              display: 'inline-block'     
          }).animate({opacity:1},600);
          timerId = setInterval(countdown, 1000);
          countdown();
        });
      }, 2000);
}
practiceShot();
document.getElementById('video').addEventListener('ended', function() {
    if (videoCounter == 0) {
        return;
    }
    document.getElementsByClassName("countdown-content__head")[0].innerHTML = "Practice Shot " + videoText;
    videoText++;
    videoCounter--;
    timeLeft = 3;
    elem.innerHTML = "";
    $(".countdown-content__timer").fadeIn();
    $(".video-wrapper span").fadeIn();
    $(".countdown-content__head").slideDown(1000, function(){
          $(".countdown-content__timer").css({
              opacity:1,
              display: 'inline-block'     
          }).animate({opacity:0},600);
    });
    practiceShot();
}, false);
@import url("https://fonts.googleapis.com/css?family=Fjalla+One");
html, body {
  margin: 0;
  height: 100%;
  font-family: 'Fjalla One', sans-serif;
}

.main-content {
  height: 100%;
  text-align: center;
}

.video-wrapper {
  height: 100%;
  display: inline-block;
  position: relative;
}
.video-wrapper span {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #FBED20;
  opacity: 0.7;
}
.video-wrapper > video {
  height: 100%;
  margin: 0 auto;
  display: block;
  position: relative;
}

.countdown-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.countdown-content__head {
  margin: 0;
}

.countdown-content__timer {
  margin: 10px 0 0 0;
  font-size: 24px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid #fff;
  position: relative;
  opacity: 0;
}


.countdown-content__timer > span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-content">
  <span class="video-wrapper">
    <video id="video" muted>
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
      Your browser does not support HTML5 video.
    </video>
    <span></span>
  </span>
  <div class="countdown-content">
    <h1 class="countdown-content__head">Practice Shot 1</h1>
    <div class="countdown-content__timer">
      <span class="countdown-content__count"></span>
    </div>
  </div>
</div>

答案 2 :(得分:0)

您可以使用setInterval()clearInterval()和一个简单的计数器以特定的时间重复某些内容。

示例:

var counter = 0;
var interval_id = setInterval(() => {
  play_video();
  counter++;
  if (counter >= 3) {
    clearInterval(interval_id)
  }
}, 3000);

答案 3 :(得分:0)

在视频元素上使用onended事件处理程序,

var timeLeft = 3;
var elem = document.querySelector('.countdown-content__count');
var timerId;
var times = 0 ;
var vid = document.getElementById("video");
vid.onended = function() {
    times++;
    console.log(times);
    times==3 ? $("#video")[0].pause() : $("#video")[0].play();;
};

function countdown() {
    if (timeLeft == 0) {
        clearTimeout(timerId);
        $(".countdown-content__timer").fadeOut();
        $(".video-wrapper span").fadeOut();
        var playPromise = $("#video")[0].play();
        console.log(playPromise);
    } else {
        elem.innerHTML = timeLeft;
        timeLeft--;
    }
}

function practiceShot() {
    $(".countdown-content__head").slideUp(1000, function () {
        $(".countdown-content__timer").css({
            opacity: 0,
            display: 'inline-block'
        }).animate({opacity: 1}, 600);
        timerId = setInterval(countdown, 1000);
        countdown();
    });
}
practiceShot();