大合集几天没写全部写上

最新推荐文章于 2022-01-10 17:56:03 发布

chengxunai

最新推荐文章于 2022-01-10 17:56:03 发布

阅读量284

点赞数

本文链接：https://blog.csdn.net/chengxunai/article/details/100893483

版权

array-string

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>array和string</title>
		<script>
//			//数组的声明
//			var arr=[1,2,3,4,5,6,7];
//			//数组的访问
//			console.log(arr[0]);//访问第一个对象
//			//数组的方法
//			arr.push(3);//push在数组末尾添加n项 并返回数组的长度 这是内置的方法直接调用就可以了
//			console.log(arr);
//			var newArr=arr.push(3,5);
//			console.log(newArr);//返回了长度
//			console.log(arr.length);//返回了长度 都是返回长度这个length耗性能
		//pop：删除末尾的元素，并返回删除的元素
//		var ele=arr.pop();//这句话可以看返回值
//		console.log(ele,arr);
//		arr.shift arr.unshift
//		splice:
//		var ele=arr.splice(1,3,90,99);//从第2个数开始删 删除两个数字 还剩1，4，5，6，7 并返回被删除的元素2，3
		//splice(1,0,90,100)从第2个数开始删删0个 在那个位置后插入90,100这些元素
//		console.log(arr,ele);
//		arr.indexOf():返回该元素的下标索引,如果不存在返回-1
		//数组的去重
//		var arr=[1,2,2,3,3,3,5,4,5,6,9,8,8];
//		for(var i=0;i<arr.length-1;i++){//数组去重方法一
//			
//		for (var j=i+1;j<arr.length;j++) {
//			if (arr[i]===arr[j]) {
//				arr.splice(j,1);
//				j--;
//			}
//		}}
//		console.log(arr);


//		var newArr=[];//数组去重方法二
//		for(var i=0;i<arr.length-1;i++){
//			if(newArr.indexOf(arr[i])==-1){
//				newArr.push(arr[i]);
//			}
//		}
//		console.log(newArr);


		//数组的排序
		//冒泡排序
		var arr=[1,2,3,2,9,4,6,3,90,67,5];
//		for (var i=0;i<arr.length;i++) {
//			for (var j=i+1;j<arr.length;j++) {
//				if(arr[i]>arr[j]){
//					var temp=arr[i];
//					arr[i]=arr[j];
//					arr[j]=temp;
//				}
//			}
//		}
//		console.log(arr);

		for (var i=0;i<arr.length;i++){
			for (var j=0;j<arr.length-i;j++){
				if(arr[j]>arr[j+1]){
					var temp=arr[j];
					arr[j]=arr[j+1];
					arr[j+1]=temp;
				}
			}
		}
		console.log(arr);
		</script>
	</head>
	<body>
	</body>
</html>

BOM

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>BOM</title>
		<script>
			//window对象是最根上的对象
			//console.log(window);
			//window对象下的对象方法
			//alert();
			//var a=100;//声明的变量是加到window对象上的属性
			//console.log(window.a);
			//confirm('你确定要放弃H5吗?');
			//console.log(flag);
			window.onload=function(){//把括号内的内容放到代码最后面
			var btn=document.getElementById('btn');
			var stop=document.getElementById('stop');
			var id;
			btn.onclick=function(){
				//var flag=confirm('你确定要放弃H5吗?');
				//console.log(flag);
				//打开指定网址的窗口
				//var win=open('https://www.baidu.com/?tn=98010089_dg&ch=8'); //里面放网址的话会跳到新开一个窗口内容是网址 如果里面不写网址就会弹出一个新窗口
				//setTimeout(function(){
				//	win.close();
				//	},3000)
				var i=16;
				//周期执行
				id=setInterval(function(){
					//console.log(i++);
					//btn.style.fontSize=i++ +'px';
					btn.style.marginLeft=i++ + 'px';
				},50);
				}
			
			stop.onclick=function(){
				//清除定时器
				clearInterval(id);
			}
			}
			
		</script>
	</head>
	<body>
		<button id="btn">开始</button>
		<button id="stop">停止</button>
	</body>
</html>

data

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>data</title>
	</head>
	<body>
		<div id="box"></div>
		<script>
			//构造函数
			function Person(name,age){
				this.name=name;
				this.age=age;
			}
			var obj=new Person('lili',20);
			console.log(obj);
			//Object Array String
			//var d=new Date();
			//console.log(d.toLocaleDateString());
			var box=document.getElementById('box');
			var d1=new Date(2017-9-19);
			d1.setHours(14);
			setInterval(function(){
			//var mon=d.getMonth()+1;
			//var day=d.getDay();
			//var h=d.getHours();
			//var m=d.getMinutes();
			//var s=d.getSeconds();
			//box.innerHTML=mon+'月：'+day+'星期:'+h+'时：'+m+'分：'+s+'秒';
			//box.innerHTML=d.toLocaleString();
			var d2=new Date();
			console.log(d2.getTime());
//			var day=parseInt((d2-d1)/1000/60/60/24);
//			var house=((d2-d1)/1000/60/60%24);
//			console.log(day+'-'+house);
			console.log(d2-d2);
			},1000)
		</script>
	</body>
</html>

DOM

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DOM</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			li{
				list-style: none;
			}
			#nav{
				width: 1000px;
				height: 50px;
				border: 1px solid #ccc;
				margin: 0 auto;
			}
			#nav li{
				width: 80px;
				height: 50px;
				text-align: center;
				line-height: 50px;
				float: left;
				
			}
			.box{
				width: 1000px;
				height: 500px;
				margin: 0 auto;
				border: 1px solid red;
			}
			.box div{
				display: none;
			}
		</style>
	</head>
		<body>
			<!--<ul id='nav'>
			<li>
				<a href="">1</a>
			</li>
			<li>
				<a href="">2</a>
			</li>
			<li>
				<a href="">3</a>
			</li>
		</ul>-->
		<ul id="nav">
			<li>我的关注</li>
			<li>推荐</li>
			<li>导航</li>
		</ul>
		<div class="box">
			<div>我的关注</div>
			<div>推荐</div>
			<div>导航</div>
		</div>
		<!--<button id="btn">练习事件绑定</button>-->
		
		
		
			<script>
				//获取元素
			var lis=document.getElementById('nav').children;
				var divs=document.getElementsByClassName('box')[0].children
				console.log(lis);//里面是节点数组 要用lis[0]才能访问第一个节点，这句代码可以看到lis里的东西 方便后面调用时的理解
				for(var i=0;i<lis.length;i++){
					//给节点对象添加一个属性，赋值为下标
					lis[i].index=i;
					//给lis[i]加属性，分别给每一个li绑定点击事件
					lis[i].onclick=function(){
//					console.log(this.innerHTML)
//					this.innerHTML='nav'+this.index;//先是数字都是加法遇到字符串以后再往后都是字符串了
						for(var i=0;i<lis.length;i++){
							//隐藏三个div
							divs[i].style.display='none';
						}
						
						//对应的div显示
						divs[this.index].style.display='block';	
						
					}

				}
				

//			DOM(document object model：文档对象模型)
//			DOM树
//			节点类型:文本节点(换行或者里面写的文字) 元素节点(标签 ul这类) 属性节点

//			获取元素
//			document.getElementById();获取一个id
//			document是一个对象里面有很多他的方法get获取元素
//			document.getElementsByClassName();获取类
//			document.getElementsByTagName();获取标签
//		
//		var nav=document.getElementById('nav');
//		console.log(nav);
//		var lis=document.getElementsByTagName('li');
//		console.log(lis[0]);
		//通过节点关系获取 第一个会是换行 换行也会被算在内
//		//console.log(nav.childNodes);不怎么用
//		console.log(nav.children);//常用
//		console.log(nav.parentNode);//常用
//		console.log(nav.firstElementChild);//常用
//		console.log(nav.firstElementChild.nextElementSibling);//第一个元素节点，nextElementSibling这个元素的下一个节点			


//事件类型：onclick onmouseover onmouseout onmousemove onmouseup onmousedown
//绑定事件
//三要素：绑定的元素、事件的类型、事件处理函数
//			var obj={
//				color:{
//					name:[]
//				}
//			}
//			var btn=document.getElementById('btn');//先获取这个标签按钮
//			btn.onclick=function(){//给btn添加一个属性/方法 给属性附上一个function值
//				console.log('onclick');
//			}
//			btn.onmouseover=function(){
//				this.style.background='red';
//			}
//			btn.onmouseout=function(){
//				this.style.background='#fff';
//			}
//			btn.onmousemove=function(){
//				console.log('onmousemove');
//			}
//			nav.onmouseover=function(){
//				this.style.background='red';
//			}
//			nav.onmouseout=function(){
//				this.style.background='#fff';
//			}
//			
//			


		</script>
		
	</body>
</html>

DOM2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text"id="msg" />
		<ul id="list">
			<li>111 <button>删除</button></li>
			<li>222</li>
			<li>333</li>
		</ul>
		<script>
			//1.先获取要操作的标签
			var inp=document.getElementById('msg');
			var list=document.getElementById('list');
			//2.给input绑定键盘事件
			//键盘事件：onkeydown onkeyup
			inp.onkeydown=function(e){//添加方法二
				//判断是否是回车键
				if (e.keyCode===13) {
					//创建一个li标签
					var li=document.createElement('li');
					var btn=document.createElement('button');
					//给li里赋值成input框输入的内容
					li.innerHTML=inp.value;//+ <button></button>;
					btn.innerHTML='删除';
					//添加到指定的元素里
					list.appendChild(li);
					li.appendChild(btn);
//					li.onclick=function(){
//						list.removeChild(this);
//					}
					inp.value='';
//事件流：事件冒泡  事件捕获







					
			//先获取li
			var lis=list.children;
			//给li绑定点击事件
			for(var i=0;i<lis.length;i++){
				lis[i].onclick=function(e){
//					list.removeChild(this);//this就表示你所点击的那一个 不能写li li不能指明是哪个
			//阻止事件冒泡
			e.stopPropagation();
				console.log('li点击了');
				}
			}
			//事件委托
			list.onclick=function(e){
//				console.log('ul点击了');
				if(e.target.nodeName=='BUTTON'){
					list.removeChild(e.target.parentNode);
				}
				
			}
					
					
//					list.innerHTML+='<li>'+inp.value+'</li>';//添加方法一
					
				}
			}
		</script>
	</body>
</html>

function

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>function</title>
		<script>
//		函数声明
//		document.write('<h1 style="color:red";>hello world</h1>');在html输出的标题大小h1的hello world
//		声明变量用var声明函数用function
//函数名以英文字母或者$开头,不能是关键字
//下面是两种都是定义函数的方法 第一种函数名是fn 第二钟是把函数赋到f中 
//		function fn(){
//			console.log(100);
//		}
//		var f=function(){
//			console.log('这是f函数');
//		}
函数的调用（函数＋小括号） 函数定义后并不会执行 要调用才能用
//		fn();//这就是把函数调用了，不用重复再打函数代码
//		f();
		function printTable(row,col){//函数的声明
//			var row=3,col=5;把函数的变量写在上面的小括号内这样函数定义就不是死的了，在调用的时候把数传入函数即可
		document.write('<table width="100" border="2">')
		for(var i=0;i<row;i++){
			document.write('<tr>');
			for(var j=0;j<col;j++){
				document.write('<td>'+j+'</td>');
			}
			document.write('</tr>')
		}
		}
		printTable(3,5);
		printTable(9,5);//函数调用，调用时候把9行5列传给函数
		//函数的参数（函数声明时是形参，函数调用时是实参）形参是有个名里面不知道是啥，实参是实际的数值，把实参传给形参
		//函数的返回值（返回一个值或者直接跳出整个函数）
		//函数return后没有值，函数也有返回值，是undefined
		//函数如果没有return语句，也有返回值，是undefined
//		function sum(a,b){
//			return a+b
//			
//		}
//		console.log(sum(1,5));//控制台出来的是6
//		alert(sum(10,20));//弹窗弹出30
//		function sum(a,b){
//			if(a>b){
//				return"请输入合法数值";
//			}
//			var all=0;
//			for (var i=a;i<=b;i++) {
//				all+=i;
//			}
//			
//			return all;//只要遇到return就会跳出这个函数 后面的这个100就没有出来
//			console.log(100);
//		}
//		console.log(sum(1,4));
//		function evenSum(a,b){//
//			var all=0;
//			for (var i=a;i<=b;i++) {
//				if(i%2==0){
//				all+=i;
//				}
//			}
//			return all;//只要遇到return就会跳出这个函数 后面的这个100就没有出来
//			console.log(100);
//		}
//		console.log(evenSum(9,10));
//求质数合
//		function isPrime(a){
//			for( var i=2;i<=a/2;i++){
//				if (a%i==0) {
//					return false;
//				}
//			}
//			return true;
//		}
//		function primeSum(a,b){
//			var sum=0;
//			for(var i=a;i<=b;i++){
//				isPrime(i)&&(sum+=i);//如果前面是真就会执行sum+=i
//			}
//			return sum;
//		}
//		console.log(primeSum(2,9))
		var num=100;
		function a(){
			num=num+100;
			var sum=100;
			console.log(sum);
		}
		a();
		console.log(num);
//		console.log(sum);局部变量在外面不可以访问
		</script>
	</head>
	<body>
	</body>
</html>

lunbo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播图</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			#box{
				width: 800px;
				height: 105px;
				border: 3px solid red;
				margin: 0 auto;
				overflow:hidden;
				position: relative;
			}
			#slide{
				width: 2300px;
				position: relative;
			}
			#slide img{
				width: 200px;
				float: left;
				margin-right: 20px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="slide">
				<img src="img/s1.jpg"/>
				<img src="img/s2.jpg"/>
				<img src="img/s3.jpg"/>
				<img src="img/s4.jpg"/>
				<img src="img/s1.jpg"/>
				<img src="img/s2.jpg"/>
				<img src="img/s1.jpg"/>
				<img src="img/s2.jpg"/>
				<img src="img/s3.jpg"/>
				<img src="img/s4.jpg"/>
				<img src="img/s1.jpg"/>
				<img src="img/s2.jpg"/>
				
			</div>
		</div>
		<script>
			var slide=document.getElementById('slide');
			var box=document.getElementById('box');
			var i=0;
			var id=setInterval(function(){
				if(i<=-1320){
					i=0;
				}else{
					i--;
				}
				slide.style.left=i +'px';
				},20);
			box.onmouseover=function(){
				clearInterval(id);
			}
			box.onmouseout=function(){
				id=setInterval(function(){
					slide.style.left=i-- +'px';
						},50);
			}
		</script>
	</body>
</html>

lunbo1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            width: 800px;
            height: 120px;
            border: 3px solid red;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }
        #slide{
            width: 2320px;
            position: absolute;
        }
        #slide img{
            width: 200px;
            float: left;
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="slide">
            <img src="http://www.gxun.edu.cn/images/xslj.jpg" alt="">
            <img src="http://www.gxun.edu.cn/images/17/05/15/1xut7t9vm8/gx_36.png" alt="">
            <img src="http://www.gxun.edu.cn/images/17/05/15/1xut7t9vm8/gx_34.png" alt="">
            <img src="http://www.gxun.edu.cn/images/17/05/15/1xut7t9vm8/gx_32.png" alt="">
            <img src="http://www.gxun.edu.cn/images/timg123.jpg" alt="">
            <img src="http://www.gxun.edu.cn/images/ethniclaw.jpg" alt="">
            <img src="http://www.gxun.edu.cn/images/xslj.jpg" alt="">
            <img src="http://www.gxun.edu.cn/images/17/05/15/1xut7t9vm8/gx_36.png" alt="">
            <img src="http://www.gxun.edu.cn/images/17/05/15/1xut7t9vm8/gx_34.png" alt="">
            <img src="http://www.gxun.edu.cn/images/17/05/15/1xut7t9vm8/gx_32.png" alt="">
        </div>
    </div>
    <script>
        var slide = document.getElementById('slide');
        var box = document.getElementById('box');
        var i = 0;
        function move(){
            if(i<=-1320){
                i=0;
            }else{
                i--;
            }
            slide.style.left = i + 'px';
//			i=i<=-1320?0:i-1;
        }
        var id = setInterval(move,10);
        box.onmouseover = function(){
            clearInterval(id);
        }
        box.onmouseout = function(){
            id = setInterval(move,10);
        }
    </script>
</body>
</html>

object

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>object</title>
		<script>
			//对象的声明
			//this是调用方法的对象 要放在函数中 然后this指代这个函数的对象
//			var name='许嵩';
//			var age=18;
//			var height=180;
//			var weight=80;
//			function say(){
//				console.log('我很帅');
//			}
//			var obj=new Object();//调用了这个函数 返回来的是一个对象 创建对象的一种形式
//			//var obj={};

		var obj={
			name:'许',
			age:18,
			height:180,
			say:function(){
				console.log('我老师很帅');
			}
		};
		//对象的访问
		console.log(obj.name);
		console.log(obj['name'])//属性名要加引号，不加的话是变量
		obj.say();
		//添加属性或方法
		obj.weight=80;
		console.log(obj);
		//修改
		obj.name='许嵩'
		console.log(obj);
		//删除属性
		delete obj.age;
		//遍历(for in 循环)
		for (var item in obj) {//不分先后顺序 只能用for in循环   
			if(typeof obj[item]!=="function"){//不想要函数出现 先判断是否为函数 不是的话就打印出来
				document.write(obj[item]+'<br>');//访问变量的时候要用中括号 用.的话是在找item属性 但是前面并没有写这个属性
			}		
		}
		</script>
	</head>
	<body>
	</body>
</html>

user0912

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;
        }
        .header{
            width: 1200px;
            height: 50px;
            margin: 0 auto;
            border: 1px solid #ccc;
        }
        .header button{
            float: left;
            width: 100px;
            height: 50px;
        }
        #nav{
            width: 1000px;
            height: 50px;
            float: left;
        }
        #nav li{
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            float: left;
            cursor: pointer;
        }
        .box{
            width: 1200px;
            height: 500px;
            margin: 0 auto;
            border: 1px solid red;
        }
    </style>
    <script src="js/data1.js"></script>
</head>
<body>
<div class="header">
    <button id="prev"><</button>
    <ul id="nav">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <button id="next">></button>
</div>
    
    <div id="box" class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <script src="js/data1.js"></script>
    <script>
    
    	//1.获取相关元素
     var prev=get('prev'),
     lis=get('nav').children,
     next=get('next'),
     ps=get('box').children,
     page=0;
       //2.初始在li中渲染前10个名字
       for (var i=0;i<10;i++) {
       	lis[i].index=i;
       	lis[i].innerHTML=data[i].name;
       	//3.给每个li
       	lis[i].onclick=function(){
       		ps[0].innerHTML=data[page+this.index].name
       		ps[1].innerHTML=data[page+this.index].age
       		ps[2].innerHTML=data[page+this.index].xuehao
       	}
       }
       //4.给左右button绑定点击事件
       //右箭头事件
       next.onclick=function(){
//     	ps[0].innerHTML=''
// 		ps[1].innerHTML=''
// 		ps[2].innerHTML=''	
//		页数+10
		page+=10;
		if(page>data.length){
			page-=10;
			return;
		}

		if(page===parseInt(data.length/10)*10){
			for(var i=0;i<data.length%10;i++){
				lis[i].innerHTML=data[i+page].name
			}
			for(var i=0;i<data.length%10;i++){
				lis[i].innerHTML='';
			}
		}else{
//		十个li的内容变成当前页的
		for(var i=0;i<10;i++){
       		lis[i].innerHTML=data[i+page].name;
       	}
        ps[0].innerHTML=data[page].name
   		ps[1].innerHTML=data[page].age
   		ps[2].innerHTML=data[page].xuehao
       }
		}
       //左箭头事件
       prev.onclick=function(){
       	ps[0].innerHTML=data[page].name
   		ps[1].innerHTML=data[page].age
   		ps[2].innerHTML=data[page].xuehao
       	if(page===0){
       		return;
       	}
       	page-=10;
       	for(var i=0;i<10;i++){
       		lis[i].innerHTML=data[i+page].name;
       	}
       }
        
    </script>
</body>
</html>

userinfor

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DOM</title>
		<script src="js/data.js"></script>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			li{
				list-style: none;
			}
			.header{
				width: 1200px;
				height: 50px;
				margin: 0 auto;
				border: 1px solid #ccc;
			}
			#nav{
				width: 1000px;
				height: 50px;
				/*border: 1px solid #ccc;*/
				margin: 0 auto;
				float: left;
			}
			#nav li{
				width: 100px;
				height: 100px;
				text-align: center;
				line-height: 50px;
				float: left;
				
			}
			.header button{
				float: left;
				width: 100px;
				height: 50px;
			}
			.box{
				width: 1000px;
				height: 500px;
				margin: 0 auto;
				border: 1px solid red;
			}
			.box div{
				/*display: none;*/
			}
			img{
				height: 100px;
			}
		</style>
	</head>
		<body>
			<div class="header">
				<button id="prev"><</button>
					<ul id="nav">
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				<button id="prev">></button>
			</div>
		<div class="box">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<script>
//			function get(id){
//				return document.getElementById(id);
//			}
			
			var arr=[
			{	
				name:'珑妹妹',
				age:20,
				weight:60,
				height:170
			},
			{	
				name:'梁妹妹',
				age:30,
				weight:30,
				height:130
			},
			{	
				name:'美女',
				age:40,
				weight:40,
				height:140
			},
			{	
				name:'美妞',
				age:50,
				weight:50,
				height:150
			},
			{	
				name:'好看',
				age:60,
				weight:60,
				height:160
			},
			{	
				name:'美妞',
				age:50,
				weight:50,
				height:150
			},
			{	
				name:'美妞',
				age:50,
				weight:50,
				height:150
			},
			{	
				name:'美妞',
				age:50,
				weight:50,
				height:150
			},
			{	
				name:'美妞',
				age:50,
				weight:50,
				height:150
			}
			];
			var lis=document.getElementById('nav').children;
			var page = 0;
			var box=document.getElementsByClassName('box')[0];
			
			for(var i=1;i<9;i++){
//				arr.push('张'+i);
				arr[i].name=acc[i-1];
				lis[i].innerHTML=arr[i].name;
				lis[i].index=i;
				//点击每一个li
				
				lis[i].onclick=function(){
					//使box里的内容是对应li里的名字
//					console.log(box.children[0])
					box.children[0].innerHTML=arr[page+this.index].name;
					box.children[1].innerHTML=arr[page+this.index].age;
					box.children[2].innerHTML=arr[page+this.index].weight;
					box.children[3].innerHTML=arr[page+this.index].height;
				}
			}
			for(var j=0;j<13;j++){
				lis[j].index=j;
				button.onclick=function(){
				page+=8;
				}
			}	
//			//获取元素
//			var lis=document.getElementById('nav').children;
//			var divs=document.getElementsByClassName('box')[0].children
//			console.log(lis);//里面是节点数组 要用lis[0]才能访问第一个节点，这句代码可以看到lis里的东西 方便后面调用时的理解
//				for(var i=0;i<lis.length;i++){
//				//给节点对象添加一个属性，赋值为下标
//				lis[i].index=i;
//				//给lis[i]加属性，分别给每一个li绑定点击事件
//				lis[i].onclick=function(){
				console.log(this.innerHTML)
				this.innerHTML='nav'+this.index;//先是数字都是加法遇到字符串以后再往后都是字符串了
//					for(var i=0;i<lis.length;i++){
//					//隐藏三个div
//					divs[i].style.display='none';
//					}	
//					//对应的div显示
//					divs[this.index].style.display='block';		
//					}
//				}	
		</script>
		<!--<script src=""></script>//引入外部js文件 里面不可以写代码 因为会识别不出来-->
	</body>
</html>

chengxunai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
大合集几天没写全部写上

array-string<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>array和string</title> <script>// //数组的声明// var arr=[1,2,3,4,5,6,7];// ...
复制链接

扫一扫