function

Posted on

封装好的一些有用函数

四则运算的函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function _equals(per_number , next_number, operation){
	switch (operation){
		case '+':
			per_number += next_number;
			break;
		case '-':
			per_number -= next_number;
			break;
		case '*':
			per_number *= next_number;
			break;
		case '/':
			if(next_number ==0 ){
				per_number = null;
			}else{
				per_number /= next_number;
			}
			break;
	}
	if(per_number == null){
		return NaN;
	}else{
		return per_number;
	}
}

查找字符的个数

1
2
3
4
5
6
7
8
9
10
11
function indexofFn(str,font){
	var i = 0 ;
	var sum = 0;
	while (str.indexOf(font,i) > -1) {
			//在找到的时候循环
			sum ++;//找到后+1
			i=str.indexOf(font,i) + 1;
			//在位置之后再开始查找
		}
		return sum;
}

最大值(arguments)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//方法1
function max(){
	var max = arguments[0];//记录第一个值，假装它是最大的
	for (var i=1; i<arguments.length;i++) {
		//记录了第一个，就从第二个开始比较
		if(max<arguments[i]){
		//判断它是否真的最大，一个一个去比较
			max = arguments[i];//比它大就替换
		}
	}
	return max;//比较结束后返回最大值
}

//方法2
function max(){
	for (var i=0; i<arguments.length;i++) {
		//从第一个开始
		if(arguments[i]>arguments[i+1]){
		//第一个和第二个比较
			arguments[i+1] = arguments[i];
			//第二个小于第一个，替换第二个，再与第三个比较
		}
	}
	return arguments[i-1];//比较结束后返回最大值
}
//调用
alert(max(5,8,6,9,1,3,7,2,4));

随机数

1
2
3
4
5
6
7
8
/*myrandom(min,max) min到max范围的随机数*/

function myrandom(min,max){
	var rnd = Math.round(Math.random()*(max-min)+min);
	return rnd;
}
//调用
alert(myrandom(1,2));

倒计时

1
2
3
4
5
6
7
8
9
10
11
12
13
function getTimeFn(year,month,day){
	setInterval(function(){
		var  oDate = new Date();
		//默认当前时间
		var d = new Date(year+"/"+month+"/"+day);
		var time = parseInt((d-oDate)/1000);
		var day = parseInt(time/86400);
		var h =  parseInt(time%86400/3600);
		var m = parseInt(time%3600/60);
		var s = parseInt(time%60);
		return [day,h,m,s];
	},1000);
}

数组排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function sort(arr){
	for (var i=0; i<arr.length;i++) {
		//遍历每一个
		for (var j=i+1; j<arr.length;j++) {
		//比较每一个
			if(arr[i]-arr[j]>0){
			//判断大小
				//调转位置
				var a = arr[i];
				arr[i] = arr[j];
				arr[j] = a;
			}
		}
	}
	return arr;//结束返回数组
	
}
var arr = [18,5,9,6,4,19,3,2,7,1,8,0];
document.write(sort(arr));

清除数组中的重复字符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
var arr=[5,2,1,1,1,1,3,5,6,6,6,6,2,8,3,5,9,9,9,9,9,9,9];
	// 0  arr[0]==arr[5] 如果是重复 删掉arr[5]
	//splice(5,1)
	
	function noRepeat(arr1) {
		for (var i = 0; i < arr1.length; i++) {
			//每个遍历一次
			for (var j = i+1; j < arr1.length; j++) {
			//与后面每个比较
				if (arr1[i]==arr1[j]) {
					arr1.splice(j,1);
					//相同清除
					j--;
					//清除后，位置变化，j就要返回上一个
				}
			}					
		}
		return arr1;//结束返回数组
	}
	var arr1 = noRepeat(arr);
	alert(arr1);

var arr=[5,2,1,1,1,1,3,5,6,6,6,6,2,8,3,5,9,9,9,9,9,9,9];

	function noRepeat(arr1) {
		var newArr = [];//定义存放数组中不相同的值
		newArr.push(arr1[0])//初始化
		for (var i = 1; i < arr1.length; i++) {
		//每个遍历一次
			for (var j = 0; j < newArr.length; j++) {
			//与后面每个比较
				if (newArr[j]==arr1[i]) {
				/*判断新数组的值是否与数组当前值相等，是就退出当前循环*/
					break;
				}
			}	
			/*判断新数组是否完全遍历，如果不是说明新数组的值与数组当前值相等，则不添加入新数组，否则反之*/
			if (j==newArr.length) {
				newArr.push(arr1[i]);
				// newArr[newArr.length] = arr[i]
			}			
		}
		return newArr;//结束返回数组
	}
	var arr1 = noRepeat(arr);
	alert(arr1);

倒数计时器

1
2
3
4
5
6
7
8
9
10
function timerFn(n){
	var timer = setInterval(function(){
		n-=0.02;//每20毫秒-0.02
		if(n <= 0){
			clearInterval(timer);
			n=0;//有偏差，强制为0
		}
		return n.toFixed(2);//取小数点后两位
	},20)//20毫秒每次，五次就获得一秒，减少偏差
}

随机打乱数组内容

1
2
3
4
function sortFn(arr){
	arr.sort(function(){return Math.random()-0.5});
	return arr;
}

图片移动切换动画函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function moveFn(){
		move_bol = true;
		//记录动画开始
		var start = parseInt(inner.style.left) || 0;
		//初始位置
		var change = -(inner.children[0].offsetWidth)*index-start;
		//移动的距离
		var t = 0;//第几步开始
		var endT = 30;//执行步数
		
		var timer = setInterval(function(){
			t++;//每30毫秒加一步
			if(t >= endT){
				clearInterval(timer);//endT步后清除计时器
				move_bol = false;//记录动画结束
			}
			//调用了贝塞尔曲线，详情请看图片切换案例
			var l = Tween.Bounce.easeOut(t, start, change, endT);//计算每30毫秒移动的距离
			inner.style.left = l+'px';//移动
		},30)
	}



function moveFn(){
			move_bol = true;//记录动画开始
			var start = parseInt(inner.style.left) || 0;//初始位置
			var change = -(inner.children[0].offsetWidth)*index - start;//移动的距离
			var t = 0;//第几步开始
			var endT = 30;//执行步数
			
			var timer = setInterval(function(){
				t+=1;
				//每30毫秒加一步
				if(t>=endT){
					clearInterval(timer);//endT步后清除计时器
					move_bol = false;//记录动画结束
				}
				var l = start + (change*t/endT);
				inner.style.left = l+'px';//移动
			},30)
		}

图片淡入切换动画函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function showFn(before){
	move_bol = true;//记录动画开始
	var t = 0;
	for(var i=0; i< img.length; i++){
		img[i].style.zIndex = 0;
		if(before!=i){
			img[i].style.opacity = 0;
		}
	}
	img[index].style.zIndex = 1;
	var timer = setInterval(function(){
		t++;
		if(t >= 50){
			clearInterval(timer);
			move_bol = false;//记录动画结束
		}
		img[index].style.opacity = t/50 ;
	},30)
}

获取标签最终top和left以及获取标签计算后的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*获取标签最终top和left obj 需要获取的标签对象 返回json{top:xxx,left:xxxxx}*/

function offsetFn(obj) {
	var t = 0;
	var l = 0;
	while(obj){
	/*询问对象是否存在，存在才执行代码块 边框默认不添加进去，需要自己遍历添加*/
		var bT = parseInt(getStyle(obj,"borderTopWidth"));
		//borderTop的宽度
		var bL = parseInt(getStyle(obj,"borderLeftWidth"));
		//borderLeft的宽度

		t += obj.offsetTop + bT ;
		l += obj.offsetLeft + bL;
		obj = obj.offsetParent;//父级替换子级
	}
	return {"top":t,"left":l};//返回json
}

/*获取标签计算后的样式 参数obj：标签元素   attr：样式属性currentStyle：IE可标识,非IE不可标识 getComputedStyle：IE不可标识,非IE可标识*/

function getStyle(obj,attr){
	return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,null)[attr];
}

隐藏当前除子级以外所有的孙子及以下元素（递归的使用）

1
2
3
4
5
6
7
8
9
10
/*findUl 找到孙子并隐藏孙子及孙子下所有的子级 obj 孙子的爷爷利用递归 逐级找到孙子以及孙子下所有的子级，并隐藏所有找到的子级*/
function findUl(obj){
	var lis = obj.children;//获取元素儿子
	for (var i=0; i < lis.length; i ++) {
		if(lis[i].children[0]){
			findUl(lis[i].children[0]);//递归
			lis[i].children[0].style.display = 'none';//找完后，隐藏元素儿子
		}
	}
}

节点的查找

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
//查找下一个节点函数 obj参数为当前标签元素

function nextFn (obj) {
	return obj.nextElementSibling?obj.nextElementSibling:obj.nextSibling;
}
//调用
nextFn(li[1]).style.background = 'burlywood';
	
	
//查找上一个节点函数 obj参数为当前标签元素
function previousFn(obj){
	return obj.previousElementSibling?obj.previousElementSibling:obj.previousSibling;
}
//调用
previousFn(li[4]).style.background = 'skyblue';
	
//查找第一个子节点函数 obj参数为第一个子节点的父级标签元素

function firstFn(obj){
	return obj.firstElementChild?obj.firstElementChild:obj.firstChild;
}
//调用
firstFn(ul).style.background = 'palegreen';
	
	
//查找最后一个子节点函数 obj参数为最后一个子节点的父级标签元素

function lastFn(obj){
	return obj.lastElementChild?obj.lastElementChild:obj.lastChild;
}
//调用
lastFn(ul).style.background = 'coral';

//自定义封装一个通过标签名的函数 tag参数为大写标签名 范围是全文的标签 返回一个数组

function TagName (tag) {
	var childs = wrap.childNodes;
	var arr = [];
	for (var i=0;i<childs.length;i++) {
		//nodeType：节点类型   nodeName：节点名
		if (childs[i].nodeType == 1 && childs[i].nodeName == tag) {
			arr.push(childs[i]);
		}
	}
	return arr;
}

改变元素滚动条高度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 函数注释 改变元素滚动条高度动画函数 end参数是最终高度，不可为空 fn参数是计时器结束后执行的回调函数，可为空
function myFn(end,fn){
	var start = document.body.scrollTop || document.documentElement.scrollTop ;//初始高度
	var change = end - start;//改变的高度值
	var t = 0;//第几步开始
	var endT = 30;//执行步数
	var timer = setInterval(function(){
	//设置计时器
		t++;//每30毫秒加一步
		if(t >= endT){
		//当到达第30步时执行if里的代码块
			clearInterval(timer);//endT步后清除计时器
			//如果fn是一个函数则执行fn()，否则不执行
			fn && fn();
		}
		var sTop = Tween.Bounce.easeOut(t, start, change, endT);//计算每30毫秒移动的距离
		document.body.scrollTop = sTop;
		document.documentElement.scrollTop = sTop;
	},30);
}

预加载图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* loadImageFn 预加载图片函数 arr参数是图片数组 fn是过程回调函数 over是结束回调函数 IE6判断不了 */

function loadImageFn (arr,fn,over) {
	var index = 0;//加载第几张
	for (var i=0; i < arr.length; i++) {
		var img = new Image();//定义一个图片的对象
		img.src = 'img/'+ arr[i];//设置路径
		img.onload = function(){
			index ++; //加载
			if (index == arr.length) {
			//图片加载完成后
				alert('加载完成!')
				over && over();//结束回调函数
			}
			fn && fn(index);//过程回调函数
		}
	}
}

函数 & 变量的作用域 & eval

1
2
3
函数

函数对任何语言来说都是一个核心的概念。通过函数可以封装任意多条语句，而且可以在任何地方、任何时候调用执行。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

// function show() {
// 	alert("函数");
// }
// show() 只有函数被调用，才会被之执行


var show = function () {
	alert("函数");
	return 1;//函数结束后的返回值，如果没有就是undefined
	alert("内容");//return 后面的内容不会再执行
}
alert(show())
//return 语句还有一个功能就是退出当前函数，注意和break 的区别。PS：break 用在循环和switch 分支语句里。

//传参
var show = function (a,b) {
	var a = 7;//模拟
	var b = 9;//模拟
	var sum = a + b;
	return sum;
}

// alert(show(7,9))
alert(show(15,38))

//利用arguments写一个找最大值的变量
function max() {
	var max = arguments[0];
	// alert(arguments.length);
	for (var i = 1; i < arguments.length; i++) {
		if (max<arguments[i]) {
			max = arguments[i];
		}
	}
	return max;		
}	
alert(max(1,2,3,35,4,5,6,7,8))

//匿名函数
var num = (
	function(a,b){
	//alert(a+b);
	return a+b;
	}
)(3,4);
alert(num);

变量的作用域

1
2
3
变量的作用域无非就是两种：全局变量和局部变量。

Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var a = 5;//全局变量

/*函数里面的变量定义了就是局部变量，只能在当前函数里面使用*/

function show() {
	var a = 10;
	alert(a);
}
show();//弹10
alert(a);//弹5

var a = 15;
function show1() {
	a = 10;
	function show2() {
		alert(a)//第一次弹undefined
		var a = 5;
		alert(a);//第二次弹5
	}
	show2();
	alert(a);//第三次弹10
}
show1()
alert(a)//第四次弹15

作用域练习

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var a = 6;
setTimeout(function () {
    alert(a);//66
    a = 666;
 }, 1000);

 a = 66;

var a = 6; //a=6
	(function(){
		(function () {
		    alert(a);
		    a = 666;//a = 666
		})();
	})();
	a = 66; 
	alert(a)//a =66

//匿名函数
	var num = (function (a,b) {
		// alert(a+b);
		return a+b;
	})(3,4)
	
	alert(num)//弹7

	function show(a,b) {
		alert(a+b)//弹7
	}
	show(3,4);

闭包

JavaScript中所有的function都是一个闭包。不过一般来说，嵌套的function所产生的闭包更为强大，也是大部分时候我们所谓的“闭包”。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*什么闭包：function函数就是一个闭包，闭包里面的变量是封闭的，函数外面不可以获取。主要功能：function里面再嵌套一个函数，把这个函数返回出去 赋给外面的变量，函数外面就可以获取到函数里面的内容 注意的问题：闭包要注意内存溢出的问题，不可以乱用，需要用得才用*/

function a() {
	var i = 5; // a_i;
	function b(n) {
		i += n;//a_i
		return i;
	}
	return b;
}	
var c = a();
c(5)
alert(c(5))//15

// alert(c(1));6
// alert(c(5));11

闭包有什么作用？

1
2
3
4
5
简而言之，闭包的作用就是在a执行完并返回后，闭包使得javascript的垃圾回收机制GC不会收回a所占用的资源，因为a的内部函数b的执行需要依赖a中的变量。这是对闭包作用的非常直白的描述，不专业也不严谨，但大概意思就是这样，理解闭包需要循序渐进的过程。

使用闭包的注意点

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。

案例练习

去重复

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
var arr = [5,2,1,1,1,1,3,5,6,6,6,6,2,8,3,5,9,9,9,9,9,9,9];
	// 0  arr[0]==arr[5] 如果是重复 删掉arr[5]
	//splice(5,1)
	
	function noRepeat() {
		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--;//清除后，位置变化，j就要返回上一个
				}
			}					
		}
		return arr;//结束返回数组
	}
	var arr = noRepeat();
	alert(arr);

var arr = [5,2,1,1,1,1,3,5,6,6,6,6,2,8,3,5,9,9,9,9,9,9,9];
	// 0  arr[0]==arr[5] 如果是重复 删掉arr[5]
	//splice(5,1)	
	function noRepeat() {
		var newArr = [];//定义存放数组中不相同的值
		newArr.push(arr[0])//初始化
		for (var i = 1; i < arr.length; i++) {
		//每个遍历一次
			for (var j = 0; j < newArr.length; j++) {
			//与后面每个比较
				if (newArr[j]==arr[i]) {
				//判断新数组的值是否与数组当前值相等，是就退出当前循环
					break;
				}
			}	
			/*判断新数组是否完全遍历，如果不是说明新数组的值与数组当前值相等，则不添加入新数组，否则反之*/
			if (j==newArr.length) {
				newArr.push(arr[i]);
				// newArr[newArr.length] = arr[i]
			}			
		}
		return newArr;//结束返回数组
	}
	var arr = noRepeat();
	alert(arr);

排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var arr = [5,3,2,4,8,1,7,6];

	function px() {
		document.write("i="+0+";j="+0+"-"+arr+"<br>");
		for (var i = 0; i < arr.length; i++) {
			for (var j = i+1; j < arr.length; j++) {
				if (arr[i]>arr[j]) {
					var num = arr[i];
					arr[i]=arr[j];
					arr[j]=num;					
				}
				document.write("i="+i+";j="+j+"-"+arr+"<br>");
			}
			document.write("<br>");
		}
		return arr;
		
	}

	var arr = px();
	alert(arr);

eval

1
2
3
eval() 函数可将字符串转换为代码执行，并返回一个或多个值

eval调用时，实例为eval( “ javascript代码 “ )
1
2
3
var str = "function(){alert('a');}“;
str = eval(str);
str();

eval()的返回值

1
2
3
4
5
eval()的返回值遵循以下规则：

1.如果eval()的参数不是字符串，那么eval()将直接返回参数。
2.如果eval()的参数是字符串，那么eval()将这个字符串解析成代码后进行执行，并返回最后一行代码执行的结果。
3.如果字符串无法解析成合法的代码，eval()将抛出错误。

日期对象-Date && 定时器

Date

时间戳:是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// var oDate = new Date(2015,5,30);
// var oDate = new Date('2015-6-29');
var oDate = new Date()//当前时间


var year = oDate.getFullYear();//获取年份
var month = oDate.getMonth();//获取月份 0-11
var day = oDate.getDate();//获取多少号
var week = oDate.getDay();
//返回星期几，0 表示星期日，6 表示星期六
var hour = oDate.getHours();//获取时
var minutes = oDate.getMinutes()//获取份
var second = oDate.getSeconds();//获取秒
var time = oDate.getTime();//获取时间戳
document.body.innerHTML = '';
document.write("年份:"+year+"<br>")
document.write("月份:"+month+"<br>")
document.write("日:"+day+"<br>")
document.write("星期:"+week+"<br>")
document.write("时:"+hour+"<br>")
document.write("分:"+minutes+"<br>")
document.write("秒:"+second+"<br>")
document.write("时间戳:"+time+"<br>")

setTimeout

1
2
3
4
5
/*一次性定时器 setTimeout（a,b）; a:函数 b:时间-每隔多少毫秒执行一次a的这个函数*/

setTimeout(function(){
	alert('一次性定时器');
},1000)

setInterval

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*循环性定时器 setInterval（a,b）; a:函数 b:时间-每隔多少毫秒执行一次a的这个函数*/

// setInterval(function(){
// alert('循环性定时器');
// },1000)
var i = 0;
var  timer = setInterval(function(){
	i++;
	if (i>5) {
		clearInterval(timer);
	} else {					
		//alert('循环性定时器');
	}
},1000)

案例

倒计时的实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
setInterval(function () {
	var oDate = new Date()//当前时间
	var d = new Date("2016-6-9");
	//计算当前时间到端午节的时间戳 秒数
	var time = parseInt((d-oDate)/1000);
	//剩余天数 = 秒/（24*60*60）
	var day = parseInt(time/86400);
	//剩余小时数 = 秒%（24*60*60）/(60*60)
	var h = parseInt(time%86400/3600);
	//剩余分钟数 = 秒%(60*60)/60
	var m = parseInt(time%3600/60);
	//剩余秒数 = 秒%60
	var s = parseInt(time%60);

	document.body.innerHTML = "距离端午节放假还有："+day+"天-"+h+"小时-"+m+"分"+s+"秒";
},1000)

时钟的实现

HTML部分

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

CSS部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
.wrap{
width: 400px;
height: 400px;
border: 1px solid powderblue;
border-radius: 50%;
margin: 100px auto;
position: relative;
box-shadow: 1px 0.5px 1px 3px #87ceeb inset;
font-size: 18px;
}
.wrap .seconds{
	width: 15px;
	height: 1.5px;
	background: paleturquoise;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: -2;
	box-shadow: 1px 1px 1px skyblue;
}
.wrap .time{
	width: 20px;
	height: 20px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	border-radius: 50%;
	background: skyblue;
	box-shadow: 1px 1px 1px black;
}
.wrap .time div{
	border-radius: 50% 50% 0 0;
	z-index: -1;
}
.wrap .seconds:nth-child(5n+1){
	width: 20px;
	height: 1.5px;
	background: black;
}
.wrap .time .s{
	width: 2px;
	height: 230px;
	position: absolute;
	background: red;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	transform: rotate(0deg) translateY(-80px);
	box-shadow: 1px 1px 2px black;
}
.wrap .time .m{
	width: 4px;
	height: 200px;
	position: absolute;
	background: dodgerblue;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	transform: rotate(0deg) translateY(-70px);
	box-shadow: 1px 1px 2px black;
}
.wrap .time .h{
	width: 6px;
	height: 180px;
	position: absolute;
	background: cadetblue;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	transform: rotate(0deg) translateY(-60px);
	box-shadow: 1px 1px 2px black;
}

JS部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//画出时钟
document.write('<div class="wrap">');
for (var i = 0; i < 60; i ++) {
//画出刻度
document.write("<span class='seconds' style='transform: rotate("+i*6+"deg) translate(190px)'></span>")
}
document.write("<div class='time'>")
document.write("<div class='h'></div>");//时针
document.write("<div class='m'></div>");//分针
document.write("<div class='s'></div>");//秒针
document.write("</div>");//类time结束
document.write('</div>');//类wrap结束
//通过类获取时分秒针
var s = document.getElementsByClassName('s')[0];
var m = document.getElementsByClassName('m')[0];
var h = document.getElementsByClassName('h')[0];
timer();//初始分秒的旋转角度
setInterval(function(){
//循坏计时，每秒刷新一次达到时钟效果
	timer();
},1000)
function timer(){
//获取当前时分秒的旋转角度
	var oDate = new Date();
	//秒针一圈60刻度，每秒6度，所以得出每秒旋转6度
	s.style.transform = 'rotate('+(oDate.getSeconds()*6)+'deg) translateY(-80px)';
	//分针一圈60刻度，每分6度，每秒旋转 秒/360*6*6所以得出每秒旋转oDate.getMinutes()*6+oDate.getSeconds()*0.1度
	m.style.transform = 'rotate('+(oDate.getMinutes()*6+oDate.getSeconds()*0.1)+'deg) translateY(-70px)';
	//时针一圈12刻度，每时30度，每分旋转 分/360*30*6所以得出每分旋转oDate.getHours()*30+oDate.getMinutes()*0.5度
	h.style.transform = 'rotate('+(oDate.getHours()*30+oDate.getMinutes()*0.5)+'deg) translateY(-60px)';
}

browser—浏览器检测

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
对于网站开发人员来说，浏览器信息和统计数据都是非常重要的。

浏览器信息

Internet Explorer

微软的 Internet Explorer(IE) 是当今最流行的因特网浏览器。它发布于 1995 年，并于 1998 年在使用人数上超过了 Netscape。

Netscape

Netscape 是首个商业化的因特网浏览器。它发布于 1994 年。在 IE 的竞争下，Netscape 逐渐丧失了它的市场份额。

Mozilla

Mozilla 项目是从 Netscape 的基础上发展起来的。今天，基于 Mozilla 的浏览器已经演变为因特网上第二大的浏览器家族，市场份额为大约 20%。

Firefox

Firefox 是由 Mozilla 发展而来的新式浏览器。它发布于 2004 年，并已成长为因特网上第二大最流行的浏览器。

Opera

Opera 是挪威人发明的因特网浏览器。它以下列特性而闻名于世：快速小巧、符合工业标准、适用于多种操作系统。对于一系列小型设备诸如手机和掌上电脑来说，Opera 无疑是首选的浏览器。

Chrome

Chrome 是免费的开源 web 浏览器，它由 Google 开发。该浏览器于 2008 年 9 月发布。

Safari

Safari 是由苹果公司开发的浏览器，适用于 Mac 和 Windows 系统。该浏览器于 2003 年 6 月发布。

js判断浏览器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var a = window.navigator.userAgent;
//获取浏览器信息
//查找字符判断浏览器类型
if(a.indexOf('OPR')>-1){
	alert('欧朋')
}else if(a.indexOf('Chrome')>-1){
	alert('谷歌')
}else if (a.indexOf('Firefox')>-1){
	alert('火狐')
}else if('Safari'){
	alert('苹果')
}else if('IE 8'){
	alert('IE 8')
}

程序猿经典案例之计算器

1
2
3
4
5
6
7
8
9
10
11
思路：

找到按钮
实现数字添加功能
实现运算符功能
实现等于号功能
小数点功能
清除功能
正负数功能
求百分数功能
查漏补缺

HTML部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计算器</title>
	</head>
	<body>
		<div class="wrap">
			<div id="header">0</div>
			<ul id="btns">
				<li class="center">AC</li>
				<li class="center">+/-</li>
				<li class="center">%</li>
				<li class="o">/</li>
				<li class="center">7</li>
				<li class="center">8</li>
				<li class="center">9</li>
				<li class="o">*</li>
				<li class="center">4</li>
				<li class="center">5</li>
				<li class="center">6</li>
				<li class="o">-</li>
				<li class="center">1</li>
				<li class="center">2</li>
				<li class="center">3</li>
				<li class="o">+</li>
				<li class="center long under">0</li>
				<li class="center under">.</li>
				<li class="under o">=</li>
			</ul>
		</div>
	</body>
</html>

CSS部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
.wrap{
	width: 232px;
	height: 320px;
	border: 1px solid #8e8e8e;
	border-radius: 5px;
	margin: 50px auto;
}
#header{
	width: 100%;
	height: 80px;
	background: rgba(90,90,90,0.6);
	text-align: right;
	line-height: 100px;
	color: white;
	font-size: 60px;
}
#btns{
	width: 100%;
	height: 100%;
	list-style: none;
	overflow: hidden;
	padding: 0;
	margin: 0;
	font-size: 20px;
}	
#btns li{
	margin: 0;
	float: left;
	width: 57px;
	height: 47px;
	text-align: center;
	line-height: 47px;
	border-bottom: 1px solid #8e8e8e;
	background: #d6d6d6;
	cursor: pointer;
}
#btns .long{
	width: 115px;
}
#btns .center{
	border-right: 1px solid #8e8e8e;
}
#btns .o{
	background: #f49437;
	width: 58px;
	color: white;
}
#btns .under{
	border-bottom: 0;
	height: 48px;
}

js部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
window.onload = function (){
	//获取计算框
	var header = document.getElementById('header');
	//获取所有按钮
	var li =document.getElementsByTagName('li');
	//定义上一个数 保存第一个数
	var per_number = null;
	//定义下一个数 保存第二个数
	var next_number = null;
	//定义一个字符串类型保存运算符
	var operation = '';
	//记录符号的类型，1为无，0为运算符，2为等于号
	var flag = 0;
	//给所有按钮添加点击事件
	for (var i=0;i<li.length;i++) {
		li[i].onclick = function (){
			switch (this.innerHTML){
				//清除按钮的点击事件
				case 'C':
				case 'AC':
					//把所有数据以及变量都初始化
					per_number = null;
					next_number = null;
					operation = "";
					flag = 0;
					header.innerHTML = "0";
					break;
				//正负切换按钮的点击事件
				case'+/-':
					header.innerHTML= -1*Number(header.innerHTML);
					break;
				//百分比的点击事件
				case'%':
					header.innerHTML = Number(header.innerHTML)/100;
					break;
				//数字按钮的点击事件
				case'1':
				case'2':
				case'3':
				case'4':
				case'5':
				case'6':
				case'7':
				case'8':
				case'9':
				case'0':
					
				if (header.innerHTML == "0" || flag==0 || flag==2) {
				/*当计算框为零，或者刚点击完运算符，或者刚点击完等于号时*/
				header.innerHTML = this.innerHTML;//赋值
						if(flag==2){
						//刚点击完等于号时
							per_number = null;
							//清空第一个数
						}
						//修改点击符号为数字
						flag = 1;
					} 
					else{
					//否则拼接字符串
						header.innerHTML += this.innerHTML;
					}
					break;
				//四则运算的点击事件
				case'+':
				case'-':
				case'*':
				case'/':
					if(per_number == null || flag == 2){
					/*第一个数为空，或者刚点击完等于号时，第一个数等于计算框里的数字*/
						per_number = Number(header.innerHTML);
					}else if(operation != '' && flag!=0){
					/*运算符不等于空，或者不是刚点击完运算符时，第二个数等于计算框里的数字*/
					next_number = Number(header.innerHTML);
						_equals(operation);//进行四则运算
					}
					flag = 0;//修改点击符号为运算符
					operation =this.innerHTML;//保存运算符
					break;
				//等于的点击事件
				case'=':
					if(operation != ''){
					//运算符不为空时
						if(flag == 1){
						/*刚点击完数字时，第二个数等于计算框里的数字*/
							next_number = Number(header.innerHTML);
						}
						_equals(operation);//进行四则运算
					}
					flag = 2;//修改点击符号为等于号
					break;
					//.的点击事件
				default:
					if (header.innerHTML == "0" || flag==0 || flag==2) {
					/*当计算框为零，或者刚点击完运算符，或者刚点击完等于号时，输出0.*/
						header.innerHTML = '0'+this.innerHTML;
						flag = 1;
					}else{
						if(header.innerHTML.indexOf('.',0) == -1){
						//计算框内没有.时，拼接0.
							header.innerHTML += this.innerHTML;
						}
					}
					break;
			}
			//AC与C的切换
			if((li[0].innerHTML == 'AC' || this.innerHTML != li[0].innerHTML) && this.innerHTML!="AC"){
			/*清除键内容为 AC或者当前点击不是清除键,和当前点击内容不是AC*/
				li[0].innerHTML ='C';//修改清除键内容为C
			}else{
				li[0].innerHTML ='AC';//修改清除键内容为AC
			}
		}
	}
	//文档点击事件，设置计算框自适应字体大小
	document.onclick =function(){
		if(header.innerHTML.length<8){
		//计算框内容长度小于8时，字体大小为60px
			header.style.fontSize = "60px"
		}else if(header.innerHTML.length<16){
		//计算框内容长度大于8小于16时，字体大小为30px
			header.style.fontSize = "30px";
		}else if(header.innerHTML.length<24){
		//计算框内容长度大于16小于24时，字体大小为20px
			header.style.fontSize = "20px";
		}
		else if(header.innerHTML.length<30){
		//计算框内容长度大于24小于30时，字体大小为16px
			header.style.fontSize = "16px";
		}else{
		//计算框内容长度大于30时，字体大小为12px
			header.style.fontSize = "12px";
		}
	}
	//四则运算的函数
	function _equals(operation){
		switch (operation){
			case '+'://加运算符
				per_number += next_number;
				break;
			case '-'://减运算符
				per_number -= next_number;
				break;
			case '*'://乘运算符
				per_number *= next_number;
				break;
			case '/'://除运算符
				if(next_number ==0 ){
					//0为被除数时
					per_number = null;
					//设置计算结果为空
				}else{
					per_number /= next_number;
				}
				break;
		}
		if(per_number == null){
			//计算结果为空时，输出非数字NaN
			header.innerHTML = NaN;
		}else{
			header.innerHTML = per_number;
		}
	}
}

以上例子仅供参考！！！！感谢您的阅读，祝您学习愉快！！

String & dorpdownlist(下拉列表)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
String

String 对象
String 对象用于处理文本（字符串）。

String 对象属性

constructor    对创建该对象的函数的引用
length    字符串的长度
prototype    允许您向对象添加属性和方法
String 对象方法

anchor()    创建 HTML 锚。
big()    用大号字体显示字符串。
blink()    显示闪动字符串。
bold()    使用粗体显示字符串。
charAt()    返回在指定位置的字符。
charCodeAt()    返回在指定的位置的字符的 Unicode 编码。
concat()    连接字符串。
fixed()    以打字机文本显示字符串。
fontcolor()    使用指定的颜色来显示字符串。
fontsize()    使用指定的尺寸来显示字符串。
fromCharCode()    从字符编码创建一个字符串。
indexOf()    检索字符串。
italics()    使用斜体显示字符串。
lastIndexOf()    从后向前搜索字符串。
link()    将字符串显示为链接。
localeCompare()    用本地特定的顺序来比较两个字符串。
match()    找到一个或多个正则表达式的匹配。
replace()    替换与正则表达式匹配的子串。
search()    检索与正则表达式相匹配的值。
slice()    提取字符串的片断，并在新的字符串中返回被提取的部分。
small()    使用小字号来显示字符串。
split()    把字符串分割为字符串数组。
strike()    使用删除线来显示字符串。
sub()    把字符串显示为下标。
substr()    从起始索引号提取字符串中指定数目的字符。
substring()    提取字符串中两个指定的索引号之间的字符。
sup()    把字符串显示为上标。
toLocaleLowerCase()    把字符串转换为小写。
toLocaleUpperCase()    把字符串转换为大写。
toLowerCase()    把字符串转换为小写。
toUpperCase()    把字符串转换为大写。
toSource()    代表对象的源代码。
toString()    返回字符串。
valueOf()    返回某个字符串对象的原始值。

案例：字符串的截取

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 400px;
				margin: 50px auto;
				background: khaki;
				padding: 20px;
				border: 10px solid gainsboro;
			}
		</style>
		<script type="text/javascript">
			//获取内容标签span
			//获取点击按钮a
			//获取标签内容str
			//点击收缩时显示str截取后的内容
			//点击展开时显示str全部内容
			
			window.onload =function(){
				var span = document.getElementsByTagName('span')[0];
				var a = document.getElementsByTagName('a')[0];
				var str =span.innerText;
				//span完整内容
				a.onclick = function (){
					if(span.innerHTML == str){
					//判断内容是否被截取
						span.innerText = str.substring(0,30) + "......";//显示str截取后的内容
						a.innerHTML = ">>展开";
					}else{
						span.innerText = str;
						//显示str的内容
						a.innerHTML = ">>收缩";
					}
				}
			}
			
		</script>
	</head>
	<body>
		<div>
			<span>蓝鸥科技是美国苹果公司AATC官方授权培训机构，是国内专业的移动互联网研发实训基地，致力于iOS、安卓、Unity、HTML5等开发人才的培养。2012年由中国知名移动开发专家刘辉、李静波和崔亚允创立。蓝鸥科技拥有北京、上海、广州、大连、郑州和西安等众多实训中心，合作院校超过500所，战略合作企业800多家。截至目前，在苹果App Store和谷歌商店累计上线1000多款应用和游戏。</span><a href="###">>>收缩</a>
		</div>
	</body>
</html>

案例 字符串方法以及查找字符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var str = "我是字符串我是字符串我是字符串我是字符串我是字符串我是字符串我是字符串我是字符串我是字符串我是字符串";
			/*字符串截取方法substring, substring里面最小参数是0（负数也是0）*/
			/*里面的参数是从最小截取到最大的位置（读取时先找到最小，再往最大截取）*/
			//	var str2 = str.substring(2,5);
			//	alert(str2);
			/*查找的方法 indexOf() 返回位置值 如果找不到返回-1 只会找一次*/
			//alert(str.indexOf('字',3));
			var i = 0 ;
			var sum = 0;
			while (str.indexOf('字',i) > -1) {
			//在找到的时候循环
				sum ++;//找到后+1
				i=str.indexOf('字',i) + 1;
				//在位置之后再开始查找
			}
			alert("str中字共有"+sum+"个");
			// 1 i=0 位置2>-1 sum ++ ; i = 位置2 +1;
			//2	 i=3 位置7>-1 sum ++ ; i = 位置7 +1;
			//3	 i=8 位置13>-1 sum ++ ; i = 位置13 +1;
			//...
			//2	 i=？ 位置-1不大于-1 退出循环  弹出对话框
			
		</script>
	</head>
	<body>
	</body>
</html>

案例 字符串与数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var str = "abcdefg";
			var arr = ['a','b','c','d','e','f','g'];
			//字符串不可以通过下标修改其中的值，只能整体修改
			str[3] = "D";
			//	alert(str);
			arr[3] = "D";
			//	alert(arr);
			//字符串变成数组
			//split 把字符串劈开变成数组 劈开是按照字符串里的参数
			var arr =str.split("d");
			//alert(arr[1]);

			//charAt 获取字符串里的第几个字符 从0开始
			//charCodeAt 获取字符串里的第几个字符的字符Ascii
			//	alert(str.charAt(2));
			//alert(str.charCodeAt(2));

			//alert(str.toLowerCase());变成小写
			//alert(str.toUpperCase());变成大写
		</script>
	</head>
	<body>
	</body>
</html>

dorpdownlist(下拉列表)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.droplist input{
				width: 150px;
				height: 30px;
				font-size: 14px;
				font-weight: lighter;
				text-align: center;
				border: 1px solid cadetblue;
				border-radius: 6px;
				border-color: cornflowerblue;
				box-shadow: 0.1px 0.1px 1px 0.5px cadetblue;
				background: white;
			}
			.droplist ul{
				width: 150px;
				border: 1px solid cadetblue;
				border-radius: 6px;
				list-style: none;
				color: #333;
				text-align: center;
				margin-top: 5px;
				padding: 0;	
			}
			.droplist ul li{
				width: 98%;
				padding: 10px 0;
				margin: 0 auto;
				border-bottom: 1px solid #ccc;;
			}
			.droplist ul li:hover{
				background: rgba(244,244,244,0.75);
			}
			.droplist ul li:nth-child(3){
				border: 0;
			}
		</style>
		<script type="text/javascript">
			window.onclick=function (){
				//做法思路
				//1.获取元素
				//2.点击请选择-列表显示
				//3.点击列表-选择框内容 = 你点击列表框的内容
				//4.列表消失
				//这里获取document.getElementsByClassName('btn')是一个数组：['按钮']，而我们要获取的是'按钮'，所以读取是['按钮'][0],也就是document.getElementsByClassName('btn')[0]
				var btn =document.getElementsByClassName('btn')[0];
				var list =document.getElementById('list');
				var li = list.getElementsByTagName('li');//获取list里的<li>集合
				
				//选择按钮
				btn.onclick = function(){
					if(list.style.display != "block"){
					//判断list是否已经隐藏
						//是，就显示
						list.style.display = 'block';
					}else{
						//否，就隐藏
						list.style.display = 'none';
					}
				}
				for (var i=0; i<li.length; i++) {
				//循环，给每个<li>添加点击事件
					li[i].onclick = function (){
						/*注：input里的内容获取是-input.value，其他标签的内容获取是-标签.innerHTML*/
						btn.value = this.innerHTML;/*将当前<li>里的内容赋值给btn*/
						list.style.display = 'none';
						//列表消失
					}
				}	
				
			}
		</script>
	</head>
	<body>
		<div class="droplist">
			<input type="button" class="btn" value="请选择" />
			<ul id="list" style="display: none;">
				<li>栗子</li>
				<li>李子</li>
				<li>芒果</li>
			</ul>
		</div>
	</body>
</html>

Math & Array(数组)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
Math

Math对象允许您执行数学任务。
Math对象包括几个数学方法。

Math 对象属性

E    返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2    返回 2 的自然对数（约等于0.693）。
LN10    返回 10 的自然对数（约等于2.302）。
LOG2E    返回以 2 为底的 e 的对数（约等于 1.414）。
LOG10E    返回以 10 为底的 e 的对数（约等于0.434）。
PI    返回圆周率（约等于3.14159）。
SQRT1_2    返回返回 2 的平方根的倒数（约等于 0.707）。
SQRT2    返回 2 的平方根（约等于 1.414）。
Math 对象方法

abs(x)    返回数的绝对值。
acos(x)    返回数的反余弦值。
asin(x)    返回数的反正弦值。
atan(x)    以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)    返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x)    对数进行上舍入。
cos(x)    返回数的余弦。
exp(x)    返回 e 的指数。
floor(x)    对数进行下舍入。
log(x)    返回数的自然对数（底为e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)    返回数的正弦。
sqrt(x)    返回数的平方根。
tan(x)    返回角的正切。
toSource()    返回该对象的源代码。
valueOf()    返回 Math 对象的原始值。

解析：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
console.log(Math);
//ceil:ceil()		向上取整5.00001，取6
//var num = 5.00001;
//alert(Math.ceil(num));

//floor:floor()向下取整，5.9999999，取5
//var num1 = 5.9999999;
//alert(Math.floor(num));

/*Math.min（）和Math.max（）可以用来查找的参数列表中的最低或最高值*/
//max:max()
//alert(Math.max(1,9,5,2,3));//9
//min:min()
//alert(Math.min(1,9,5,2,3));//1

//pow:pow()求次方数
//	alert(Math.pow(2,3));8----2的3次方
//random:random()随机数，取值在0-1之间，不包括0和1 最小0.0000000......1 最大0.99999...9
//alert(Math.random());

//栗子 0-10最小值
//0.00001*10 = 0.0001 四舍五入得  0
//0.99999*10 =9.9999  四舍五入得  10
//0-10
var rnb = Math.round(Math.random()*10);
//1-10
var rnb1 = Math.ceil(Math.random()*10);
//0-9
var rnb2 = Math.floor(Math.random()*10);
//30-60
var rnb3 = Math.round(Math.random()*30+30);
var rnb4 = Math.round(Math.random()*17);
alert(rnb4);
	
//round:round()四舍五入取整
//var num2 = 5.9999999;
//alert(Math.round(num));//6
//var num3 = 5.499999;
//alert(Math.round(num));//5

Array(数组)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Array 对象
Array 对象用于在单个的变量中存储多个值。

Array 对象属性

constructor 返回对创建此对象的数组函数的引用。
length 设置或返回数组中元素的数目。
prototype  使您有能力向对象添加属性和方法。
Array 对象方法

concat() 连接两个或更多的数组，并返回结果。
join()  把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()  删除并返回数组的最后一个元素
push()  向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()  颠倒数组中元素的顺序。
shift()  删除并返回数组的第一个元素
slice()  从某个已有的数组返回选定的元素
sort()  对数组的元素进行排序
splice()  删除元素，并向数组添加新元素。
toSource()  返回该对象的源代码。
toString()  把数组转换为字符串，并返回结果。
toLocaleString()  把数组转换为本地数组，并返回结果。
unshift()  向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()  返回数组对象的原始值

解析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
//数组方法

/* join:把数组拼接为字符串 将数组里面的逗号替换为join里面的参数，然后拼接为字符串栗子 */

//var str = "acbcdcecf";
//document.write(str + "<br />");
//var arr = str.split("c");//每个字符之间劈开
//document.write(arr + "<br />");
//str = arr.join("<span>p</span>");
//document.write(str + "<br />");
			
//数组增加删除方法
//var arr = [1, 2 , 3, 4, 5];
//arr[arr.length] = arr.length + 1;

//push 在数组后面添加内容
//arr.push(7);

//unshift 在数组前面添加内容
//arr.unshift(0);

//pop 删除最后一个 返回删除的内容
//arr.pop()

//把最后内容添加到前面
//arr.unshift(arr.pop());

//shift删除第一个  返回删除的内容
//arr.shift();

//把第一个内容添加到最后面
//arr.push(arr.shift());
//document.write(arr);
			
//数组合并方法
//var arr = [1,2,3,4,5];
//var arr2 = [6,7,8,9];
//var arr3 = [10,11,12];

/*concat 合并数组 在concat 里面加上要合并的数组 可以添加多个 用逗号隔开 原来数组不会有任何改变，合并的是返回值*/

//var newArr = arr.concat(arr2,arr3);
//document.write("newArr："+newArr+"<br />");
//document.write("arr："+arr+"<br />");
//document.write("arr2："+arr2+"<br />");
//document.write("arr3："+arr3+"<br />");

//截取
//var arr = [1,2,3,4,5,6];
//document.write(arr.slice(2,4));

//倒序 原来数组会改变为倒序
//var arr = [1,2,3,4,5,6,7,8,9];
//document.write(arr.reverse());
//document.write(arr);

//var arr = [6,8,5,2,9,1,7,4,3];
//arr.sort();//默认按顺序排列
//arr.sort(function (a ,b ){
//		return b-a;
//});//a-b 正 b-a 负

//打乱数组顺序
/*	arr.sort(function(){
	return Math.random()-0.5;随机
})
document.write(arr);*/
			
/*splice（a，b，c） a:从哪里开始 b:往后删除多少个 c:添加内容后面可以添加多个，用逗号隔开*/

//var arr = ["a","b","c","d"];
//删除
//arr.splice(1,1);

//替换
//arr.splice(1,1,"新的");

//添加
//arr.splice(1,0,"新的");
//document.write(arr);

//转换  
//Number():把数据类型转为数字  
//String():把数据类型转为字符串

/*parseInt(a,b):把数据类型转为数字 从开始找字符串里的数字，直到不是数字就会停下来（ 类似向上取整） a:是要转换的数据 b: 是要按什么进制进行转换 2进制 8进制 10进制 16进制 parseFloat：把数据类型转为浮点数（有小数点的数）*/

//alert(Number("123px123"));//NaN
//alert(parseInt("123px123",10));//123

栗子-输出随机的顺序

1
2
3
4
5
6
7
8
9
10
var arr =['韦*','李*','戚*','杨**','张**','徐**','赖**','代*','李**','孔**','李**','庞**','胡**','肖*','肖*','张**','唐*'];
for (var i=0; i < 10000 ; i++) {
	arr.sort(function(){
	//对数组的元素进行排序
	return Math.random()-0.5;//获取一个随机数
	});
}
for (var i=0; i < arr.length ; i++) {
	document.write((i+1)+". " +arr[i] + "<br />")
}

输出随机的顺序函数代码

1
2
3
4
5
//随机打乱数组内容
	function sortFn(arr){
		arr.sort(function(){return Math.random()-0.5});
		return arr;
	}

获取范围内的随机数

1
2
3
4
5
6
7
8
/*myrandom(min,max) min到max范围的随机数*/

function myrandom(min,max){
	var rnd = Math.round(Math.random()*(max-min)+min);
	return rnd;
}
//调用
alert(myrandom(1,2));//1-2的随机数,包括1，2