随机数 while和do-while tab切换自定义菜单数组

最新推荐文章于 2023-05-20 10:50:24 发布

敲代码的皮皮

最新推荐文章于 2023-05-20 10:50:24 发布

阅读量144

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/cc12345_10/article/details/116235306

版权

1.随机数

/*
	Math.floor() 向下取整
	Math.round() 四舍五入
	Math.ceil() 向上取整
	
	随机数
	Math.random() 取值范围是 [0,1),0到1，取到0，但是取不到1
	
	*/ 
   document.write(Math.random());
   
   // 把[0,100)的随机整数，添加到div.wp
   var wps = document.getElementsByClassName('wp');
   var wp = wps[0];
   // 向下取整，获取不到100
   var num = Math.floor(Math.random()*100); 
   wp.innerHTML = num;
   
   // [0,100] 0-100随机数，包含10
   var num1 = Math.floor(Math.random()*101);
   wp.innerHTML = num1;
	
	//[20-100] 随机数
	var num2 = Math.floor(Math.random()*81+20);
	wp.innerHTML = num2;
	
	// 获取[m,n] 区间的随机整数
	// Math.floor(Math.random()*(n-m+1)+m)
	
	// 10个20到60之间的随机数
	for(var i=0;i<10;i++){
		var num = Math.floor(Math.random()*41+20);
		document.write('<br/>'+num);
	}
	document.write('<hr/>');
	
	// 改变wp的背景颜色
	/*
		1.怎么改变 wp.style.background = 'rgb(r,g,b)';
		r g b 三个数是随机的[0,255]
		2. 随机获取三个[0,255]的随机数，赋值给r、g、b
		
	*/
	var r = Math.floor(Math.random()*256);
	var g = Math.floor(Math.random()*256);
	var b = Math.floor(Math.random()*256);
	wp.style.background = 'rgb('+r+','+g+','+b+')';
	var str = '中国';
	var str1 = '华夏';
	var str2 = '神州'+str1+'中国';
	document.write(str2);

2.while和do-while

/*
	while(循环条件){ 循环体 }
	只有当循环条件满足的时候，才能进入循环体，当循环条件不满足的时候，循环结束
	*/
   // 输入10次 中国很强
   var i=0;
   while(i<10){
	   document.write(i+'中国很强<hr/>');
	   i++;
   }
   console.log(i);
   
   /*
   求两个数的最大公约数
   */ 
  var a=24,b=36;
  var c = d = 100;// 连等，从右向左运算
  console.log(a,b,c,d);
  for(var i=a;i>0;i--){
	  if(a%i==0&&b%i==0){
		  console.log('最大公约数是'+i);
		  break; // 终止循环
	  }
  }
  // 辗转相除法求最大公约数
  var max = a>b?a:b; //68
  var min = a<b?a:b; // 20
  var yu = max%min; // 8
  var y = 0;
  while(yu!=0){
	y = min%yu; // y=0 min=8 yu=4
	min = yu; //min=4
	yu = y; //yu=0
  }
  console.log('最大公约数是'+min);
  /*
  do-while
  他和while唯一的区别是，while是先判断条件是否满足，然后再执行循环体中的代码
  do-while是先执行循环体，然后再判断条件是否满足，如果满足，再执行循环体
  */ 
	 while(false){
		console.log('出出不来');
	 }
	 do{
		 console.log('出出不来do');
	 }while(false);

3.自定义菜单


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义菜单</title>
		<style type="text/css">
			* {
				margin:0;
				padding: 0;
			}
			.nav {
				width:600px;
				height:60px;
				border:1px #f00 solid;
				margin:50px auto 0;
				display: flex;
				justify-content: space-between;
			}
			.nav a {
				display: block;
				height: 60px;
				width:120px;
				text-align: center;
				line-height: 60px;
				background: #999;
				font-size:30px;
				color:#fff;
				text-decoration: none; /* 去掉下划线 */
			}
			.nav a.on {
				background:#f60;
			} 
		</style>
	</head>
	<body>
		<div class="nav">
			<a href="###" class="on">中国</a>
			<a href="###">美国</a>
			<a href="###">俄罗斯</a>
		</div>
	</body>
</html>
<script type="text/javascript">
	/*
	1.先获取所有的a ，数组，需要使用数组的取值方式
	2.添加点击事件
	
	*/ 
   var box = document.getElementsByTagName('a');
   /*
	
	box[0].onclick = function(){
		// 添加class名的时候，不能直接使用class,因为class是js的一个保留字，不能产生冲突，js推荐使用className替代
		box[0].className = 'on';
		box[1].className = '';
		box[2].className = '';
	};
	
	box[1].onclick = function(){
		box[0].className = '';
		box[1].className = 'on';
		box[2].className = '';
	};
	box[2].onclick = function(){
		box[0].className = '';
		box[1].className = '';
		box[2].className = 'on';
	};
	*/
   for(var i=0;i<box.length;i++){
		//给每一个a元素添加点击事件
		box[i].onclick = function(){
			//去掉所有的选中状态
			for(var j=0;j<box.length;j++){
				box[j].className = '';
			}
			console.log(i);
			// 给当前操作的元素添加选中状态
			/*
			box[i]代表的不是当前的选中元素，因为元素绑定的点击事件，只能在元素点击的时候执行，绑定的时候是不知执行的，当我们点击的时候，i已经自增到它的最大值
			this 关键字，每一个函数都有一个this关键字，当元素与某一个函数绑定的时候，this就代表该元素
			*/
			// box[i].className = 'on';
			this.className = 'on';
		};
   }
</script>

4.tab切换


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>tab切换</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.btn-box {
				width:300px;
				height: 40px;
				margin:0 auto;
			}
			
			.btn-box button {
				margin-right:20px;
				height:40px;
				width:80px;
				text-align: center;
				line-height:40px;
				cursor: pointer;
			}
			.btn-box button:nth-last-child(1) {
				margin-right:0;
			}
			.cont {
				margin:50px;
				height:200px;
				border:1px #f00 solid;
				display: none;
			}
			.show {
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="btn-box">
			<button>汉</button>
			<button>唐</button>
			<button>宋</button>
		</div>
		<div class="cont show">
			汉武帝
		</div>
		<div class="cont">
			唐明皇
		</div>
		<div class="cont">
			宋徽宗
		</div>
	</body>
</html>
<script type="text/javascript">
	var btns = document.getElementsByTagName('button');
	var conts = document.getElementsByClassName('cont');
	for(var i=0;i<btns.length;i++){
		//给每一个按钮设置自定义属性，自定义属性的值，即为元素的下标值
		btns[i].index = i;
		btns[i].onclick = function(){
			for(var j=0;j<conts.length;j++){
				conts[j].className = 'cont';
			}
			//conts[i].className = 'cont show';
			conts[this.index].className = 'cont show';
		};
	}
</script>

5.面试题(点击是获取数组下标)


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			ul,li {
				list-style-type: none;
			}
			ul>li {
				height:50px;
				border:1px #f00 solid;
				margin-bottom:20px;
				background:#999;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
		</ul>
	</body>
</html>
<script type="text/javascript">
	var lis = document.getElementsByTagName('li');
	for(var i=0;i<lis.length;i++){
		lis[i].abc = i;
		lis[i].onclick = function(){
			alert(this.abc+1);
		};
	}
</script>

6.数组

/*
	数组
	1.数组属于对象类型(复杂类型)
	2.number,string,boolean 属于简单类型
	*/
   //数组的定义
   //1.直接定义
   var arr1 = [1,2,'辛弃疾','苏轼'];
   //2.根据构造函数创建数组
   var arr2 = new Array(1,2,'辛弃疾','苏轼');
   console.log(arr1,arr2);
   /*
   构造函数的参数 Array()
   1.如果没有参数，则表示为一个空数组
   2.如果参数只有一个number类型的数字，则表示声明一个长度为number的数组
   3.如果参数为其他类型或者有多个，则参数表示数组内容
   */
   var arr3 = new Array();
   console.log(arr3);
   var arr4 = new Array(10);
   console.log(arr4);
   
   var arr5 = new Array(10,3);
   console.log(arr5);
   /*
	数组的length属性，代表数组的长度，可读写
	可以使用length属性，删除数组超出的长度
	如果要清空数组，可以设置 length为0
   */ 
  var arr6 = ['潘金莲','李瓶儿','庞春梅'];
  console.log(arr6.length);
   arr6.length = 2;
   console.log(arr6);
   
   //面试题, 如果最后一个逗号后面为空，则表示没有数据，如果逗号前面为空，则表示一个空数据
   var arr7 = [,,3,,];
   var arr8 = [,,,,,,,];
   
   console.log(arr7.length,arr8.length);
   
   //数组中，可以放变量，可以放表达式，可以放不同类型的数据
   var num = 15;
   var arr9 = [num,num+num,num*2,true,{name:'诺基亚'}];
   console.log(arr9);
   
   /*
   数组的遍历
   1.for()
   2.for in 不仅可以遍历数组，还可以遍历对象
   3.forEach ，低版本ie(6,7)不支持
   
   获取数组的值 arr[下标] 下标从0开始计算
   */ 
  var arr10 = [4,3,5,6,78,90];
  
  for(var i=0;i<arr10.length;i++){
	  console.log(arr10[i]+10);
  }
  for (var ab in arr10) {
  	console.log(ab,arr10[ab]);
  }
  
  var obj = {
	  name:'西门庆',
	  age:20,
	  job:'暴发户'
  };
  console.log(obj);
  for (var ab in obj) {
  	console.log(ab,obj[ab]);
  }
  
  arr10.forEach(function(item){
	  console.log(item);
  })

7.数组的函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组函数</title>
	</head>
	<body>
		<select id="sel">
			<option value="0">零</option>
			<option value="5">五</option>
			<option value="10">十</option>
		</select>
		<button type="button" id="btn">点击</button>
	</body>
</html>
<script type="text/javascript">
	var btn = document.getElementById("btn");
	var sel = document.getElementById("sel");
	btn.onclick = function(){
		alert(sel.value);
	};
	
	var han = [0,5,10,15,20];
	// han[2]
	
	/*
	js中的函数分类
	1.自定义函数
	2.系统函数(js本身提供的函数，也叫库函数)
	*/
   /*
   1.数组的增删
	push() 
	向数组的尾部加入元素
	参数：可以是多个
	返回值是 新数组的长度
	
	unshift()
	向数组的头部加入元素
	参数：可以是多个
	返回值是 新数组的长度
	bug: IE6/7 下没有返回值
   */
  var arr1 = ['阿敏','代善','皇太极','莽古尔泰'];
  console.log(arr1);
  var l = arr1.push('多尔衮');
  console.log(l,arr1);
  arr1.push('多铎','济尔哈朗','阿济格');
  console.log(arr1);
  
  var len = arr1.unshift('努尔哈赤');
  console.log(len,arr1);
  
</script>