大佬们,为啥我用html写的获取的bing壁纸和bing上的不一样啊,,,,
求教!肥肠感谢!
这是我获取的
这是bing的原壁纸(懒得打开bing了,直接截的青柠获取的图,和bing上的一样)
这是代码
<!DOCTYPE html>
<html lang="en">
<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;
margin: 0;
padding: 0;
background: url('https://cn.bing.com/th?id=OHR.TourEiffel_ZH-CN1914981616_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.music-player {
max-width: 400px;
margin: 20px auto;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.music-player h2 {
text-align: center;
color: #333;
}
.file-input {
margin-bottom: 10px;
}
.file-input label {
display: block;
margin-bottom: 5px;
}
.file-input input[type="file"] {
display: block;
width: 100%;
padding: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}
.playlist {
margin-top: 20px;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.9);
}
.playlist ul {
list-style-type: none;
padding: 0;
}
.playlist li {
margin-bottom: 5px;
}
.playlist button {
display: inline-block;
padding: 5px 10px;
margin-right: 5px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.playlist button:hover {
background-color: #555;
}
</style>
<script>
window.onload = function() {
var fileInput = document.getElementById('music-files');
var playlist = document.getElementById('playlist');
var currentAudio = null;
fileInput.addEventListener('change', function() {
var files = this.files;
if (files.length > 0) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (file.type.startsWith('audio/')) {
var li = document.createElement('li');
var fileName = document.createTextNode(file.name);
li.appendChild(fileName);
var playButton = document.createElement('button');
playButton.textContent = '播放';
playButton.addEventListener('click', function(e) {
e.preventDefault();
var audio = new Audio(URL.createObjectURL(file));
if (currentAudio) {
currentAudio.pause();
}
audio.play().then(() => {
currentAudio = audio;
}).catch(error => {
console.error('播放失败:', error);
});
});
li.appendChild(playButton);
var stopButton = document.createElement('button');
stopButton.textContent = '停止';
stopButton.addEventListener('click', function(e) {
e.preventDefault();
if (currentAudio) {
currentAudio.pause();
currentAudio.currentTime = 0;
}
});
li.appendChild(stopButton);
playlist.appendChild(li);
}
}
}
});
};
</script>
</head>
<body>
<div class="music-player">
<h2>音乐播放器</h2>
<div class="file-input">
<label for="music-files">选择音乐文件:</label>
<input type="file" id="music-files" accept="audio/*" multiple>
</div>
<div class="playlist">
<ul id="playlist"></ul>
</div>
</div>
</body>
</html>
问了gpt,gpt也告诉我没问题,,,,