W3school学习 js-2

最新推荐文章于 2024-07-19 15:20:42 发布

2241431065

最新推荐文章于 2024-07-19 15:20:42 发布

阅读量84

点赞数

分类专栏： Java Web 文章标签： html javascript html5

本文链接：https://blog.csdn.net/qq_40748967/article/details/119936645

版权

Java Web 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<html>
<body>
	
	<p id = "demo1"></p>
	<button onclick = "myfunction_1()">数组添加push方法->点击添加！</button>
	
	<p id = "demo2"></p>
	<button onclick = "myfunction_2()">数组添加length方法->点击添加！</button>
	
	<p id = "demo3"></p>
	<p id = "demo4"></p>
	<p id = "demo5"></p>
	<p id = "demo6"></p>
	<p id = "demo7"></p>
	<p id = "demo8"></p>
	<p id = "demo9"></p>
	<p id = "demo10"></p>
	
	<p id = "demo11"></p>
	<button onclick = "myfunction_3()">sort()排序！</button>
	
	<p id = "demo12"></p>
	<button onclick = "myfunction_4()">字母排序</button>
	<button onclick = "myfunction_5()">数字排序</button>
	
	<p id = "demo13"></p>
	<button onclick = "myfunction_6()">随机数排列</button>
	
	<p id = "demo14"></p>
	<p id = "demo15"></p>
	<p id = "demo16"></p>
	<p id = "demo17"></p>
	
	<p id = "demo18"></p>
	<button onclick = "document.getElementById('demo18').innerHTML = getRndInteger(1,10)">点击生成随机数</button>
	
	<p id = "demo19"></p>
	<input id = "age" value = "18" />
	<button onclick = "myfunction_9()">试一试</button>
	
	<p id = "demo20"></p>
	<input id = "age" value = "18" />
	<button onclick = "myfunction_10()">试一试</button>
	
<script>
	
	//有2种给数组添加新元素的方法
	var fruits = [ "Banana", "Apple", "Orange", "Mango", "66"];
	document.getElementById("demo1").innerHTML = fruits;
	function myfunction_1(){
		fruits.push("Lemon");  //1：push 方法向数组追加新元素。
		document.getElementById("demo1").innerHTML = fruits;
	}

	document.getElementById("demo2").innerHTML = fruits;
	function myfunction_2(){
		fruits[fruits.length] = "Apple";  //2：length 属性提供了一种在不使用 push() 方法的情况下将新元素附加到数组的简便方法。
		document.getElementById("demo2").innerHTML = fruits;
	}
	
	//pop() 方法从数组中删除最后一个元素
	fruits.pop();
	document.getElementById("demo5").innerHTML = "使用pop()删除最后一个数据：" + fruits;
	
	document.getElementById("demo6").innerHTML = "删除之前的数据：" + fruits;
	document.getElementById("demo7").innerHTML = "删除的数据：" + fruits.pop();
	document.getElementById("demo8").innerHTML = "删除之后的数据：" + fruits;
	
	//push()显示数组数据长度
	document.getElementById("demo9").innerHTML = "push()显示增加88后的数组长度：" + fruits.push("88");
	document.getElementById("demo10").innerHTML = "增加 88 之后的数组数据显示：" + fruits;
	
	/*
		案例网址：https://www.w3school.com.cn/js/js_array_methods.asp
		shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。
		splice() 方法可用于向数组添加新项
		splice() 方法返回一个包含已删除项的数组
		concat() 方法通过合并（连接）现有数组来创建一个新数组
		slice() 方法用数组的某个片段切出新数组
	*/
	
	//toString() 方法以逗号分隔的字符串返回数组
	var num = ["11", "22", "33"];
	document.getElementById("demo3").innerHTML = "toString()用法：" + num.toString();
	//join() 方法将数组元素连接成一个字符串，在这个例子中我们使用“*”作为元素之间的分隔符
	document.getElementById("demo4").innerHTML = "join(*)用法：" + num.join("*");
	
	//通过组合 sort() 和 reverse()，您可以按降序对数组进行排序。
	function myfunction_3(){
		fruits.sort();  //单独使用sort()是按照字母进行升序
		//fruits.reverse();
		document.getElementById("demo11").innerHTML = fruits;
	}
	
	//单击按钮可按字母顺序或数字顺序对数组进行排序
	var points = [20,18,47,23,12,100,10];
	document.getElementById("demo12").innerHTML = points;
	function myfunction_4(){
		points.sort();
		document.getElementById("demo12").innerHTML = points;
	}
	function myfunction_5(){
		points.sort(
		function(a,b){
			return a - b
		} );
		document.getElementById("demo12").innerHTML = points;
	}

	//反复点击按钮，对数组进行随机排序。
	document.getElementById("demo13").innerHTML = points;
	function myfunction_6(){
		points.sort(
			function(a,b){
				return 0.5 - Math.random()
		});
		document.getElementById("demo13").innerHTML = points;
	}

	//数组迭代
	var txt = " ";
	var numbers = [1,3,5,7,9];
	numbers.forEach(myfunction_7);  
	document.getElementById("demo14").innerHTML = txt;
	/*
	forEach() 方法为每个数组元素调用一次函数（回调函数）
		注释：该函数接受 3 个参数：
			项目值
			项目索引
			数组本身
	*/
	<!-- function myfunction_7(value, index, array){ -->
		<!-- txt = txt + value + "<br>"; -->
	<!-- } -->
	
	function myfunction_7(value){
		txt = txt + value + "<br>";
	}  //因为目前只用到了value参数，其他可忽略
	
	//通过对每个数组元素执行函数来创建新数组
	var numbers_1 = [23, 34, 44, 22, 2];
	var numbers_2 = numbers_1.map(myfunction_8);
	document.getElementById("demo15").innerHTML = numbers_2;
	
	function myfunction_8(value, index, array){
		return value*2; 
	}
	
	//Math.floor(Math.random() * 10) 返回 0 与 9 之间的随机整数（均包含）
	document.getElementById("demo16").innerHTML = "0-9的随机整数是：" + Math.floor(Math.random() * 10);
	
	//Math.floor(Math.random() * 10) + 1) 返回 1 与 10 之间的随机整数（均包含）
	document.getElementById("demo17").innerHTML = "1-10之间的随机整数是：" + Math.floor(Math.random() * 10 + 1 );
	
	//每当您点击按钮，getRndInteger(min, max) 就会返回 1 与 10（均包含）之间的随机数
	function getRndInteger(max, min){
		return Math.floor(Math.random() * (max - min + 1)) + min;
	}
	
	//输入您的年龄然后点击这个按钮
	function myfunction_9(){
		var age, voteable;
		age = document.getElementById("age").value;
		voteable = (age < 18) ? "好年轻" : "好成熟";
		document.getElementById("demo19").innerHTML = voteable;
	}
	
	function myfunction_10(){
		var age, voteable;
		age = Number(document.getElementById("age").value);
		if (isNaN(age)) {
			voteable = "输入值不是数字";
		} else {
			voteable = (age < 18) ? "好年轻" : "够成熟";
			}
		document.getElementById("demo20").innerHTML = voteable;
	}
</script>


</body>
</html>

2241431065

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
W3school学习 js-2

<html><body> <p id = "demo1"></p> <button onclick = "myfunction_1()">数组添加push方法->点击添加！</button> <p id = "demo2"></p> <button onclick = "myfunction_2()">数组添加length方法->点击添加！</button>.
复制链接

扫一扫