原生js数组，下拉框，基本语法的应用

最新推荐文章于 2021-10-10 21:26:00 发布

冬~风满楼

最新推荐文章于 2021-10-10 21:26:00 发布

阅读量268

点赞数

分类专栏：原生js

本文链接：https://blog.csdn.net/wnwmxes/article/details/103541037

版权

原生js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<!--原生js数组，下拉框，基本语法的应用-->
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<div>
			请输入字符：<input type="text" id='i0' />
			<button onclick="push()">添加数组</button>
			<button id="btn5">点击自动生成数组</button>
		</div>
		<div>
			过滤掉：
			<select id="select">
				<option value="1">大于</option>
				<option value="2">小于</option>
				<option value="3">等于</option>
			</select>
			<input type="text" id='i2' />
			<button onclick="guolv()">过滤</button>
		</div>
		<div>
			需要删除的字符：<input type="text" id='i1' />
			<button id="btn1" onclick="delete2()">删除数组中指定的元素</button>
		</div>

		<div style="background-color: khaki;"><span>数组:</span><span id='o1'></span></div>

		<button id="btn2">数组去重</button>

		<button id="btn3">数组清空</button>
		<button id="btn4">获取下拉框的值</button>

	</body>
	<script>
		//初始化数组元素
		var arr = [];
		//获取元素节点
		var input = document.getElementById('i0');
		var div = document.getElementById('o1');
		//随机取出min-max的数
		function randNum(min, max) {
			return Math.floor(Math.random() * (max - min + 1) + 1);
		}
		document.getElementById("btn5").onclick = origin;
		//自动添加数组元素
		function origin() {
			arr.length = 0;
			for(var i = 0; i < 10; i++) {　　
				var num = randNum(1, 100)
				arr.push(num);

			}
			var b = arr.join(",");
			div.innerHTML = b;
		}
		//添加数组元素
		function push() {
			arr.push(input.value);
			//	 	arr.forEach(function(item,index){
			//			console.log(item);
			//		})
			var b = arr.join(",");
			div.innerHTML = b;
			input.value = '';
		}
		//删除数组指定元素
		function delete2() {
			var de = document.getElementById('i1');
			arr.splice(arr.indexOf(de.value), 1);
			var b = arr.join(",");
			div.innerHTML = b;
		}
		//数组去重
		function quchong() {　
			var arro = []; //创建新数组
			for(var i = 0; i < arr.length; i++) { //遍历当前数组
				if(arro.indexOf(arr[i]) === -1) { //如果等于-1，那么也是就是新数组中没有一项和当前数组一样
					arro.push(arr[i])
				}
			}
			b = arro.join(",");
			div.innerHTML = b;
		}
		document.getElementById("btn2").onclick = quchong;
		//数组清空
		function clear() {
			//arr =[];
			arr.length = 0;
			b = arr.join(",");
			div.innerHTML = b;
		}
		document.getElementById("btn3").addEventListener("click", clear);
		document.getElementById("btn4").addEventListener("click", selectlist);
		//获取下拉框的值
		function selectlist() {
			//首先获得下拉框的节点对象；
			var tantiao = document.getElementById("select");
			//如何获得当前选中的option的索引？
			var index = tantiao.selectedIndex;
			//如何获得该下拉框所有的option的节点对象
			var options = tantiao.options;
			//如何获得第几个option的文本内容?比如我要获取第一option的文本,可以这样：
			var value1 = options[index].text;
			 //如何获得当前选中的值？：
        	var value = tantiao.value;
			alert(value1);
			
		}
		//数组过滤
		function guolv() {
			var guolv2 = document.getElementById('i2');
			var tantiao = document.getElementById("select").selectedIndex;
			if(tantiao === 0) {
				var filter1 = arr.filter(function(value) {
					return value > guolv2.value;
				})
				b = filter1.join(",");
				div.innerHTML = b;
			}
			if(tantiao === 1) {
				var filter2 = arr.filter(function(value) {
					return value < guolv2.value;
				})
				b = filter2.join(",");
				div.innerHTML = b;
			}
			if(tantiao === 2) {
				var filter3 = arr.filter(function(value) {
					return value === guolv2.value;
				})
				b = filter3.join(",");
				div.innerHTML = b;
			}
		}
	</script>

</html>

冬~风满楼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js数组，下拉框，基本语法的应用

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div> 请输入字符：&...
复制链接

扫一扫