Question

所以我试图从头开始学习一些HTML5用于制作我自己的网站。我想尝试的一件事是在网页上放置抽搐聊天和播放器。我希望它能够在播放器缺席的情况下启动页面，并且可以使用按钮来打开或关闭播放器+聊天。一直试图绕过这个，我无法找到我正在寻找的解决方案。非常感谢有关如何做到的任何提示或提示，谢谢！

<a href=" javascript:player()">Display/Hide Player</a>
<a href=" javascript:chat()">Display/Hide Chat</a>

<script>

var playeron = false;
function player()
{
    if(playeron==false)
    {
        playeron=true;
        document.getElementById("MyPlayer").style.display="block";
    }
    else
    {
        playeron=false;
        document.getElementById("MyPlayer").style.display="none";
    }
}

var chaton=false;
function chat()
{
    if(chaton==false)
    {
        chaton=true;
        document.getElementById("MyChat").style.display="block";
    }
    else
    {
        chaton=false;
        document.getElementById("MyChat").style.display="none";
    }
}
</script>

<iframe id = "MyPlayer" src="https://player.twitch.tv/?volume=0.32&channel=blackdahlia1147" width="1280" height="720"></iframe>

<iframe id = "MyChat" src="https://www.twitch.tv/blackdahlia1147/chat?popout=" width="300" height="720"></iframe>

Answer 1

<script>
var playeron=false;
var chaton=false;
function player(){
if(playeron==false){
playeron=true;
document.getElementById("MyPlayer").style.display="block";
}else{
playeron=false;
document.getElementById("MyPlayer").style.display="none";
}
}
//try it yourself for chat
</script>




<a href=" javascript:player()">Display/Hide player</a>
<a href=" javascript:chat()">Display/Hide Chat</a>
<style>
iframe{
display:none;
}
</style>

Answer 2

你在function twitch(toggle)

之后错过了一个空缺括号

Answer 3

<a href="javascript:toggle('MyPlayer')">Display/Hide Player</a>
<a href="javascript:toggle('MyChat')">Display/Hide Chat</a>
<iframe id="MyPlayer" src="https://player.twitch.tv/?volume=0.32&channel=blackdahlia1147" width="1280" height="720" style="display: block;"></iframe>
<iframe id="MyChat" src="https://www.twitch.tv/blackdahlia1147/chat?popout=" width="300" height="720" style="display: block;"></iframe>

<script>
  function toggle(id) {
    var elem = document.getElementById(id);
    if (elem.style.display != 'none') {
      elem.style.display = 'none';
    } else {
      elem.style.display = 'block';
    }
  }
</script>

如果您想要隐藏/显示更多内容，这对您有用，具有灵活性的优势。

Answer 4

我运行了你的代码，我发现你试图在if else循环中使用带有链接的变量。现在，我所说的是你创建了一个循环搜索选项，如果你想为用户创建多个频道进行搜索，那就很好。

否则 { player =“https://player.twitch.tv/?volume=0.32&channel=blackdahlia1147” chat =“https://www.twitch.tv/blackdahlia1147/chat?popout=” }

如果您只想要这两个频道，首先需要学习如何在HTML中添加“插件”。您的“播放器”和“聊天”是指向网站的链接，“插件”就是您所需要的。转到youtube并输入“插件”，当你获得“插件”时，写下：

<iframe src="plugin"></iframe>

此时你真的不需要js。

“Onclick”也是您正在寻找的。转到w3school.com，他们有很多按钮和动画选项。

尝试使用HTML中的javascript打开/关闭抽搐播放器

4 个答案: