-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontent.html
216 lines (179 loc) · 5.44 KB
/
content.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 设定网页字符集 -->
<meta charset="UTF-8">
<!-- 指定IE和chrome使用最新版渲染当前页面 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 指定请求和响应遵循的缓存机制 -->
<meta http-equiv="Cache-Control" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="layoutmode" content="standard">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="renderer" content="webkit">
<meta name="wap-font-scale" content="no">
<meta content="telephone=no" name="format-detection">
<meta http-equiv="Pragma" content="no-cache">
<title></title>
<link rel="stylesheet" type="text/css" href="css/base.min.css">
</head>
<body class="sports_box">
<div class="title">
<!-- 用户头像 -->
<div class="picture"></div>
<!-- 用户名 -->
<div class="username">Awen</div>
</div>
<div class="sports_piture" style="display: none"></div>
<!-- 倒计时 -->
<div class="countdown" style="display: none"></div>
<div class="answer_content">
<div class="second">
8
</div>
<!-- 序号 -->
<div class="serial_number">
Q1
</div>
<div class="question_title">
</div>
<!-- 答案 -->
<div class="answer">
<ul class="list">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
let picture = $(".picture");
let username = $(".username");
let sports_piture = $(".sports_piture");
let countdown = $(".countdown");
let list = $(".list li");
//console.log(list.length);
/*更改用户头像*/
let arrImg = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"];
/*用户名称*/
let arrName = ["Awen","Tom","Jeery","Jack"];
let random = parseInt(Math.random()*(arrImg.length-1));
let imgSrc = getImgSrc(arrImg[random]);
picture.css({backgroundImage:"url("+imgSrc+")",backgroundRepeat:"no-repeat",backgroundPosition:"center",backgroundSize:"5.6rem 5.6rem"})
// 用户名
username.text(arrName[random]);
/*倒计时效果*/
//changeImage(countdown,["./images/1.png","./images/2.png","./images/3.png"],sports_piture);
let data = [
{
result: 1,
answer: "人工智能一词最早是什么时候提出来的？",
question: ["1995年","2002年","1996年","1997年"]
},
{
result: 3,
answer: "你的等级？",
question: ["精英","初中","练习册答案","课后习题答案"]
},
{
result: 4,
answer: "问题3",
question: ["水是眼波横","不与我言兮","维子之故","使我不能餐兮"]
},
{
result: 2,
answer: "问题4",
question: ["风情渐老见春羞","最伤心","一片孤山细雨","七子论诗谁似公"]
},
];
let dataRandom = parseInt(Math.random()*(data.length-1));
switchAnswer(data,list,dataRandom);
// 问题
//let title = "人工智能一词最早是什么时候提出来的？";
/*let question_title = $(".question_title");
// question_title.text(title);
question_title.text(data[dataRandom].answer);
// 答题效果控制
for(let i=0; i< list.length; i++) {
list[i].innerText = data[dataRandom].question[i];
}
let temp = data[dataRandom].index;
for(let i=0; i< list.length; i++) {
list[i].addEventListener("click",function(e) {
console.log($(this).index()+1);
let index = $(this).index() + 1;
if(index === data[dataRandom].result) {
$(this).addClass("success");
} else {
$(this).addClass("error");
}
let mask = $("<div class='mask'></div>");
$(".answer").append(mask);
},false);
}*/
});
/**
* @parameter: data: 答题的数据
* @parameter: ele: 元素
* @parameter: dataRandom: 随机数--抽题目
*/
function switchAnswer(data,list,dataRandom) {
// 8秒钟走完 -- 开始换一次题目
countdownSecond();
let question_title = $(".question_title");
question_title.text(data[dataRandom].answer);
for(let i=0; i< list.length; i++) {
list[i].innerText = data[dataRandom].question[i];
}
let temp = data[dataRandom].index;
for(let i=0; i< list.length; i++) {
list[i].addEventListener("click",function(e) {
console.log($(this).index()+1);
let index = $(this).index() + 1;
if(index === data[dataRandom].result) {
$(this).addClass("success");
} else {
$(this).addClass("error");
}
let mask = $("<div class='mask'></div>");
$(".answer").append(mask);
},false);
}
}
function countdownSecond() {
let second = $(".second");
let num = parseInt(second.text());
let timer = setInterval(function() {
num --;
second.text(num);
if(num == 0) {
clearInterval(timer);
}
}, 1000);
}
function getImgSrc(img) {
/*判断传进来的是合法的图片*/
let src = "./images/"+ img;
return src;
}
function changeImage(ele,imgArr,sports) {
//倒计时 改变图片的source
let time = 3;
let timer = setInterval(function() {
time--;
ele.style.backgroundImage = "url("+imgArr[time]+")";
//如果3秒过后，那就停止计时器
if(time<0) {
clearInterval(timer);
ele.style.backgroundImage = "none";
sports.style.backgroundImage = "none";
}
}, 1000);
}
</script>
</body>
</html>