Question

所以我正在使用Chatango的配置文件HTML嵌入，并且它非常顺利，直到我添加了我的javascript来自动化背景图像。一旦我将脚本放入网站，它就会删除正文中的所有其他代码，头部和其他所有代码。这是它的一部分，作为我正在做的事情的一个例子。

<style type="text/css">
.centerImage
{
position:absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: 100%;
z-index: 1;
}
</style>
<script language="JavaScript">

day=new Date()     //..get the date

x=day.getHours()    //..get the hour

if (x>=0 && x<1) {
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '195',
          width: '260',
          videoId: 'Videolink',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }
      function onPlayerReady(event) {
           event.target.setVolume(0);
       event.target.playVideo();
      }
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
                  done = true;
        }
           event.target.setVolume(2);
      }
   document.write('<div id="player"></div><img src="BG.img" class="centerImage" alt="what image shows" >')
}
</script>

它在它旁边启动了一个视频，但这也不起作用......这是我的输出

<html><head></head><body><div id="player"></div>
<img src="BG.img" 
class="centerImage" alt="what image shows"></body></html>

请注意，这在W3school测试平台上运行得很好。

Answer 1

虽然它可能没有引起问题，但仍然以分号结束您的javascript语句是一个好习惯。对您的代码进行了一些更改。它适用于我，希望它也适合你。

<style type="text/css">
.centerImage
{
position:absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: 100%;
z-index: 1;
}
</style>
<script language="JavaScript">
      day = new Date(); //..get the date

      x = day.getHours(); //..get the hour

      if (x >= 0) {
        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        var player;

        function onYouTubeIframeAPIReady() {
          player = new YT.Player('player', {
            height: '195',
            width: '260',
            videoId: 'Videolink',
            events: {
              'onReady': onPlayerReady,
              'onStateChange': onPlayerStateChange
            }
          });
        }

        function onPlayerReady(event) {
          event.target.setVolume(0);
          event.target.playVideo();
        }
        var done = false;

        function onPlayerStateChange(event) {
          if (event.data == YT.PlayerState.PLAYING && !done) {
            done = true;
          }
          event.target.setVolume(2);
        }
        document.write('<div id="player"></div><img src="https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg" class="centerImage" alt="what image shows" >');
      }

      function loadPlayer() {
        window.onYouTubePlayerAPIReady = onYouTubeIframeAPIReady();
      }

    </script>

    <body onload='loadPlayer();'>
    </body>

干杯！

这是JSFiddle https://jsfiddle.net/hefn73Lo/

Answer 2

我错了几次，但我接受了布兰登的建议并使用了Inner-html。这是一个学习曲线，但一旦你理解了它的基础知识就很简单了。对于想要了解的人，Document.write接管页面。这是最终产品最终完美运作。

<!DOCTYPE html>
<html>
<body>
<style type="text/css">
.centerImage
{
position:absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: 100%;
z-index: 1;
}
</style>


<audio id="myAudio" preload="auto" onloadeddata="setHalfVolume()" autoplay>
    <source src="blank" type="audio/mp3"></source>
</audio>
<audio id="myAudio2" preload="auto" onloadeddata="setHalfVolume()" autoplay>
    <source src="blank" type="audio/mp3"></source>
</audio>
<audio id="myAudio3" preload="auto" onloadeddata="setHalfVolume()" autoplay>
    <source src="blank" type="audio/mp3"></source>
</audio>
<audio id="myAudio4" preload="auto" onloadeddata="setHalfVolume()" autoplay>
    <source src="blank" type="audio/mp3"></source>
</audio>
<audio id="myAudio5" preload="auto" onloadeddata="setHalfVolume()" autoplay>
    <source src="blank" type="audio/mp3"></source>
</audio>

<img id="static" class="centerImage" alt="what image shows">

<script>
var myAudio = document.getElementById("myAudio");
myAudio.play(); myAudio.volume = 0.2;
var myAudio = document.getElementById("myAudio2");
myAudio.play(); myAudio.volume = 1.0;
var myAudio = document.getElementById("myAudio3");
myAudio.play(); myAudio.volume = 1.0;
var myAudio = document.getElementById("myAudio4");
myAudio.play(); myAudio.volume = 1.0;
var myAudio = document.getElementById("myAudio5");
myAudio.play(); myAudio.volume = 1.0;
var day=new Date()     //..get the date
var x=day.getHours()    //..get the hour
if (x>=0 && x<1) {
document.getElementById("myAudio").src = "none";
document.getElementById("myAudio2").src = "none";
document.getElementById("myAudio3").src = "none";
document.getElementById("myAudio4").src = "none";
document.getElementById("myAudio5").src = "none";
document.getElementById("static").src = "image";
} else
if (x>=1 && x<4) {
document.getElementById("myAudio").src = "none";
document.getElementById("myAudio2").src = "none";
document.getElementById("myAudio3").src = "none";
document.getElementById("myAudio4").src = "none";
document.getElementById("myAudio5").src = "none";
document.getElementById("static").src = "image";
} else
if (x>=4 && x<6) {
document.getElementById("myAudio").src = "none";
document.getElementById("myAudio2").src = "none";
document.getElementById("myAudio3").src = "none";
document.getElementById("myAudio4").src = "none";
document.getElementById("myAudio5").src = "none";
document.getElementById("static").src = "image";
} else
if (x>=6 && x<12) {
document.getElementById("myAudio").src = "none";
document.getElementById("myAudio2").src = "none";
document.getElementById("myAudio3").src = "none";
document.getElementById("myAudio4").src = "none";
document.getElementById("myAudio5").src = "none";
document.getElementById("static").src = "image";
} else
if (x>=12 && x<20) {
document.getElementById("myAudio").src = "none";
document.getElementById("myAudio2").src = "none";
document.getElementById("myAudio3").src = "none";
document.getElementById("myAudio4").src = "none";
document.getElementById("myAudio5").src = "none";
document.getElementById("static").src = "image";
} else
if (x>=20 && x<24) {
document.getElementById("myAudio").src = "none";
document.getElementById("myAudio2").src = "none";
document.getElementById("myAudio3").src = "none";
document.getElementById("myAudio4").src = "none";
document.getElementById("myAudio5").src = "none";
document.getElementById("static").src = "image";
}
</script>




</body>
</html>

是的，我有5名球员已准备好装，以备不时之需。

JavaScript删除所有其他元素

2 个答案: