群友召唤术代码（小小群友召唤术的编写）

小小群友召唤术的编写

在社交平台中，一个固定的小群会随着时间慢慢流逝而减少了热度，没有了之前的热闹与欢笑。这时候，是否想有一种方式可以重新点燃大家的热情，让大家重新冲进小群中。

第一部分：HTML准备工作

首先准备好HTML结构，下面是一个简单的HTML模板，我们引入一个CSS文件和一个JS文件，用于后面的编写。

```html 小小群友召唤术 ```

第二部分：CSS和JS编写

接下来，我们开始编写CSS和JS代码。其中，CSS主要用于美化页面，JS主要用于实现小群的召唤。下面是CSS和JS代码的编写：

```css /* 群友召唤术页面样式 */ body{ font-family: sans-serif; text-align: center; } h1{ font-size: 28px; margin-bottom: 30px; } button{ background-color: #4CAF50; color: white; padding: 12px 24px; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px; } button:hover{ background-color: #3e8e41; } .disabled{ opacity: .6; cursor: not-allowed; } .hide{ display: none; } ``` ```javascript /* 群友召唤术代码 */ (function(){ var list = document.getElementsByClassName('box')[0], btn = document.getElementById('call'), num = 0; function randomNum(){ return Math.floor(Math.random()*list.children.length); } btn.onclick = function(){ var index = randomNum(); num++; if(num===3){ btn.className += 'disabled'; btn.setAttribute('disabled', 'true'); setTimeout(function(){ btn.className = btn.className.replace('disabled',''); btn.removeAttribute('disabled'); num = 0; },5000); } for(var i=0; i第三部分：HTML页面结构和JS的使用

最后，我们来编写HTML页面的结构和JS的使用。其中，HTML页面结构主要包括一个人物列表和一个按钮，JS用于实现人物列表中的人物被随机选中的过程。HTML页面结构和JS的使用如下：

```html

人物1

人物2

人物3

人物4

```

这样，我们就完成了小小群友召唤术的编写。当点击“召唤”按钮时，JS会随机选中人物列表中的一个人物，如果点击了3次按钮，则按钮会被禁用5秒钟。