一 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=" 200px">
<button onclick="foo()">开始</button>
<button onclick="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获取当前文档的某个标签。