Javascript-上一個按鈕-有解無憂

我需要用一些視頻創建一個“電視”，當用戶單擊一個按鈕時，iframe src 會更新為一個新的 youtube 視頻，以模擬頻道“變化”。問題是我需要創建一個按鈕來顯示用戶選擇的上一個頻道。

因此，例如，如果用戶選擇頻道 5，然后選擇頻道 3，然后選擇頻道 1。當點擊“最后”按鈕時，頻道 3 必須顯示在電視上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Watch online TV</title>
    <style>
        table {
            border-radius: 10px;
            width: 300px;
            height: 300px;
        }

        td {
            border-radius: 10px;
            height: 50px;
            text-align: center;
        }

        img {
            width: 20.6px;
        }

        #switch {
            background-color: transparent;
            border: none;
        }

        #tvBack {
            display: block;
            background-image: url("https://i.imgur.com/HsWm6dw.png");
            width: 528px;
            height: 458px;
        }

        #display {
            position: relative;
            width: 408px;
            height: 230px;
            border: none;
            margin-left: 67px;
            margin-top: 8px;
        }

        #remote {
            margin-top: 10px;
            margin-left: 85px;
        }
    </style>
</head>
<body onload="initialize();">

    <div id="tvBack">
        <iframe id="display" src=""></iframe>
    </div>
        
 <div id="remote">
     <h4>Remote Control</h4>
    <table border="1">
        <tr>
            <td><button onclick="channelOne()">1</button></td>
            <td><button onclick="channelTwo()">2</button></td>
            <td><button onclick="channelThree()">3</button></td>
        </tr>
        <tr>
            <td><button onclick="channelFour()">4</button></td>
            <td><button onclick="channelFive()">5</button></td>
            <td><button onclick="channelSix()">6</button></td>
        </tr>
        <tr>
            <td><button>Fav</button></td>
            <td><button id="switch" onclick="lightSwitch();"><img id="bulb" src="https://i.imgur.com/sSWEoD3.png"></button></td>
            <td><button onclick="getLast()">Last</button></td>
        </tr>
    </table>
</div>
</body>

<script>
    
    function captureClick(){
        document
    }
    num = 0;
    /* Changes the background color */
    function lightSwitch(){
        if (num % 2 == 0){
            document.body.style.backgroundColor = "black";
            document.getElementById("bulb").src = "https://i.imgur.com/Ucy9Ffq.png";
            num  ;
        }
        else {
            document.body.style.backgroundColor = "white";
            document.getElementById("bulb").src = "https://i.imgur.com/sSWEoD3.png";
            num  ;
        }
    }
    function initialize(){
        channelOne();
    }

    function channelOne(){
        document.getElementById("display").src = "https://www.youtube.com/embed/-23K9omxNCA?start=9";
    }

    function channelTwo(){
        document.getElementById("display").src = "https://www.youtube.com/embed/5bN5b11H4_s";
    }

    function channelThree(){
        document.getElementById("display").src = "https://www.youtube.com/embed/WcU7FGJkWuU";
    }

    function channelFour(){
        document.getElementById("display").src = "https://www.youtube.com/embed/37li1ExaU-Y?start=4";
    }

    function channelFive(){
        document.getElementById("display").src = "https://www.youtube.com/embed/s1a2Y0E3OUs?start=10";
    }

    function channelSix(){
        document.getElementById("display").src = "https://www.youtube.com/embed/jqKWNo_azh8?start=4";
    }

    function getLast(){
        document.getElementById("display").src.contentWindow.history.back();
    }

</script>
</html>

我不知道如何開發這部分專案。知道我該怎么做嗎？

uj5u.com熱心網友回復：

以下是基于您的原始代碼的一些建議。

將多余channelOne的channelSix功能整合為一個changeChannel功能。
將值存盤channel在物件中，而不是硬編碼到函式呼叫中。這將有助于根據需要編輯/擴展頻道串列。
將行內onclick呼叫替換為合并addEventListener呼叫
將current和last通道存盤在各自的變數中，以便于跟蹤。為了您的視覺參考，h5標題向您顯示最后的頻道歷史記錄。

const channels = {
  1: "https://www.youtube.com/embed/-23K9omxNCA?start=9",
  2: "https://www.youtube.com/embed/5bN5b11H4_s",
  3: "https://www.youtube.com/embed/WcU7FGJkWuU",
  4: "https://www.youtube.com/embed/37li1ExaU-Y?start=4",
  5: "https://www.youtube.com/embed/s1a2Y0E3OUs?start=10",
  6: "https://www.youtube.com/embed/jqKWNo_azh8?start=4",
}
let currentChannel;
let lastPlayed;
let isDark;
const darkBulb = "https://i.imgur.com/Ucy9Ffq.png";
const lightBulb = "https://i.imgur.com/sSWEoD3.png";
const bulbImage = document.querySelector("#bulb");
const display = document.getElementById("display");
const currentChannelMark = document.querySelector(".current-channel");
const lastChannelMark = document.querySelector(".last-channel");

document.querySelectorAll('button.channel')
  .forEach(button => button.addEventListener('click', handleChannelClick));
document.querySelector('.switch').addEventListener('click', handleLightSwitch);
document.querySelector('.last').addEventListener('click', goBackToLastChannel);

function changeChannel(last, next) {
  display.src = channels[next];
  currentChannelMark.innerText = next;
  lastChannelMark.innerText = last;
}

function handleChannelClick(e) {
  const targetChannel = e.target.dataset.channel;
  lastPlayed = currentChannel;
  currentChannel = targetChannel;
  changeChannel(lastPlayed, currentChannel);
}

function goBackToLastChannel() {
  [lastPlayed, currentChannel] = [currentChannel, lastPlayed];
  changeChannel(lastPlayed, currentChannel);
}

function handleLightSwitch() {
  if (isDark) {
    bulbImage.src = lightBulb;
    document.body.style.backgroundColor = "white";
    document.body.style.color = "black";
  } else {
    bulbImage.src = darkBulb;
    document.body.style.backgroundColor = "black";
    document.body.style.color = "white";
  };
  isDark = !isDark;
}

function initialize() {
  currentChannel = 1;
  lastPlayed = 1;
  isDark = false;
}

initialize();

body {
  transition: background-color .2s, color .2s;
}
table {
  border-radius: 10px;
  width: 300px;
  height: 300px;
}

td {
  border-radius: 10px;
  height: 50px;
  text-align: center;
}

img {
  width: 20.6px;
}

#switch {
  background-color: transparent;
  border: none;
}

#tvBack {
  display: block;
  background-image: url("https://i.imgur.com/HsWm6dw.png");
  width: 528px;
  height: 458px;
}

#display {
  position: relative;
  width: 408px;
  height: 230px;
  border: none;
  margin-left: 67px;
  margin-top: 8px;
}

#remote {
  margin-top: 10px;
  margin-left: 85px;
}

<div id="tvBack">
  <iframe id="display" src=""></iframe>
</div>

<div id="remote">
  <h4>Remote Control</h4>
  <h5>Last Channel: <span class="last-channel">1</span> ? Current Channel: <span class="current-channel">1</span></h5>
  <table border="1">
    <tr>
      <td><button class="channel" data-channel="1">1</button></td>
      <td><button class="channel" data-channel="2">2</button></td>
      <td><button class="channel" data-channel="3">3</button></td>
    </tr>
    <tr>
      <td><button class="channel" data-channel="4">4</button></td>
      <td><button class="channel" data-channel="5">5</button></td>
      <td><button class="channel" data-channel="6">6</button></td>
    </tr>
    <tr>
      <td><button>Fav</button></td>
      <td><button class="switch"><img id="bulb" src="https://i.imgur.com/sSWEoD3.png"></button></td>
      <td><button class="last">Last</button></td>
    </tr>
  </table>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/437282.html

標籤：javascript

上一篇：如何根據另一個物件的屬性值陣列過濾物件陣列？

下一篇：在XPATH中，我使用'''...and'''添加附加條件，在cheerio中是否有此選項？