一 js对象
BOM对象:browser object model浏览器模型对象
window对象:定时器
DOM对象:文档对象模型
js对象:字符串对象,数组对象,日期对象,math对象
new关键字,用于创建实例对象
string属性:length:计算字符串的长度
string方法:
toLowerCase:字符串的字符全部转为小写。
toupperCase:字符串的字符全部转为大写
trim:去除两边的空格
charAt:根据索引查找字符
indexOf:根据字符查找索引
lastindexOf:从右到左根据字符查找索引
match:返回匹配字符串的数组,如果没有匹配就会返回null
search:返回字符串的首字母位置索引
substr:截断,找到开始截断的位置,然后在定义截取长度
substring:阶段,找打开始阶段的位置,在截取到结束截断的位置,骨头不顾尾
slice:切片,加上两个值,开始位置和结束位置,骨头不顾尾
replace:替换
split:分割,分割成一个数组类型
concat:字符串的拼接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var a=new String('HEllo ');
console.log(a.length);
console.log(a.toLowerCase());
console.log(a.toUpperCase());
console.log(a.trim());
console.log(a.charAt(3));
console.log(a.indexOf("l"));
console.log(a.lastIndexOf("l"));
console.log(a.match('lo'));
console.log(a.search('l'));
console.log(a.substr(1,3));
console.log(a.substring(1,3));
console.log(a.slice(1,4));
console.log(a.replace('l','q'));
console.log(a.split('l'));
console.log(a.concat('word'))
</script>
</body>
</html>
Array数组方法:
数组的创建 :
创建方式1:
var arrname = [元素0,元素1,….]; // var arr=[1,2,3];
创建方式2:
var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true);
创建方式3:
var arrname = new Array(长度);
// 初始化数组对象:
var cnweek=new Array(7);
cnweek[0]="星期日";
cnweek[1]="星期一";
...
cnweek[6]="星期六";
创建二维数组:
var cnweek=new Array(7); for (var i=0;i<=6;i++){ cnweek[i]=new Array(2); } cnweek[0][0]="星期日"; cnweek[0][1]="Sunday"; cnweek[1][0]="星期一"; cnweek[1][1]="Monday"; ... cnweek[6][0]="星期六"; cnweek[6][1]="Saturday";
join:链接,将列表中的字符拼接成一个字符串
concat:一个列表添加多个元素
toString:元类,将其他所有的类型都可以转换成字符串类型
reverse和sort:数组排序,reverse反转数组;sort:按照第一个字符的ascii进行比较,如果一样,在比较下一个。
数组切片:slice,根据索引进行切片
删除和添加子数组:splice,根据指定的数组进行删除和添加。deleteCount删除整组元素的个数。value:表示在删除位置插入的数组元素,value可以省略。
push和pop:push,压栈,向数组的最后一个位置追加一个元素,pop,弹栈,删除数组最后的一个元素,他们属于先进后出的操作。
shift和unshift:shift删除一个元素,从第一个位置删除;unshift添加元素,从第一个位置开始添加。如果同时添加多个元素,会从后面的开始添加。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var arr=['hello','word','egon'];
console.log(arr.join(' '));
console.log(arr.concat(['alex','yuanhao']));
console.log(arr.toString());
console.log(arr.reverse());
console.log(arr.sort());
console.log(arr.slice(0,2));
console.log(arr.splice(1,1,'alex','egon'));
console.log(arr.push('wupeiqi'));
console.log(arr.pop());
console.log(arr.shift());
console.log(arr.unshift('alex','wupeiqi'));
</script>
</body>
</html>
总结js的数组特性:
// js中数组的特性
//java中数组的特性, 规定是什么类型的数组,就只能装什么类型.只有一种类型.
//js中的数组特性1: js中的数组可以装任意类型,没有任何限制.
//js中的数组特性2: js中的数组,长度是随着下标变化的.用到多长就有多长.
var arr5 = ['abc',123,1.14,true,null,undefined,new String('1213'),new Function('a','b','alert(a+b)')];
/* alert(arr5.length);//8
arr5[10] = "hahaha";
alert(arr5.length); //11
alert(arr5[9]);// undefined */
date对象:时间日期对象。
创建Date对象:
创建Date对象
方法1 : 不指定参数
var nowd1=new Date();
alert (nowd1.toLocaleString( ));
方法2:参数为日期字符串
var nowd2=new Date("2004/3/20 11:12");
alert(nowd2.toLocaleString( ));
var nowd3=new Date("04/03/20 11:12");
alert(nowd3.toLocaleString( ));
方法3:参数为毫秒数
var nowd4=new Date(5000);
alert(nowd4.toLocaleString( ));
alert(nowd4.toUTCString( ));
方法4:参数为年月日小时分钟秒毫秒
var nowd5=new Date(2004,2,20,11,12,0,300);
alert(nowd5.toLocaleString( )); #毫秒并不直接显示
Date:默认当前时间对象,还可以传入具体的时间对象。
toLocaleString:本地时间字符串
toUTCString:国际时间字符串
getDate:获取天
getDay:获取星期
getMonth:获取月,默认从0-11
getFullYear:获取完整年份
getYear:获取年
getHours:获取小时
getMinutes:获取分钟
getSeconds:获取秒
getMilliseconds:获取毫秒
getTime:返回累计的毫秒数,从1970年1月1日午夜开始计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var date=new Date();
console.log(date);
console.log(date.toLocaleString());
console.log(date.toUTCString());
console.log(date.getDate());
console.log(date.getDay());
console.log(date.getMonth());
console.log(date.getFullYear());
console.log(date.getYear());
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
console.log(date.getMilliseconds());
console.log(date.getTime());
</script>
</body>
</html>
Date对象的方法——设置日期和时间:
//设置日期和时间 //setDate(day_of_month) 设置日 //setMonth (month) 设置月 //setFullYear (year) 设置年 //setHours (hour) 设置小时 //setMinutes (minute) 设置分钟 //setSeconds (second) 设置秒 //setMillliseconds (ms) 设置毫秒(0-999) //setTime (allms) 设置累计毫秒(从1970/1/1午夜) var x=new Date(); x.setFullYear (1997); //设置年1997 x.setMonth(7); //设置月7 x.setDate(1); //设置日1 x.setHours(5); //设置小时5 x.setMinutes(12); //设置分钟12 x.setSeconds(54); //设置秒54 x.setMilliseconds(230); //设置毫秒230 document.write(x.toLocaleString( )+"<br>"); //返回1997年8月1日5点12分54秒 x.setTime(870409430000); //设置累计毫秒数 document.write(x.toLocaleString( )+"<br>"); //返回1997年8月1日12点23分50秒
Date对象的方法——日期和时间的在转换:
getTimezoneOffset():8个时区×15度×4分/度=480;
返回本地时间与GMT的时间差,以分钟为单位
toUTCString()
返回国际标准时间字符串
toLocalString()
返回本地格式时间字符串
Date.parse(x)
返回累计毫秒数(从1970/1/1午夜到本地时间)
Date.UTC(x)
返回累计毫秒数(从1970/1/1午夜到国际时间)
Date实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function date_time(){
//定义当前时间
var date=new Date();
//获取完整年份
var year=date.getFullYear();
//获取月份
var month=date.getMonth()+1;
//获取天
var date_day=date.getDate();
//获取时
var hours=date.getHours();
//获取分
var minutes=date.getMinutes();
//获取秒
var seconds=date.getSeconds();
//获取星期
var day=date.getDay();
//打印字符串时间
date=year+'年'+month_day(month)+'月'+month_day(date_day)+'日'+' '+hours+'时'+minutes+'分'+seconds+'秒'+' '+week_day(day);
console.log(date)
}
date_time()
//自动补齐月份和日
function month_day(num) {
if (num < 10){
//小于10的前面自动补0
return '0'+num;
}
else {
return num
}
}
//将星期转成汉字
function week_day(num){
var arr_week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
//根据传入的数字取出列表中相对应的值
return arr_week[num];
}
</script>
</body>
</html>
如果将get换成set,还可以设置时间
Math对象:提佛那个的是一个已经实例好了的对象,不需要再去实例化了
abs:返回数的绝对值
exp:返回e的多少指数(次方)
floor:对数字下舍入,向下取整
ceil:向上取整
log:返回数的自然对数,底为e
random:随机数
max:返回最大值
min:返回最小值
pow:返回一个数的多少次方
round:把一个数四舍五入到一个最接近的整数
sin:返回数的正弦
sqrt:返回一个数的平方根
tan:返回角的正切
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
console.log(Math.abs(10));
console.log(Math.exp(4));
console.log(Math.floor(32.423442));
console.log(Math.ceil(32.423442));
console.log(Math.log(20));
console.log(Math.random());
console.log(Math.max(2,3,5,2,1,50));
console.log(Math.min(32,4,32,423,1,43));
console.log(Math.pow(3,4));
console.log(Math.round(21.32342));
console.log(Math.sin(2));
console.log(Math.sqrt(16));
console.log(Math.tan(5));
</script>
</body>
</html>
二 BOM对象
BOM对象:window对象
window对象:也是全局对象,也就是窗口;所有浏览器都支持window对象。一个html文档就会对应一个window对象。就是为了控制浏览窗口的,不需要创建直接就可以使用。
window对象方法:
alert:弹出框,只有一个确认按钮
confirm:弹出框,不光有一个确认按钮,还有一个取消按钮
prompt:弹出框,里面有提示用户输入的输入框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var a='hello';
alert(a);
confirm(a);
prompt(a);
</script>
</body>
</html>
open:打开一个新的浏览器窗口或者是查找一个自己已经命名好了的窗口
close:关闭窗口
setInterval:定义一个时间,以毫秒为单位。返回值是一个ID数。
claearInterval:关闭定义的时间,传入的是一个setInterval返回的id值。
setTimeout:定义一个时间,以毫秒为单位,执行一次后就会自动停止。
clearTimeuot:关闭定义的时间,传入的是setTimeout返回的id值
scrollTo:将内容滚动到指定的坐标。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function foo() {
console.log("ok")
}
// var ID=setInterval(foo,1000);
//
// clearInterval(ID);
// var ID=setTimeout(foo,1000);
// clearTimeout(ID)
</script>
</head>
<body>
</body>
</html>
2 方法使用
2.1 alert confirm prompt以及open函数
//----------alert confirm prompt----------------------------
//alert('aaa');
/* var result = confirm("您确定要删除吗?");
alert(result); */
//prompt 参数1 : 提示信息. 参数2:输入框的默认值. 返回值是用户输入的内容.
// var result = prompt("请输入一个数字!","haha");
// alert(result);
方法讲解:
//open方法 打开和一个新的窗口 并 进入指定网址.参数1 : 网址.
//调用方式1
//open("http://www.baidu.com");
//参数1 什么都不填 就是打开一个新窗口. 参数2.填入新窗口的名字(一般可以不填). 参数3: 新打开窗口的参数.
open('','','width=200,resizable=no,height=100'); // 新打开一个宽为200 高为100的窗口
//close方法 将当前文档窗口关闭.
//close();
示例:
var num = Math.round(Math.random()*100); function acceptInput(){ //2.让用户输入(prompt) 并接受 用户输入结果 var userNum = prompt("请输入一个0~100之间的数字!","0"); //3.将用户输入的值与 随机数进行比较 if(isNaN(+userNum)){ //用户输入的无效(重复2,3步骤) alert("请输入有效数字!"); acceptInput(); } else if(userNum > num){ //大了==> 提示用户大了,让用户重新输入(重复2,3步骤) alert("您输入的大了!"); acceptInput(); }else if(userNum < num){ //小了==> 提示用户小了,让用户重新输入(重复2,3步骤) alert("您输入的小了!"); acceptInput(); }else{ //答对了==>提示用户答对了 , 询问用户是否继续游戏(confirm). var result = confirm("恭喜您!答对了,是否继续游戏?"); if(result){ //是 ==> 重复123步骤. num = Math.round(Math.random()*100); acceptInput(); }else{ //否==> 关闭窗口(close方法). close(); } } }
2.2 setInterval , clearInterval
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法:<br> setInterval(code,millisec)
其中,code为要调用的函数或要执行的代码代码串。millisec周期性执行或调用 code 之间的时间间隔,以毫秒计算。
示例:
<input id="ID1" type="text" onclick="begin()"> <button onclick="end()">停止</button> <script> function showTime(){ var nowd2=new Date().toLocaleString(); var temp=document.getElementById("ID1"); temp.value=nowd2; } var ID; function begin(){ if (ID==undefined){ showTime(); ID=setInterval(showTime,1000); } } function end(){ clearInterval(ID); ID=undefined; } </script>
三 定时器练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="d1" style="width: 200px">
<button οnclick="foo()">开始</button>
<button οnclick="time_end()">停止</button>
<script>
function loop_time(){
//获取当前时间字符串
var date=(new Date()).toLocaleString();
console.log(date);
//给input标签绑定上时间
var new_date=document.getElementById("d1");
new_date.value=date;
}
//声明ID
var ID;
function foo(){
//如果ID=undefined
if (ID==undefined){
loop_time();
//给ID赋上setInterval返回的ID值
ID=setInterval(loop_time,1000);
}
}
function time_end() {
//关闭定时器
clearInterval(ID);
//重新给ID赋值undefined
ID=undefined;
}
</script>
</body>
</html>
button标签下的onclick属性:监听事件。
document.getElementById:根据id获取当前文档的某个标签。