今天，是JavaScript回炉的第二十三天
setInterval()
clearInterval()
前段时间帮某单位的hr组织开发了一个大屏幕展示抽题活动的小程序。
<!DOCTYPE html>
<br lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<style>
#p010{
height:100vh;
width:100vw;
background:url("
C:///Users///l///Desktop///前端///img///1.webp");
transition: all 1s;
opacity: 100;
}
#p011{
display: none;
}
#p012{
width: 120px;
height: 28px;
/* background-color: aquamarine; */
margin: auto;
margin-left: 600px;
color: brown;
}
#p013{
width: 750px;
background: brown;
margin: auto;
font-size: 40px;
font-family: 楷体;
text-align: center;
line-height: 100px;
color: yellow;
}
#p014{
width: 750px;
height: 100px;
background: teal;
}
#p015{
left: 200px;
width: 150px;
text-align: center;
font-size: 30px;
font-family: '楷体';
margin-left: 600px;
}
#p016{
text-align: center;
width: 750px;
background: powderblue;
}
</style>
<body>
<p id="p010">
<p id="p011">
<p id="p014">
< img id="img" src="C:\Users\l\Desktop\前端\lun1.jpg" style="width:750px;height: 100px;">
</p>
<p id="p012">
<table>
<thead>
<tr>
<td>倒计时:</td>
<td id="td01">0</td>
<td id="td02">0</td>
<td>秒</td>
</tr>
</thead>
</table>
</p>
<p id="p016">
</p>
<p id="p013">
</p>
<p id="p017">
</p>
<p id="p015">
<table>
<thead>
<tr>
<td id="td03"><button onclick="button01(3)">简答题</button></td>
<td id="td04"><button onclick="button02()">答 案</button></td>
</tr>
</thead>
</table>
</p>
</p>
</p>
</body>
<script>
var arr = new Array();
var timer = setInterval(function f1(){
var aaa = Math.floor(Math.random()*10);
var b1 = 'url("
C:///Users///l///Desktop///前端///img///1.webp")'
var b2 = 'url("
C:///Users///l///Desktop///前端///img///2.webp")'
var b3 = 'url("
C:///Users///l///Desktop///前端///img///3.webp")'
var b4 = 'url("
C:///Users///l///Desktop///前端///img///4.webp")'
var b5 = 'url("
C:///Users///l///Desktop///前端///img///5.webp")'
var b6 = 'url("
C:///Users///l///Desktop///前端///img///6.webp")'
var b7 = 'url("
C:///Users///l///Desktop///前端///img///7.webp")'
var b8 = 'url("
C:///Users///l///Desktop///前端///img///8.webp")'
var b9 = 'url("
C:///Users///l///Desktop///前端///img///9.webp")'
var b10 = 'url("
C:///Users///l///Desktop///前端///img///10.webp")'
var bbb = new Array()
bbb = [b1,b2,b3,b4,b5,b6,b7,b8,b9,b10]
document.getElementById("p010").style.background = bbb[aaa]
}, 5000);
window.onclick=function(){
clearInterval(timer);
document.getElementById("p010").style.background = "white";
document.getElementById("p011").style.display = "block";
}
var i = 0;
var j = 0;
var aa;
function f4(num){
aa = setInterval(function f2(){
i++;
document.getElementById("td02").innerHTML = i;
if(i>8){
i=0
j++
}
document.getElementById("td01").innerHTML = j;
if(j>8){
i=0;
j=0;
}
var bb = document.getElementById("td01").innerHTML;
if(Number(bb) == num){
document.getElementById("td02").innerHTML = 0;
clearInterval(aa);
alert("时间到")
}
},1000);
}
function f5(){
document.getElementById("td01").innerHTML = 0;
document.getElementById("td02").innerHTML = 0;
clearInterval(aa);
i = 0;
j = 0;
}
var num = 10
var que;
var objArray = [{"id":"1","subject":"寂寞空庭春欲晚，满地梨花不开门","answer":"刘方平《春怨》"},{"id":"2","subject":"万里清江万里天，一村桑柘一村烟","answer":"韩偓《醉著》"},{"id":"3","subject":"秋风生渭水，落叶满长安","answer":"贾岛《忆江上吴处士》"},{"id":"4","subject":"花开花落不长久，落红满地归寂中","answer":"陈叔宝《玉树后庭花》"},{"id":"5","subject":"客子光阴诗卷里，杏花消息雨声中","answer":"冯延巳《南乡子》"},{"id":"6","subject":"白云千里万里，明月前溪后溪","answer":"刘长卿《谪仙怨》"},{"id":"7","subject":"漠漠梨花烂漫，纷纷柳絮飞残","answer":"陈允平《红林擒近·寿词·满路花》"},{"id":"8","subject":"酒醒明月下，梦逐潮声去","answer":"姜夔《玲珑四犯·越中岁暮闻箫鼓感怀》"},{"id":"9","subject":"高树月初白，微风酒半醒。独行穿落叶，闲坐数流萤。","answer":"林景熙《溪亭》"},{"id":"10","subject":"啼鸟云山静，落花溪水香","answer":"戴叔伦《雨》"}];
function button01(num){
document.getElementById('p017').innerHTML = ''
f5();
f4(num);
if(arr.length < 10){
var ddd = Math.floor(Math.random()*num);
que = objArray[ddd].answer
document.getElementById('p013').innerHTML= objArray[ddd].subject
arr.push(objArray[ddd].id)
objArray.splice(ddd,1)
document.getElementById('p016').innerHTML = arr
num--;
}else{
alert("题目选择完毕")
}
}
function button02(){
document.getElementById('p017').innerHTML = '答案：'+que
}
var img1 = "
C:///Users///l///Desktop///前端///lun1.jpg"
var img2 = "
C:///Users///l///Desktop///前端///lun2.jpg"
var img3 = "
C:///Users///l///Desktop///前端///lun3.jpg"
var img4 = "
C:///Users///l///Desktop///前端///lun4.jpg"
var img5 = "
C:///Users///l///Desktop///前端///lun5.jpg"
var img6 = "
C:///Users///l///Desktop///前端///lun6.jpg"
var arr01 = [img1,img2,img3,img4,img5,img6]
var k=0;
setInterval(function f6(){
document.querySelector('#img').src=arr01[k];
k++;
if(k>5){
k=0;
}
}, 2000);
</script>
</html>
