在Web開發中，我們常常需要實現一些頁面加載效果，例如加載動畫、進度條等來提高用戶體驗。其中，最常用的方法便是通過JavaScript和CSS來實現。
HTML結構：
<div id="loading">
<!-- 加載效果 -->
</div>
CSS樣式：
#loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f7f7f7;
z-index: 9999;
text-align: center;
}
#loading img {
margin-top: 20%;
animation: loading 1s infinite;
}
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
JavaScript代碼：
document.onreadystatechange = function () {
var loading = document.getElementById("loading");
if (document.readyState == "complete") {
loading.style.display = "none";
} else {
loading.style.display = "block";
}
};文章中的代碼實現了一個簡單的頁面加載效果，它包含一個
元素，通過CSS樣式定義了元素的位置、大小、背景顏色和加載效果，通過JavaScript代碼實現了當頁面加載完成后隱藏
元素。
通過JavaScript和CSS實現頁面加載效果是非常方便實用的方法，它可以大大提高用戶體驗。在開發中，我們可以根據自己的需求，結合更加復雜的CSS樣式和JavaScript代碼實現更豐富的加載效果。