Web--JavaScript（三）

最新推荐文章于 2019-08-27 21:00:42 发布

拯救发际线的张哈哈

最新推荐文章于 2019-08-27 21:00:42 发布

阅读量114

点赞数

分类专栏： MySQL

本文链接：https://blog.csdn.net/weixin_44863429/article/details/99761269

版权

MySQL 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

js内置对象

一、数组的操作

1、创建数组

2、索引操作

3、push()

4、pop()

5、unshift()

6、shift()

7、splice()

二、数学对象

1、Math.abs() 绝对值

2、Math.floor() 向下取整

3、Math.ceil() 向上取整

4、Math.round() 四舍五入

5、Math.random() 0-1之间的随机数

三、定时器

一般情况下，定时器用来完成动画效果

定时器不会阻塞程序执行，并行执行的返回一个数字为定时器的标识

单次定时器：setTimeout()

多次定时(循环定时器)：setInterval()

清除定时器

clearTimeout() 清除单次定时器

clearInterval() 清除多次定时器

四、练习

变色块：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#box{
			width: 100px;
			height: 100px;
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<script>
		//获取元素对象
		var oDiv = document.getElementById('box');
		setInterval(function(){
			oDiv.style.backgroundColor='rgb('+rand(0,255)+','+rand(0,255)+','+rand(0,255)+')';
		},100)

		//随机数
		function rand(n,m){
			return Math.floor(Math.random()*(m-n+1))+n;
		}
	</script>
</body>
</html>

随机点名：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.wrap{
			width: 400px;
			height: 400px;
			border-radius: 20px;
			border: 1px solid red;
			background: pink;
		}
		.uname{
			width:220;
			height: 50px;
			background: #fff;
			margin: 50px auto;
			text-align: center;
			line-height: 50px;
			font-size: 30px;
			font-weight: 800;
		}
		.savename{
			text-align: center;
		}
		.btn{
			width: 100px;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="uname">姓名</div>
		<div class="btn">
			<button id="start">开始</button>
			<button id="end">结束</button>
		</div>
		<div class="savename"></div>
	</div>
	<script>
		//获取按钮对象
		var Start = document.getElementById('start');
		var End = document.getElementById('end');
		//获取显示人名的元素对象
		var showName = document.getElementsByClassName('uname');
		var saveName = document.getElementsByClassName('savename');
		var flag = 0;
		//定义数据
		var arr = ['小仙女','小可爱','大猪蹄子','泡椒凤爪','哈哈哈','嘿嘿嘿'];
		//给开始按钮添加单击事件
		Start.onclick = function(){
			//随机取名字
			flag = setInterval(function(){
				//取随机的索引值
				inde = rand(0,arr.length-1);
				//取人名
				newname = arr[inde];
				//将人名写入到uname
				showName[0].innerHTML = newname;
			},50);
			//把开始按钮禁用
			Start.disabled = true;
		}
		//单击结束清除定时器
		End.onclick = function(){
			clearInterval(flag);
			//将按钮的禁用属性去掉
			Start.disabled = false;
			saveName[0].innerHTML += newname+'<p>';
			console.log(arr.splice(inde,1));
		} 
		//随机函数
		function rand(n,m){
			return Math.floor(Math.random()*(m-n+1))+n;
		}
	</script>
</body>
</html>