我正在嘗試創建以下內容：
我有五個 svg，每個代表一天中的不同時間。上午、中午、下午等
是否可以根據用戶所在位置的時間來更改影像？如果是，這是否可能僅使用 CSS？（目前我只熟悉 HTML 和 CSS）。如果沒有，一般來說最簡單的方法是什么？
到目前為止，我發現的所有帖子或主題都使用了其他語言。
編輯：
TIA
uj5u.com熱心網友回復：
您在評論中撰寫的代碼有一些不正確的地方，您不需要使用 innerHTML，只需使用它document.getElementById("img").src來代替。
使用 JavaScript 的一個好技巧是將它放在一個函式上，并在頁面加載時呼叫該函式。如果您使用 cpoy 這段代碼，它應該可以正常作業：
window.onload = changeImage;
function changeImage() {
const time = new Date().getHours();
if (time < 6) {
document.getElementById("img").src = "img/meerkat_five.svg";
} else if (time < 9) {
document.getElementById("img").src = "img/meerkat_one.svg";
} else if (time < 14) {
document.getElementById("img").src = "/img/meerkat_two.svg";
} else if (time < 17) {
document.getElementById("img").src = "/img/meerkat_three.svg";
} else if (time < 20) {
document.getElementById("img").src = "/img/meerkat_four.svg";
}
}
我希望這對你有用。
uj5u.com熱心網友回復：
你可以使用 JavaScript 來制作這個，你可以創建一個新的檔案 .js，或者只是在你的 html 中添加 JavaScript，betwen 標簽。
您應該使用此功能實際花費一小時：
<script type=?text/javascript?>
var date = new Date();
var hour = (date.getHours());
</script>
然后你可以比較你得到的時間和你想要的時間，然后改變影像：
<script type=?text/javascript?>
var date = new Date();
var hour = (date.getHours());
if (hour > 12) {
document.getElementById("img").src="img/day.png";
}
</script>
在您的 html 中，您必須有一個
<img id="img" src="img/picture.png">
您只需要更改 if 陳述句，并輸入您喜歡的時間。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/437794.html