选择对象内的值

时间:2015-01-07 07:58:27

标签: javascript

如何从second获取videoid:uoSDF234值并使其倒计时?

  1. 首先我需要"videoid":"uoSDF234"成为第一个倒计时,然后下一个将是"videoid":"0apq3ss",依此类推(如果我添加更多数据)。
  2. 当我点击停止按钮时,label id="vstopresult"会显示停止的videoidsecond
  3. 倒计时将针对videoid中的每个videolist循环播放。
  4. 
    
    var videoinfo = [{"startdatetime":"2014-12-21 00:23:14","totalsecondrun":"2019402310","videolist":
    [{"videoid":"uoSDF234","second":"10"},{"videoid":"0apq3ss","second":"14"}]}];	
    // JavaScript Document
    
    var calduration = function(){
    		$.each(videoinfo, function(i, obj) {
    			$("#vstart").append(obj.startdatetime);
    			$("#vtotoals").append(obj.totalsecondrun);
    			
    			$("#vid").append(videoinfo[0].videolist[0].videoid);
    			$("#vlefts").append(videoinfo[0].videolist[0].second);
    
    					var output = $("#vlefts");
    					var isPaused = false;
    					var time = videoinfo[0].videolist[0].second;
    					var t = window.setInterval(function() {
    						if(!isPaused) {
    							time--;
    							output.text(time);
    						}
    						if (time == 0){
    							clearInterval(t);
    						}
    					}, 1000);
    					
    					//with jquery
    					$("#vpause").on('click', function(e) {
    						e.preventDefault();
    						isPaused = true;
    					});
    					
    					$("#vplay").on('click', function(e) {
    						e.preventDefault();
    						isPaused = false;
    					});
    					
    					$("#vstop").on('click', function(e) {
    						clearInterval(t);
    						$("#vstopresult").append(time);
    					});
    				
    		});
    															
    
    };
    		
    		
    calduration();
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <div>
            	<label id="vstart"></label><br>
            	<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>
    &#13;
    &#13;
    &#13;

1 个答案:

答案 0 :(得分:1)

一种粗略的可能性是使用setInterval,可能是一个例子。

&#13;
&#13;
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();
&#13;
<div id='timer'></div>
&#13;
&#13;
&#13;