2026-06-09

英語聽力語法：限制 IP 、網頁加密

原本配合教學組放到校網上播放聽力練習，

  1. 校網限定時間顯示
  2. java script 限定 IP 瀏覽
  3. java script 密碼閱讀限制

<meta charset="UTF-8">
<title></title>
<style type="text/css">/* 預設隱藏所有區塊 */
        #ip-check-area, #protected-content {
            display: none;
        }

        #login-form {
            text-align: center;
            margin-top: 100px;
        }

        .error {
            color: red;
            margin-top: 10px;
        }
</style>
<div id="ip-check-area">
<div id="login-form">
<h2>此頁面受密碼保護， 您的 IP：<span id="display-ip">偵測中...</span></h2>

<hr /><input id="password-input" placeholder="請輸入密碼" type="password" /><button onclick="checkPassword()">提交</button>

<p class="error" id="password-error">&nbsp;</p>
</div>
</div>

<div id="protected-content">
<h3>音檔內容</h3>

<p>一年級來聽歌</p>

<audio controls="" controlslist="nodownload" src="/var/file/419/1419/img/2229/114B1.mp3
">&nbsp;</audio>

<p>二年級來聽歌</p>

<audio controls="" controlslist="nodownload" src="/var/file/419/1419/img/2229/114B2.mp3
">&nbsp;</audio>

<p>三年級來聽歌</p>

<audio controls="" controlslist="nodownload" src="/var/file/419/1419/img/2229/114B3.mp3
">&nbsp;</audio>

<p>四年級來聽歌</p>

<audio controls="" controlslist="nodownload" src="/var/file/419/1419/img/2229/114B4.mp3
">&nbsp;</audio>
</div>
<script>
    const allowedPrefix = "163.17.91.";
    const correctPassword = "193666";

    // 1. 頁面載入後立即檢查 IP
    async function initAccessControl() {
        try {
            const response = await fetch('https://api.ipify.org?format=json');
            const data = await response.json();
            const userIP = data.ip;
            
            document.getElementById('display-ip').textContent = userIP;

            // 判斷 IP 是否符合規範
            if (userIP.startsWith(allowedPrefix)) {
                // IP 符合，顯示密碼輸入區
                document.getElementById('ip-check-area').style.display = 'block';
            } else {
                // IP 不符合，保持空白 (或是你可以取消註解下面這行來給提示)
                document.body.innerHTML = "<h1>您的 IP 不在許可範圍內</h1>";
                console.log("IP 驗證失敗: " + userIP);
            }
        } catch (error) {
            console.error("連線錯誤:", error);
            alert("無法進行驗證，請檢查網路連線。");
        }
    }

    // 2. 密碼檢查功能
    function checkPassword() {
        const input = document.getElementById('password-input').value;
        const errorMsg = document.getElementById('password-error');

        if (input === correctPassword) {
            // 密碼正確：隱藏輸入區，顯示內容
            document.getElementById('ip-check-area').style.display = 'none';
            document.getElementById('protected-content').style.display = 'block';
        } else {
            // 密碼錯誤
            errorMsg.innerText = "密碼錯誤，請再試一次！";
        }
    }

    // 執行初始化
    window.onload = initAccessControl;
</script>
at
關鍵字： , , ,