JS随机抽取姓名

JS随机抽取姓名

接下来我们使用Visual Studio这个软件来写一个的方法，我们可以使用这种写法写一个简单的小案例。这个小案例是什么呢。就是运用JS方法然后实现随机抽取姓名的功能。
那么这个代码要怎么写才能让他实现出来呢，首先我们需要先搭建Html的页面。写一些样式让他展示出来。
我们先看一下html的页面截图：

在截图中我们可以看到html页面搭建需要先建立一个为大div标签嵌套ul标签还有2个按钮，在来个div包裹他里面写了p标签还有span标签是文字展示，接下来我们就是需要给他设置一下他的样式效果出来，我们可以给他做一个美观的展示，接下来我们看一下样式的属性代码是什么：

可以从上面截图看到我们给他设置了不少的样式，上面的样式都是一些基本。就是给他设置了一些他的宽高还有他的边框颜色啊或者背景颜色和字体颜色等一些常见的东西，这就不跟大家一一详细说了。那么接下来我们就来看一下他的js代码吧。
看一下script的截图代码：

js代码里面我们可以看从第76行到79行,document他的意思就是先访问HTML页面中的元素，然后getElementsByClassName这个方法的意思就是返回文档中所有指定类名的元素的集合，作为NodeList对象，NodeList对象的意思就是代表一个有顺序的节点列表。而第79行的getElementsByTagName的方法就是返回带有指定的标签名的对象的集合。那他的意思就是返回li元素的顺序，然后从80行我们可以看到利用数组的的写法，将名字存入数组里面。然后再用html进行字符串拼接。接着我们通过for循环进行拼接，利用字符串的形式拼接，然后将拼接后的html字符串放到dom结构中，然后声明一下timer为null，接着写一个onclick的点击事件，在html中我们设置了button的id为kaishi的，然后点击开始的button就触发点击事件。事件里面写了每次运行前就清除timer，然后设置他的定时器，接着根据数组长度范围生成随机数。然后通过for循环来清空所有的class名字，然后就把随机选择的li设置选中的class名字。然后在写一个button为停止的id为结束，写结束的点击事件。然后给他写一下他的方法，就是清空他的定时器，找到他选中的元素，再找写一下找他选中的元素的内容同时给选中添加他的内容。
接下来看一下他的实现：

最后一个随机抽取姓名的功能就做出来了，我们可以从页面上看他的功能大概就是可以抽取一个人名。