HTML CSS矩形抽獎

矩形抽獎是一種常見的抽獎活動，通過在網頁上使用HTML和CSS創建矩形區域，讓用戶選擇是否參與抽獎。這種活動通常需要配合JavaScript來實現，讓用戶在點擊抽獎按鈕時觸發JavaScript函數，從而將抽獎結果展示在頁面上。

1. 創建一個HTML標簽，用于標識抽獎區域。例如，可以創建一個名為“抽獎區域”的標簽，并在其中包含一個矩形元素。

```html

2. 創建一個CSS類，用于樣式化抽獎區域。可以使用CSS的矩形類，例如`rectangle`或`rect`來創建矩形元素。

```css

.rectangle {

width: 200px;

height: 200px;

border-radius: 50%;

background-color: #f00;

.抽獎按鈕 {

background-color: #007bff;

color: #fff;

padding: 10px;

border: none;

border-radius: 5px;

cursor: pointer;

3. 在JavaScript中實現抽獎活動。可以使用JavaScript的內置函數`document.querySelector()`來找到HTML文檔中的抽獎區域元素，并使用`document.addEventListener()`來監聽點擊事件。

```javascript

const抽獎區域 = document.querySelector('.抽獎區域');

const抽獎按鈕 = document.querySelector('.抽獎按鈕');

抽獎按鈕.addEventListener('click', function() {

const region = document.querySelector('.rectangle');

const result = region.dataset.result;

if (result === '參與') {

region.classList.add('active');

} else {

region.classList.remove('active');

抽獎區域.classList.add('active');

alert(result);

4. 將抽獎區域元素添加到頁面中。可以使用CSS的偽元素`