今天我想分享一個很有意思的網頁效果——HTML愛心飄落代碼。
<html>
<head>
<style>
img{
position: absolute;
}
</style>
</head>
<body>
<script>
window.onload = function(){
setInterval(function(){
var love = document.createElement('img');
love.src = 'https://cdn.jsdelivr.net/gh/chenqionghe/external-resources/images/heart.png'; //引入愛心圖標
love.style.width = Math.random() * 50 + 30 + 'px'; //隨機大小
love.style.opacity = Math.random() + 0.5; //隨機透明度
love.style.left = Math.random() * document.documentElement.clientWidth + 'px'; //隨機位置
love.style.top = -Math.random() * 500 + 'px';
love.style.zIndex = 999; //將圖標層級調至最高
document.body.appendChild(love); //添加到頁面
setTimeout(function(){
love.remove(); //超出頁面范圍的圖標自動刪除
}, 5000);
}, 300);
}
</script>
</body>
</html>通過運行這個代碼，愛心圖標就會隨機漂浮到你的網頁上，不僅有一種浪漫的感覺，還可供你參考學習JavaScript動態創建元素的實現。