普普通通入门js案例(原生)

数组中数据的遍历

	var arr = [34, 3, 4, 3];
	for(i = 0; i < arr.length; i++){
		console.log(arr[i]);
	}

求数组中的最大值

	var arr = [34, 3, 4, 3];
	max = arr[0];
	for(i = 1; i < arr.length; i++){
		if(max < arr[i]){
			max = arr[i];
		}
	}

求数组中的平均值

	var arr = [34, 3, 4, 3];
	for(i = 0; i < arr.length; i++){
		count += arr[i];
	}
	avarage = count / arr.length;
	console.log(avarage);

数组中字符类型的遍历连接

	var arr = ['red', 'green' , 'blue']
	var str = '';
	var sep = '*';
	for(var i = 0; i = arr.length; i++){
		str = arr[i] + sep;
	}
	console.log(str);

将数组满足条件的值取出

	方法1
	var arr = [34, 3, 4, 3];
	var newArr = [];
	j = 0;
	for(i = 0; i < arr.length; i ++){
		if(arr[i] > 界定值){
			newArr[j] = arr[i];
			j++;
		}
	}
	方法2
	var arr = [34, 3, 4, 3];
	var newArr = [];
	for(i = 0; i < arr.length; i ++){
		if(arr[i] > 界定值){
			newArr[newArr.length] = arr[i];
			//newArr = push(arr[i]);	此处可用push()内置对象来进行后方插入函数
		}	//空数组长度为0
	}

删除指定数组元素

	var arr = [34, 3, 4, 3];
	var newArr = [];
	for (i = 0; i < arr.lenght; i++){
		if (arr[i] != 0){
			new[newArr.length] = arr[i];
		}
	}
	console.log(newArr);

冒泡 排序sort

	var arr = [34, 3, 4, 3];
	for (i = 0; i < arr.length - 1; i++){
		for (j = 0; j <= arr.length - i - 1; j++){
			if (arr[j] < arr[j + 1]){
				var temp = arr[j];
				arr[j] = arr[j + 1];
				arr[j + 1] = temp;
			}
		}
	}

传入数组并求最大值

   function getMax(arr){
   	var max = arr[0];
   	for(i = 1; i < arr.length; i++){
   		if(max < arr[i]){
   			max = arr[i];
   		}
   	return max;
   	}
   }
   	一般函数不直接输出,而是给调用者一个返回值,私聊
   var arr = [34, 3, 4, 3];
   var re = getArrMax(arr);
   	使用变量接受返回结果,直接输出变量更简单
   console.log(re);

利用arguments求任意个数的最大值

	function getMax(){	//你随便传参,内部arguments整合实参为一个伪数组
		var max = arguments[0];
		for(i = 0; i < arguments.length -1; i++){
			if(max < arguments[i]){
				max = arguments[i];
			}
		return max;
		}
	}
	var re = getMax(1,3,4,32,234,5,23);
	console.log(re);

利用函数翻转数组

	function reverse(arr){
		var newArr = [];
		for(var i = 0; i < arr.length; i++){
			newArr = arr[arr.length-i];
		return newArr;
	}
	var arr1 = [34, 3, 4, 3];
	var re = reverse(arr1);
	console.log(re);

instanceof

instanceof 可以检测是否为数组,布尔值true,false
	console.log(arr instanceof Array);//输出为true
	Array.isArray(数组)//h5新增ie9以上支持

利用indexOf()查询数组元素,实现数组去重

	function quchong(arr){
		for(i = 0; i < arr.length; i++){
			var newArr = [];
			if (indexOf(arr[i]) === -1){//indexOf()返回的是索引号,没有负数,可以用-1判断
				newArr.push(arr[i]); //数组名.push()在数组后方插入元素,对象调用
			}
		}
		return newArr;
	}
	var arr = [34, 3, 4, 3];
	var re = quchong(arr);

利用indexOf()查询字符串目标字母的个数,并输出每个字母下标

	function countStr(str,zimu){ //统计某个字母个数
		var num = 0;
		index = str.indexOf(zimu);
		while(index !== -1){
			num++;
			console.log('字母的下标为' + index);
			index = str.indexOf(zimu,index + 1);
		}
		console.log('字母的个数为:' + num);
	}
	var str = 'fjaafsdfsdgsdgdsadf';
	var re = countStr(str,'d');

根据位置字符
字符串名.charAt(index);//根据索引位置返回字符
(未完成下面的函数)

	function indexSetReturn(str){
		for(i = 0; i < str.length; i++) {
			console.log(charAt(str[i]));
	}
	var str = 'sdfhbhgdfgsjkdfshkgdfdks';
	var re = indexSetReturn(str);

统计字符串中出现次数最多的字符,并统计次数
- 利用charAt()遍历字符串,然后将遍历的字符存到对象中,
- 如果对象没有该属性则为1,有该属性则该属性+1,最后遍历对象得到最大值和该字符;
- 对象['属性名'],查找对象是否存在此属性,返回布尔值,
- 对象['属性名'] = 参数,创建一个此属性并为其赋值

	function countMaxChar(str){
		var countMax = new Object()
		//var countMax = {};这是两种方法创建空对象
		for (i = 0; i < str.length; i++) {
			var chars = str.charAt(i); //每个循环取到的字符
			if (countMax[chars]) {
				countMax[chars]++;
			} else {
				countMax[chars] = 1;
			}	
		}
	}

替换字符串某个字符

	function replaceChars(str,reChar,thisChar){
		while(str.indexOf(reChar) !== -1){
			str.replace('thischar','reChar');
		}
	}
	str = 'sahdafhsakdhflgsdaf';
	re = replaceChars(str,'o','f');
	console.log(re);

翻转传入的字符串

function reverseString(str) {
    let newArr = '';
    str = str.split('');
    for (var i = str.length - 1; i >= 0; i--) {
        newArr += str[i];
    }
    str = newArr
   return str;
 }
 reverseString("hello"); 

判断平闰年

function isRunYear(year){
		var flag = false;
		if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
			flag = true;
		}
		return flag;
	}
	var re = isRunYear(2000);
	console.log(re);

函数相互调用,输入年份判断2月份天数

	//判断平闰年
	function isRunYear(year){	//这里是形参
		var flag = false;
		if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
			flag = true;
		}
		return flag;
	}
	//根据平闰年,输出月份
	function backDay(){ //没给值,默认调用内部程序,程序入口
		var year = prompt('请输入年份:');
		if (isRunYear(year)){	//这里是实参
			alert('当前年份是闰年,二月份有29天')
		} else {
			alert('当前年份是平年,有28天');
		}
	}

预解析案例演示

	var num = 10;	//var提升,函数定义提升,赋值滞后,调用在num还要往后
	fun();
	function fun(){
		console.log(num);
		var num = 20;	//var在函数内提升,num滞后
	}
	//预解析为:
	var num
	function fun(){
		var num;
		console.log(num);
		num = 20;
	}
	num = 10;
	fun();//进入函数后,num也进行了定义但未赋值,undefined

经典例题

	f1();
	console.log(c);
	console.log(b);
	console.log(a);
	function f1(){
		var a = b = c = 9; //var a = 9, b = 9, c = 9;只有a前面有var
		console.log(a);
		console.log(b);
		console.log(c);
	}
	//预解析为:
	function f1(){
		var a;	//只声明一个a
		a = 9;	//不声明直接调用,则是全局变量
		b = 9;
		c = 9;
		console.log(a);	//局部打印9
		console.log(b);	//局部打印9
		console.log(c); //局部打印9
	}
	f1();
	console.log(c); //全局打印9
	console.log(b); //全局打印9
	console.log(a); //因为内部声明了,局部变量a无法在全局打印
					//报错,a is not defined

格式化日期年月日

	function getDate(){
		var date = new Data();
		var year = date.getFullYear();
		var month = date.getMonth() + 1;
		var dates = date.getDate();
		var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
		var day = date.getDay();
		return '今天是:' + year + '年' + month + '月' + date + '日' + arr[day];
	}
	var p = document.querySelector('p');
	p.innerText = getDate();

密码小眼睛点击看见看不见

	var eye = document.getElementById('eye');
	var pwd = document.getElementById('pwd');
	var flag = 0;
	eye.onclick = function() {
		if (flag == 0){
			pwd.type = 'text';
			eye.src = 'imges/open.png'
			flag = 1;
		} else {
			pwd.type = 'password '
			eye.src = 'imges/close.png'; 
			flag = 0;
		}  //这是点击后显示和隐藏的操作,通过flag来判断点过没有
		pwd.type = 'text';
	}

//使用className进行类名替换更改样式
	//如果进行简单的html的样式更改,可用style行内样式更改,权重比css高
	var div = document.querySelector('div');
	div.onclick = function (){
		//给div里的sytle属性赋值
		this.sytle.backgroundColor = 'purple';
		this.style.width = '230px';
		this.style.fonSize = '25px';
		this.style.marginTop = '100px';
		//点击完毕后变色,变宽
	}
/* 	//如果进行复杂的html的样式更爱,可用class进行css样式更改
	.change {
		background-color: purple;
		color:#fff;
		font-size: 25px;
		margin-top: 100px;
	}
*/	var div = document.querySelector('div');
	div.onclic = function (){
		this.className = 'change';
		//当点击完毕后将.change改变为当前类名,原先的类会被覆盖\
		//如果要保留原先的类,则在原先的类基础上再写新的类名
		this.className = 'first change';
	}

通过displa:none隐藏元素,display:block;显示元素实现点击叉号关闭二维码

/* 	
	<div>
		<img src="#" alt="">
		<i class="class-btn">x</i>
	</div> 
*/
//以下为script标签包裹的代码
	var btn = document.querySelector('close-btn');
	var box = document.querySelector('.box');
	btn.onclick = function (){
		this.style.display = 'none';
	}
	
//通过js实现有序精灵图的遍历插入
	//前提将盒子里的li标签通过css将图片插入
	var lis = document.querySelector('li');
	for (var i = 0; i < lis.length; i++){
		var index = i * 间隔;
		lis[i].style.backgroundPosition = '0 ' + index + 'px';
		//页面的需要显示的用引号括住,变量用+号连接
	}
	
//onfocus获得焦点,onblur失去焦点
//文本框光标焦点则内部提示文字消失,焦点移开,内部提示出现
	var text = document.querySelector('input');
	text.onfocus = function (){
		//console.log('获得了焦点');
		if (this.value === '默认文字'){
			this.value = '';
		}
		//获得焦点要把用户输入的内容变深
		this.sytle.color = '#333';
	}
	text.onblur = function (){
		console.log('失去了焦点');
		if (this.value === ''){
			this.value = '默认文字';
		}
		//用户输入后,清空文本框后,内部默认文字颜色复原
		this.style.color = '#999';
		
		
//失去焦点就提醒密码较短,在后方有红色叉号和错误提示信息
	/* CSS代码
	 div {
		 width: 600px;
		 margin: 100px auto;
	 }
	 .maessage {
		 diaplay: inline-block;
		 font-size: 12px;
		 color: #999;
		 background: url(images/mess.png) no-repeat left center;
		 padding-left: 20px;
	 }
	 .wrong { 
		 color:red;
		 background: url(images/wrong.png)
	 }
	 .right {
		 color:green;
		 background-image:url(images/right.png);
	 }
	 
	 <div class="register">
		<input type=:"password" class="ipt">
		<p class="message">请输入6~16位密码</p>
	 </div>
	 
	 */	
	//js代码
	var ipt = document.querySelector('.ipt');
	var message = document.querSelector('.message');
	ipt.onblur = function (){
		//根据表单里值的长度判断
		if(this.value.length < 6 || this.value.length >16){
			console.log('错误');
			message.className = 'message wrong';
			message.innerHTML = '你输入的位数不对,要求6~16位';
		} else {
			message.className = 'message right';
			message.innerHTML = '输入格式正确';
		}
		
	}