五角星是一種常見的圖形,我們有時會希望在網頁上顯示多個五角星。在JavaScript中,通過編寫一段簡單的代碼即可實現。
首先,我們需要定義五角星的基本樣式,例如:
.star { position: relative; width: 0; height: 0; margin: 0 auto; border-right: 100px solid transparent; border-bottom: 70px solid #e5a227; border-left: 100px solid transparent; transform: rotate(35deg); margin-bottom: 35px; } .star:before { content: ""; position: absolute; top: -35px; left: -100px; width: 0; height: 0; border-right: 100px solid transparent; border-bottom: 70px solid #e5a227; border-left: 100px solid transparent; transform: rotate(-70deg); }
以上CSS樣式定義了一個基本的五角星樣式,可以將其應用到HTML的標簽上,以顯示一個五角星:
<div class="star"></div>
如果我們希望在一個頁面上顯示多個五角星,可以通過JavaScript來實現。
方法一:
var starCount = 10; // 顯示10個五角星 for (var i = 0; i < starCount; i++) { document.write('<div class="star"></div>'); }
以上代碼通過循環生成10個五角星,并通過document.write()方法將它們輸出到頁面上。
方法二:
var starContainer = document.getElementById('star-container'); // 獲取星星容器元素 var starCount = 10; // 顯示10個五角星 for (var i = 0; i < starCount; i++) { var star = document.createElement('div'); // 創建一個五角星元素 star.classList.add('star'); // 添加星星樣式 starContainer.appendChild(star); // 添加星星到星星容器中 }
以上代碼通過獲取一個星星容器元素,以及通過循環生成五角星元素并添加到星星容器中的方式,將10個五角星顯示在頁面上。
以上就是JavaScript在網頁上顯示多個五角星的方法。
上一篇div 顏色屬性
下一篇div(grad(f))