JavaScript初始小实例四_jsbarcode限制宽度-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_48683052/article/details/121244533

练习

1、原生js生成固定宽度，随机宽、高、背景颜色及个数，并且点击最大值按钮使最大值高亮（且点击过后能改变乘初始颜色）

ps：高亮这里用的是背景颜色为黄色

2、随机生成一个数组，点击添加按钮时，在该数据结尾插入随机个数；点击插入则在添加数组后的数组前插入随机个数；点击倒叙按钮，在不用reverse操作下时最终数组反转

1、原生js生成固定宽度，随机宽、高、背景颜色及个数，并且点击最大值按钮使最大值高亮（且点击过后能改变乘初始颜色）

ps：高亮这里用的是背景颜色为黄色

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	#res{
	min-height:200px;
	border:2px solid #000;
	}
	
  </style>
 </head>
 <body>
    <input type="button" id="butt" value="生成">
	<input type="button" id="buto" value="最大值">
	
   <div id="res"></div>
   <script>
//随机数
     function getRand(min, max) {
            return Math.round(Math.random() * (max - min) + min);
        }
//获取元素
	var butt= document.getElementById("butt");
	var buto= document.getElementById("buto");
	var res = document.getElementById("res");
	var color=Array();//创建存储颜色的数组
//点击生成按钮，生成
	butt.onclick=function(){
		var num=parseInt(Math.random()*10);
		for(var i=0;i<=num;i++){
			var w=parseInt(getRand(30,60));
			var h=parseInt(Math.random()*100);
			var r=parseInt(Math.random()*255);
			var g=parseInt(Math.random()*255);
			var b=parseInt(Math.random()*255);
			var n=parseInt(Math.random()*(999-1)+1);
			
			color.push("rgb("+r+","+g+","+b+")");
			//max=max>n?max:n
			var box='<div class="box1" style="width:30px;height:'+h+'px;background-color:rgb('+r+','+g+','+b+');display:inline-block;margin:5px;vertical-align: bottom;">'+n+'</div>';
			res.innerHTML=res.innerHTML+box;
		}
		console.log(color)
	}
//点击最大值按钮
	buto.onclick=function(){
		var max=0;//最大值
		var index=0;
		var bobo = document.getElementsByClassName("box1");//获取类名为box1的节点数组
		for(var i=0;i<bobo.length;i++){//循环遍历所有bobo节点数组
			var number=bobo[i].innerHTML;
			if(number>max){//判断
				max=number;
				index=i;
			}
		}
		//获取符合最大值的元素
		bobo[index].style.background="yellow";
		var b=0; 
		bobo[index].onclick=function(){
			b=b+1;
			if(b%2==1){
				bobo[index].style.background=color[index];
			}else{
				bobo[index].style.background="yellow";
			}
		}
		
	}
  </script> 
 </body>
</html>

2、随机生成一个数组，点击添加按钮时，在该数据结尾插入随机个数；点击插入则在添加数组后的数组前插入随机个数；点击倒叙按钮，在不用reverse操作下时最终数组反转

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  <style>
	#res{
	min-height:200px;
	border:2px solid #000;
	}
  </style>
 </head>
 <body>
  <input id="b1" type="button" value="添加">
   <input id="b2" type="button" value="插入">
   <input id="b3" type="button" value="倒叙">
  <div id="res"></div>
  <script>
    var b1= document.getElementById("b1");
	var b2= document.getElementById("b2");
	var b3= document.getElementById("b3");
	var res = document.getElementById("res");
	var a=Array();
//生成随机个数及内容的数组
	var w=parseInt(Math.random()*20);
		for(var i=0;i<w;i++){
			var h=parseInt(Math.random()*20);
			a.push(h);
		}
		res.innerHTML+='a=['+a+']';
//结尾插入
	b1.onclick=function(){
		for(var i=0;i<w;i++){
			var h=parseInt(Math.random()*20);
			a.push(h);
		}
		res.innerHTML+='a=['+a+']';
	}
//开头插入
	b2.onclick=function(){
		for(var i=0;i<w;i++){
			var h=parseInt(Math.random()*20);
			a.unshift(h);
		}
		res.innerHTML+='a=['+a+']';
	}
//最终数组反转
	b3.onclick=function(){
		var b=Array();
		for(var i=a.length-1;i>=0;i--){
			b.push(a[i])
		}
		res.innerHTML+='b=['+b+']';
	}
  </script>
 </body>
</html>