JS和CSS是Web前端開發中非常重要的技術，它們可以幫助我們實現各種酷炫的效果，比如遮罩層。

遮罩層是一種非常常見的效果，它可以將一個頁面或者一個元素覆蓋一層黑色或半透明的層，用來防止用戶在操作其他東西時，誤觸發當前頁面或元素上的事件。下面是如何使用JS和CSS實現遮罩層的代碼：

// CSS代碼：
.overlay {
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
position: fixed; /* 固定定位，覆蓋整個視口 */
top: 0;
left: 0;
width: 100%;
height: 100%;
}
// JS代碼：
var overlay = document.createElement('div'); // 創建一個div節點
overlay.classList.add('overlay'); // 添加CSS類名
document.body.appendChild(overlay); // 插入到頁面中

使用以上代碼，我們就可以在頁面中創建一個遮罩層。如果需要在遮罩層中添加其他內容，可以在JS中創建相應的元素，并插入到遮罩層中。

需要注意的是，遮罩層的z-index屬性應該比其他元素的z-index屬性小，這樣才能保證其他元素能夠正常顯示在遮罩層的上方。

總之，JS和CSS可以輕松實現各種酷炫的效果，想要在Web前端開發中有更好的發展，熟練掌握它們是必不可少的。