2018/10/19 JavaSprict 随机循环学习
今日学习知识
断点
调试 F10单步运行
source
源
对象
- 给属性赋值；
- 取属性的值。
事件
| 代码 | 使用地点 |
|---|---|
| onclick | 点击 |
| onchange | 多用于 select 标签 |
| onkeypress | 键盘按下或不按下 |
创建新对象、数组、轮回、取消轮回
| 事件 | 代码 |
|---|---|
| 创建新对象 | var stus = new Object(); |
| 创建新数组 | var stus = new Array(); |
| 轮循操作 | randomCK = setInterval(r,100); |
| 结束轮回 | clearInterval(randomCK); |
今日代码练习
代码展示
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="width: 600px; height: 220px; margin:100px auto; background-color: gray;">
<img id="stuPic" src="1.jpg" width="200px"
height="200px" style="margin: 10px">
<h1 id="stuName" style="float: left;">潘勇</h1>
<h1 id="stuNo" style="float: left;margin-left: 20px;">1号</h1>
</div>
<div style="margin: 20px auto; width: 100px; background-color: gray;">
<input type="button" style="width: 100px; height: 25px;" value="开始抽奖" onclick="ck(this)" name="">
</div>
<h1 id="tt"></h1>
</body>
<script type="text/javascript">
var pics = [
"1.jpg",
"2.jpg",
"3.jpg",
"4.jpg"
];
var stuNum = 5;
var stus = new Array(); // 用于存放学生对象的数组
for (var i = 1; i <= stuNum; i++) {
var stu = {pic:pics[i % pics.length],name:"李四"+i, stuNo:i};
stus.push(stu);
}
var randomCk;
function ck(obj) {
if (obj.value == "开始抽奖") {
obj.value = "结束抽奖";
randomCk = setInterval(r, 100);
} else {
obj.value = "开始抽奖";
clearInterval(randomCk);
}
}
function r() {
var rn = Math.ceil(Math.random() * stus.length);
document.getElementById("stuPic").src = stus[rn].pic;
document.getElementById("stuName").innerHTML = stus[rn].name;
document.getElementById("stuNo").innerHTML = stus[rn].stuNo;
}
</script>
</html>