<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
title
>Document
</
title
>
</
head
>
<
style
>
* {
padding:
0;
margin:
0;
box-sizing:
border-box;
}
#top,
#head,
#nav,
#content {
text-align:
center;
}
#top {
text-align:
center;
background:
yellowgreen;
font-size:
20px;
}
#top p {
color:
purple;
font-weight:
bold;
}
#head {
margin-top:
10px;
}
#head p {
color:
purple;
font-weight:
bold;
}
#nav {
margin-top:
10px;
}
button {
background:
yellowgreen;
color:
#fff;
box-shadow:
0px;
}
#content {
margin-top:
10px;
}
#content span {
display:
inline-block;
width:
60px;
height:
30px;
line-height:
30px;
background:
#000;
color:
#fff;
text-align:
center;
}
<
/
style
>
<
body
>
<
div
id=
"top"
>
<
p
>点名系统
</
p
>
</
div
>
<
div
id=
"head"
>
<
p
>被选中的小伙伴：
<
span
></
span
>
</
p
>
</
div
>
<
div
id=
"nav"
>
<
button
id=
"start"
>开始
</
button
>
<
button
id=
"move"
>播放选中的小伙伴
</
button
>
<
button
id=
"reset"
>刷新
</
button
>
<
span
>语速：
</
span
>
<
select
name=
""
value=
""
id=
"audi"
>
<
option
value=
"1"
class=
"audi"
>1
</
option
>
<
option
value=
"2"
class=
"audi"
>2
</
option
>
<
option
value=
"3"
class=
"audi"
>3
</
option
>
<
option
value=
"4"
class=
"audi"
>4
</
option
>
<
option
value=
"5"
class=
"audi"
>5
</
option
>
<
option
value=
"6"
class=
"audi"
>6
</
option
>
<
option
value=
"7"
class=
"audi"
>7
</
option
>
<
option
value=
"8"
class=
"audi"
>8
</
option
>
<
option
value=
"9"
class=
"audi"
>9
</
option
>
</
select
>
<
span
>声音类型：
</
span
>
<
select
name=
""
id=
"select"
selected
>
<
option
value=
"0"
selected=
"selected"
>女生
</
option
>
<
option
value=
"2"
>男生
</
option
>
</
select
>
</
div
>
<
div
id=
"content"
>
<
span
class=
"span"
>张三
</
span
>
<
span
class=
"span"
>李四
</
span
>
<
span
class=
"span"
>王五
</
span
>
<
span
class=
"span"
>张六
</
span
>
<
span
class=
"span"
>黄七
</
span
>
<
span
class=
"span"
>周八
</
span
>
<
span
class=
"span"
>陈玖
</
span
>
<
span
class=
"span"
>久人
</
span
>
<
span
class=
"span"
>博人
</
span
>
<
span
class=
"span"
>佐助
</
span
>
<
span
class=
"span"
>佞人
</
span
>
<
span
class=
"span"
>傻人
</
span
>
<
span
class=
"span"
>呵呵
</
span
>
<
span
class=
"span"
>哈哈
</
span
>
<
span
class=
"span"
>嘻嘻
</
span
>
</
div
>
<!-- 设置音频元素 -->
<
audio
id=
"audio"
autoplay
src=
"https://ai.baidu.com/aidemo?type=tns2
&
idx=1
&
tex=%25E5%25A5%25A5%25E6%259C%25AF%25E5%25A4%25A7%25E5%25B8%2588
&
cuid=baidu_speech_demo
&
cod=2
&
lan=zh
&
ctp=1
&
pdt=1
&
spd=5
&
per=4
&
vol=5
&
pit=5"
>
https://ai.baidu.com/aidemo?type=tns2
&idx=1
&tex=a%2520b%2520c%2520d
&cuid=baidu_speech_demo
&cod=2
&lan=zh
&ctp=1
&pdt=1
&spd=5
&per=2
&vol=5
&pit=5
</
audio
>
</
body
>
<
script
src=
"./jquery-1.12.2.js"
></
script
>
<
script
>
// 首先实现的随机产生一个数，取得对应的名字，并且改变对应的样式
// 1.0获取开始按钮元素
var
start =
document.
getElementById(
"start");
// 1.1获取span代码
var
span =
document.
getElementsByClassName(
"span");
// 1.2获取audio元素
var
audio =
document.
getElementById(
"audio");
// 1.3创建一个空数组，用来存放获取到数据
var
newarr = [];
// 1.4获取刷新按钮
var
reset =
document.
getElementById(
"reset");
// 1.5获取选中者的按钮
var
move =
document.
getElementById(
"move");
// 1.6获取select元素
var
select =
document.
getElementById(
"select");
// 1.6获取语速控制元素
var
audi =
document.
getElementById(
"audi");
var
text;
// 注册点击事件
start.
onclick =
function () {
// 随机产生一个数(1-15);
var
b =
Math.
ceil(
Math.
random() *
15);
// console.log(b);
// 遍历数组span数组
for (
let
i =
0;
i <
span.
length;
i++) {
// console.log($(span[i]).index());
// 如果随机数产生的跟遍历数组里面的索引+1一致(索引是从0开始的，如果不想索引加1，那么可以在随机数那里修改为0-14)，就取出该索引对对应的内容
if (
b ==
$(
span[
i]).
index() +
1) {
// 获取到对应数组里面的内容
text =
span[
i].
innerHTML;
// 将获取到的内容放进新建的数组里面
if (
newarr.
indexOf(
text) == -
1) {
newarr.
push(
text);
}
// 改变对应的样式
$(
span[
i]).
css({
background:
"#f00"
});
// 获取audio元素的URL,并且使用从数组获取的内容（text）代替audio元素URL里面的一部分
audio.
src =
"https://ai.baidu.com/aidemo?type=tns2&idx=1&tex=" +
text +
"&cuid=baidu_speech_demo&cod=2&lan=zh&ctp=1&pdt=1&spd=" +
audi1 +
"&per=" +
gender +
"&vol=5&pit=5"
}
}
}
var
y;
// 点击包选中者的名字
move.
onclick =
function () {
// 讲数组转化成字符串放进audio的URL里面去
y =
newarr.
join(
"");
audio.
src =
"https://ai.baidu.com/aidemo?type=tns2&idx=1&tex=" +
y +
"&cuid=baidu_speech_demo&cod=2&lan=zh&ctp=1&pdt=1&spd=" +
audi1 +
"&per=" +
gender +
"&vol=5&pit=5"
}
// 点击刷新
reset.
onclick =
function () {
// 两者二选一
// location.href = "点名系统.html";
location.
reload();
}
// 声音的选择
var
gender
select.
onclick =
function () {
// 获取到下拉的默认值value
gender =
$(
select).
val();
}
// 语速控制
var
audi1;
audi.
onclick =
function () {
// 获取到下拉的默认值value
audi1 =
$(
audi).
val();
}
<
/
script
>
</
html
>