28-29周学习记录

最新推荐文章于 2024-09-05 16:46:12 发布

ETD陆地巡洋舰

最新推荐文章于 2024-09-05 16:46:12 发布

阅读量228

点赞数

文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/m0_55430536/article/details/125921913

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>数组去重练习</title>
		<script type="text/javascript">
			//创建一个数组
			var arr=[1,2,4,3,2,8,9,7,3,5,3,6,4,6];
			
			
			//去除重复的数字
			//获取数组中没一个元素
			for (var i=0;i<arr.length;i++) {
				
				//获取当前元素后的的所有元素
				for (var j=i+1;j<arr.length;j++) {
					
					//判断两个数是否相等
					if (arr[i]==arr[j]) {
						arr.splice(j,1);
						//当删除这个元素后，后边的元素会自动补位
						j--;
					}
				}
			}
			var arr1=["孙悟空","猪八戒","白骨精","蜘蛛精","沙和尚"];
			
			//concat()	连接两个或多个数组，并返回已连接数组的副本。不会改变原数组
			var result1=arr.concat(arr1);
			console.log(result1);
			
			//给原数组进行排序，比较的是unicode编码
			arr.sort();
			//反转数组，前去后，后去前
			arr.reverse();
			//将数组转换为字符串，不改变原数组
			var result=arr.join("#");
			console.log(arr);
			console.log(result);
			
		</script>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function person (name,age) {
				this.name=name,
				this.age=age
				
			}
			//修改原型的toString();使相同的
			person.prototype.toString=function  () {
				return "person[name="+this.name+",age="+this.age+"]"
				
		};
			//创建实例
			var per1=new person("猪八戒",89);
			var per2=new person("孙悟空",79);
			var per3=new person("白骨精",19);
			var per4=new person("蜘蛛精",29);
			var per5=new person("沙和尚",39);
			
			
			//创建一个数组，将person类放入一个数组
			var perArr=[per1,per2,per3,per4,per5];
			
			
			function getAdult(arr){
				// 创建一个新的数组
				var newArr=[];
				
				//遍历arr
				for (var i=0;i<arr.length;i++) {
					var p=arr[i];
					
					//判断Person的对象十分大于29
					if (p.age>=29) {
						newArr.push(p);
						
					}
					
				}
				return newArr;
				
			}
				var	result=getAdult(perArr);
				console.log(result);
				
			
		
			
			
			
		
		</script>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>date对象打印时间</title>
		<script type="text/javascript">
		//创建一个date对象
			var d=new Date();
			
			//console.log(d)
		//创建一个指定的日期date
		var d2=new Date("09/20/2019 19:36:15");
		//console.log(d2);
		var result= d2.getDate();
		var result1= d2.getDay();
		//时间戳；指的是格林威治时间1970年1月一日，零时零分零秒，到现在的日期所花费的毫秒数
		var time=d2.getTime();
		//当前时间这一个时间戳
		time=Date.now();
		var start=Date.now();
		for (var i=0;i<1000000;i++) {
			
		}
		var end=Date.now();
		//利用时间戳来测试一个程序所所需要的时间
		console.log(end-start);
		console.log(time/1000/60/60/24/365);
		console.log(result1);
		</script>
	</head>
	<body>
	</body>
</html>

正则表达式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>电话号码正则表达式</title>
		<script type="text/javascript">
			/*
			 * 手机号的规则
			 */
			var phoneStr="13579269416";
			var phoneReg=/^1[3-9][0-9]{9}/;
			console.log(phoneReg.test(phoneStr));
		</script>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>电话邮件正则表达式</title>
		<script type="text/javascript">
			var emilReg=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
			var emil="2074529898@qq.com";
			console.log(emilReg.test(emil));
			/*
			 * 字符描述：
				^ ：匹配输入的开始位置。
				\：将下一个字符标记为特殊字符或字面值。
				* ：匹配前一个字符零次或几次。
				+ ：匹配前一个字符一次或多次。
				(pattern) 与模式匹配并记住匹配。
				x|y：匹配 x 或 y。
				[a-z] ：表示某个范围内的字符。与指定区间内的任何字符匹配。
				\w ：与任何单词字符匹配，包括下划线。
				
				{n,m} 最少匹配 n 次且最多匹配 m 次
				$ ：匹配输入的结尾。
			 */
		</script>
	</head>
	<body>
	</body>
</html>

DOM

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>语法</title>
		<script type="text/javascript">
		/*
		 * [abc]	查找方括号之间的任何字符。
			[^abc]	查找任何不在方括号之间的字符。
			[0-9]	查找任何从 0 至 9 的数字。
			[a-z]	查找任何从小写 a 到小写 z 的字符。
			[A-Z]	查找任何从大写 A 到大写 Z 的字符。
			[A-z]	查找任何从大写 A 到小写 z 的字符。
			[adgk]	查找给定集合内的任何字符。
			[^adgk]	查找给定集合外的任何字符。
			(red|blue|green)	查找任何指定的选项。
			
		 */
		var str="Is this all there is?";
		var patt1=/[a-h]/g;
		document.write(str.match(patt1));
		</script>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片点击事件</title>
		<script>
			window.onload=function(){
				//点击按钮切换图片


				//获取两个按钮
				var prev=document.getElementById("prev");
				var next=document.getElementById("next");
				//获取img标签
				var img=document.getElementsByTagName("img")[0];
				//创建一个数组，用来保存图片
				var imgArr=["img/1.jpeg","img/2.jpeg","img/3.jpeg","img/4.jpeg","img/5.jpeg"];
				
				var index=0;
				
				//
				var info=document.getElementById("info");
				info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张。";
				
				
				
				prev.onclick=function (){
					//img.src="img/1.jpeg";
					index--;
					if (index<0) {
						index=0;
					}
					
					img.src=imgArr[index];
					info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张。";
				};
				next.onclick =function (){
					//img.src="img/2.jpeg";
					index++;
						if (index>4) {
						index=4
						
					}
					img.src=imgArr[index];
				info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张。";
				};
				
			};
			
		</script>
	</head>
			<style type="text/css">
				*{
					margin: 0;
					padding: 0;
				}
				#di{
					border: 10px yellowgreen solid;
					background: yellowgreen;
					width: 500px;
					/*设置文本居中*/
					text-align: center;
					margin: 50px	 auto;
					
				}
				
				
			</style>
	<body>
		<div id="di">
			<p id="info"></p>
			<img src="img/1.jpeg" alt="截图"/>
			<button id="prev">上一张</button>
			<button id="next">下一张</button>
		</div>
	</body>
</html>