MyJavaScriptCode/changeName.html at master · YuHe0108/MyJavaScriptCode · GitHub

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
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible" content="IE=edge">
<title>点名册功能的实现</title>
<linkrel="stylesheet" href="">
<style>
* {
padding:0;
margin:0;
list-style: none;
 }
 .c-father {
width:330px;
height:130px;
background: pink;
margin:100px auto;
text-align: center;
color: skyblue;
 }
p {
font-size:52px;
margin-top:10px;
 }
button {
border-radius:30px;
background: green;
font-size:15px;
width:50px;
height:50px;
 }
</style>
<script>
window.onload=function(){
varoDiv=document.getElementById("i_father");
varaButs=oDiv.getElementsByTagName("button");
varoStart=aButs[0];
varoEnd=aButs[1];
varoText=oDiv.getElementsByTagName("p")[0];
varaNames=["Fariy","小仙女","Fish","Sakura","瑛瑛","Baby","Today","Dog","cat",];
varoName="",oTimer=null;

oStart.onclick=function(){
clearInterval(oTimer);
oTimer=setInterval(function(){
oName=aNames[parseInt(Math.random()*aNames.length)];
oText.innerHTML=oName;
},30);
};
oEnd.onclick=function(){
clearInterval(oTimer);
};
};
</script>
</head>
<body>
<divid="i_father" class="c-father">
<button>开始</button>
<button>停止</button>
<p>fariy</p>
</div>
</body>
</html>