Question

我有一些显示视频和倒计时器的JavaScript，在倒计时完成后，它会切换到div的内容到一个问题。这是我的代码：

<script type="text/javascript">
            var imagediv = document.getElementById("questionarea");
            var counter = 15;
            var newElement = document.createElement("div");
            newElement.innerHTML = "15 Seconds remaining "+<?php echo json_encode($mediahtml); ?>;
            var id;

            imagediv.parentNode.replaceChild(newElement, imagediv);

            id = setInterval(function() {
                counter--;
                if(counter < 0) {
                    newElement.parentNode.replaceChild(imagediv, newElement);
                    clearInterval(id);
                } else {
                    newElement.innerHTML = counter.toString() + " seconds remaining."+ <?php echo json_encode($mediahtml); ?>;
                }
            }, 1000);
        </script>

和php变量mediahtml是：

$mediahtml = $mediahtml."<video width='320' height='240' controls>"."<source src=".$video." type=video/".$filextention.">Your browser does not support the video tag.</video>";

我的问题是，目前javascript重新加载整个div，这意味着视频无法播放，我想要做的只是替换文本（实际上只是counter.toString（））但我不知道如何做到这一点？

由于

Answer 1

将号码换成span，并修改：

var imagediv = document.getElementById("questionarea");
var counter = 15;
var newElement = document.createElement("div");
newElement.innerHTML = "<span>15</span> " +
  '<video controls width="160" height="120" autoplay=autoplay muted=muted>' +
   '<source src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4" type=\'video/mp4; codecs="avc1, mp4a"\'>' +
   '<source src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident.ogv" type=\'video/ogg; codecs="theora, vorbis"\'>' +
  '</video>';
var id;

imagediv.parentNode.replaceChild(newElement, imagediv);
var countSpan = newElement.firstChild;

id = setInterval(function() {
  counter--;
  if (counter < 0) {
    newElement.parentNode.replaceChild(imagediv, newElement);
    clearInterval(id);
  } else {
    countSpan.innerHTML = counter.toString();
  }
}, 1000);

<div id="questionarea">question</div>

请注意，为了使这个代码正好使用，<span>需要位于HTML字符串的最开头。没有领先的空间。

Answer 2

你需要把你的倒计时包装在另一个元素中，可能是<span>，然后更新它的html：

<script type="text/javascript">
        var imagediv = document.getElementById("questionarea");
        var counter = 15;
        var newElement = document.createElement("div");

        // create the countdown element and set its initial html
        var countdown = document.createElement("span");
        countdown.innerHTML = "15 Seconds remaining";

        // just add the video to newElement
        newElement.innerHTML = <?php echo json_encode($mediahtml); ?>; // may need ""s around the php

        // now insert the countdown at the start, before the video
        newElement.insertBefore(countdown, newElement.childNodes(0));
        var id;

        imagediv.parentNode.replaceChild(newElement, imagediv);

        id = setInterval(function() {
            counter--;
            if(counter < 0) {
                newElement.parentNode.replaceChild(imagediv, newElement);
                clearInterval(id);
            } else {
                // set just countdown HTML instead
                countdown.innerHTML = counter.toString() + " seconds remaining.";
            }
        }, 1000);
    </script>

.innerHTML只替换部分

2 个答案: