HTML动态照片密码保护页面-优快云博客

一、代码

以下是一个简单的HTML页面，需要输入密码"116882"才能查看动态照片：

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>动态照片查看器</title>

<style>

body {

font-family: Arial, sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: #f0f0f0;

margin: 0;

flex-direction: column;

}

.container {

text-align: center;

background-color: white;

padding: 30px;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0,0,0,0.1);

}

.photo-container {

display: none;

margin-top: 20px;

}

#photo {

max-width: 100%;

height: auto;

border-radius: 5px;

animation: fadeIn 2s;

}

input {

padding: 10px;

margin: 10px 0;

width: 200px;

border: 1px solid #ddd;

border-radius: 5px;

}

button {

padding: 10px 20px;

background-color: #4CAF50;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

}

button:hover {

background-color: #45a049;

}

.error {

color: red;

margin-top: 10px;

display: none;

}

@keyframes fadeIn {

from { opacity: 0; }

to { opacity: 1; }

}

</style>

</head>

<body>

<div class="container">

<h2>动态照片查看器</h2>

<p>请输入密码查看照片</p>

<input type="password" id="passwordInput" placeholder="输入密码">

<button onclick="checkPassword()">提交</button>

<p class="error" id="errorMsg">密码错误，请重试！</p>



<div class="photo-container" id="photoContainer">

<h3>这是你的动态照片</h3>

<img id="photo" src="https://source.unsplash.com/random/600x400/?nature,water" alt="动态照片">

<p>照片加载中...</p>

</div>

</div>

<script>

function checkPassword() {

const password = document.getElementById('passwordInput').value;

const correctPassword = "116882";

const errorMsg = document.getElementById('errorMsg');

const photoContainer = document.getElementById('photoContainer');



if (password === correctPassword) {

errorMsg.style.display = 'none';

photoContainer.style.display = 'block';



// 动态更换照片（每5秒换一次）

setInterval(function() {

document.getElementById('photo').src =

"https://source.unsplash.com/random/600x400/?nature,water,people,animal" +

"&t=" + new Date().getTime();

}, 5000);

} else {

errorMsg.style.display = 'block';

photoContainer.style.display = 'none';

}

}

</script>

</body>

</html>