2018/10/19 JavaSprict 随机循环学习

最新推荐文章于 2022-11-22 23:26:09 发布

Soumns1

最新推荐文章于 2022-11-22 23:26:09 发布

阅读量244

点赞数

本文链接：https://blog.csdn.net/Soumns1/article/details/83183731

版权

文章目录

今日学习知识
今日代码练习
- 代码展示
- 效果图展示

今日学习知识

断点

调试 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>