內部對象

Question

選擇價值怎樣才能從videoid:uoSDF234的second價值並使其倒計時？

1. 首先我需要"videoid":"uoSDF234"是第一個倒計時那麼接下來會"videoid":"0apq3ss"等（如果我添加更多的數據）。
2. 當我點擊停止按鈕，label id="vstopresult"將顯示停止videoid和second。
3. 倒計時將循環在videolist每個videoid。

var videoinfo = [{"startdatetime":"2014-12-21 00:23:14","totalsecondrun":"2019402310","videolist": 
 
[{"videoid":"uoSDF234","second":"10"},{"videoid":"0apq3ss","second":"14"}]}]; \t 
 
// JavaScript Document 
 

 
var calduration = function(){ 
 
\t \t $.each(videoinfo, function(i, obj) { 
 
\t \t \t $("#vstart").append(obj.startdatetime); 
 
\t \t \t $("#vtotoals").append(obj.totalsecondrun); 
 
\t \t \t 
 
\t \t \t $("#vid").append(videoinfo[0].videolist[0].videoid); 
 
\t \t \t $("#vlefts").append(videoinfo[0].videolist[0].second); 
 

 
\t \t \t \t \t var output = $("#vlefts"); 
 
\t \t \t \t \t var isPaused = false; 
 
\t \t \t \t \t var time = videoinfo[0].videolist[0].second; 
 
\t \t \t \t \t var t = window.setInterval(function() { 
 
\t \t \t \t \t \t if(!isPaused) { 
 
\t \t \t \t \t \t \t time--; 
 
\t \t \t \t \t \t \t output.text(time); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (time == 0){ 
 
\t \t \t \t \t \t \t clearInterval(t); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t }, 1000); 
 
\t \t \t \t \t 
 
\t \t \t \t \t //with jquery 
 
\t \t \t \t \t $("#vpause").on('click', function(e) { 
 
\t \t \t \t \t \t e.preventDefault(); 
 
\t \t \t \t \t \t isPaused = true; 
 
\t \t \t \t \t }); 
 
\t \t \t \t \t 
 
\t \t \t \t \t $("#vplay").on('click', function(e) { 
 
\t \t \t \t \t \t e.preventDefault(); 
 
\t \t \t \t \t \t isPaused = false; 
 
\t \t \t \t \t }); 
 
\t \t \t \t \t 
 
\t \t \t \t \t $("#vstop").on('click', function(e) { 
 
\t \t \t \t \t \t clearInterval(t); 
 
\t \t \t \t \t \t $("#vstopresult").append(time); 
 
\t \t \t \t \t }); 
 
\t \t \t \t 
 
\t \t }); 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 

 
}; 
 
\t \t 
 
\t \t 
 
calduration();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div> 
 
     \t <label id="vstart"></label><br> 
 
     \t <label id="vtotoals"></label><br> 
 
      <label id="vid"></label><br> 
 
      <label id="vlefts"></label><br> 
 
      <input type="button" value="play" id="vplay"/> 
 
      <input type="button" value="pause" id="vpause"/> 
 
      <input type="button" value="stop" id="vstop"/><br> 
 
      <label id="vstopresult"></label> 
 
     </div>

Answer 1

一個粗可能性是使用setInterval，一個示例可以是。

var videoinfo = [{ 
 
     "startdatetime": "2014-12-21 00:23:14", 
 
     "totalsecondrun": "2019402310", 
 
     "videolist": [{ 
 
      "videoid": "uoSDF234", 
 
      "second": "10" 
 
     }, { 
 
      "videoid": "0apq3ss", 
 
      "second": "14" 
 
     }] 
 
    }], 
 
    index = 0, 
 
    timerEl = document.getElementById('timer'), 
 
    countDown = 0, 
 
    intervalId; 
 

 
function startCountdown() { 
 
    if (index < videoinfo[0].videolist.length) { 
 
     countDown = videoinfo[0].videolist[index].second; 
 
     intervalId = setInterval(function() { 
 
      timerEl.textContent = countDown; 
 
      if (countDown < 1) { 
 
       clearInterval(intervalId); 
 
       index += 1; 
 
       setTimeout(function() { 
 
        startCountdown(); 
 
       }, 1000); 
 
      } else { 
 
       countDown -= 1; 
 
      } 
 
     }, 1000); 
 
    } 
 
} 
 

 
startCountdown();

<div id='timer'></div>