1、对象语法
对象语法：
1、new 创建对象
【注】格式： 对象.属性
对象.函数名
【注】对象通过下标访问，一定要传字符串。
2、省略new创建对象
// var car = new Object();
// var car = Object();
/*var car = {};
//<1>添加属性和函数
//属性
car.name = "凯迪拉克";
// car.color = "red";
car["color"] = "red";
//功能 => 函数
car.run = function(){
alert("跑的非常的块");
}*/
var car = {
name: "凯迪拉克",
age: 18,
run: function(){
alert("跑的块");
}
}
alert(car.name);
//删除某一个属性
delete car.name;
alert(car.name);
alert(car.color);
//调用
car.run();
2、日期对象
对象：JS中万事万物皆对象。
面试官：举例。
时间也是对象。
1、不传参数的时候，默认获取的时当前系统时间。
var d = new Date();
Wed May 23 2018 09:29:01 GMT+0800 (CST)
北京： 东八区
GMT 格林尼治
2、可以传参
<1>"2018/05/22" 加引号
<2>"2018-05-22" 加引号
<3>2016,04,13,14,34,50
<4>毫秒数 1秒 = 1000毫秒
var d = new Date();
简写后面获取年月日等不好使
var d = Date();
alert(d);
/*var d = new Date("2018/05/22");
alert(d);*/
//Tue May 22 2018 08:00:00 GMT+0800 (CST)
/*var d = new Date("2018-05-22");
alert(d);*/
/*var d = new Date(2016,04,13,14,34,50);
alert(d); //Fri May 13 2016 14:34:50 GMT+0800 (CST)*/
//Thu Jan 01 1970 08:00:01 GMT+0800 (CST)
/*
毫秒数，用这个毫秒数从1970年1月1日0时0分0秒为参照点，进行计算，过了这个毫秒数的时候。
1970 unix诞生日 世界上第一个操作系统。
*/
/*var d = new Date(1000);
alert(d);*/
var d = new Date();
/*
输出日期对象的形式。
*/
alert(d.toLocaleDateString());//本地日期转成字符串输出年月日
alert(d.toLocaleTimeString());//本地时间转成字符串输出时分秒
3、日期对象方法
Date.parse()
格式:
Date.parse()
日期字符串 "2015-08-22"
返回值：毫秒数
功能：将日期传进行，计算该日期到1970年的毫秒数
var time = Date.parse("2015-08-22");
alert(time);
var d = new Date(time);
alert(d);
日期对象的方法
d是日期对象
d.getTime();
获取该日期对象距离1970年的毫秒数
返回值：毫秒数
d.setTime();
设置距离1970年的毫秒数
var d = new Date();
// alert(d.getTime());
d.setTime(1000);
alert(d);
set/getDate() 从Date对象中返回一个月中的某一天(1~31)
getDay() 从Date对象返回一周中的某一天(0~6)
set/getMonth() 从Date对象中返回月份(0~11)
set/getFullYear() 从Date对象以四位数返回年份
set/getHours() 返回Date对象的小时(0~23)
set/getMinutes() 返回Date对象的分钟(0~59)
set/getSeconds() 返回Date对象的秒数(0~59)
set/getMilliseconds()返回Date对象的毫秒
set/getTime() 返回1970年1月1日至今的毫秒数
getTimezoneOffset() 返回本地时间与格林威治标准时间(GMT)的分钟差
4、强调日期函数细节
/*
getMonth() 【注】月份 0~11月
返回值：月份
*/
var d = new Date();
// var res = d.getMonth();
// alert(d.getMonth()); //获取月份
d.setMonth(5); //重设月份
alert(d);
/*
getDay() 【注】星期几
只能获取
*/
var d = new Date("2018-05-27");
alert(d.getDay());
5、显示当前年月日，星期，时分秒。
1、显示当前时间
function showTime(){
//<1>获取当前时间
var d = new Date();
//<2> 2018年5月23日 星期三 10:47:50
var year = d.getFullYear();
var month = d.getMonth() + 1;
var date = d.getDate();
var hour = d.getHours();
var min = d.getMinutes();
var sec = d.getSeconds();
var week = d.getDay();
week = numToChinese(week);
//<3>进行字符串拼接
var str = year + "年" + month + "月" + date + "日" + " 星期" + week + " " + hour + ":" + min + ":" + sec;
return str;
}
//数字和中文互换 传入数字 传出中文
function numToChinese(num){
var charStr = "";
switch(num){
case 1:
charStr = "一";
break;
case 2:
charStr = "二";
break;
case 3:
charStr = "三";
break;
case 4:
charStr = "四";
break;
case 5:
charStr = "五";
break;
case 6:
charStr = "六";
break;
case 0:
charStr = "日";
break;
default:
alert("error");
break;
}
return charStr;
}
var res = showTime();
2、拓展：实现计时，记录时间(获取当前的时间,开始计时,计时过程相当于你的手机时钟)xxxx年xx月xx日 xx时xx分xx秒
<body>
<div id = "div1"></div>
</body>
<script>
var oDiv = document.getElementById("div1");
oDiv.innerHTML = showTime();
//启动定时器
setInterval(function(){
oDiv.innerHTML = showTime();
}, 1000);
</script>
6、练习
1、复合数据类型：数组 函数 对象 日期对象
<1>获取当前时刻
<2>getDate()
setDate(23 + 10)
var d = new Date();
function dateAdd(n){
var date = d.getDate();
d.setDate(date + n);
alert(d);
}
dateAdd(10);
2、判断两个日期相差的天数
2018-05-20
2018-04-10
参照时间点： 1970
function getNumOfDate(date1, date2){
//1、找一个参照的时间点
var time1 = date1.getTime();
var time2 = date2.getTime();
//2、两个时间点相差毫秒数
var time = Math.abs(time1 - time2);
return time / 1000 / 3600 / 24;
}
var d1 = new Date("2018-4-18");
var d2 = new Date("2018-5-24");
var num = getNumOfDate(d1, d2);
alert(num);
7、定时器
系统提供的函数
setInterval()
格式：setInterval(函数名, 毫秒数);
功能：每隔毫秒数，去执行一次函数。
【注】用chrome运行
var i = 0;
function show(){
document.write(i++ + "<br/>");
}
setInterval(show, 1000);
拓展
系统提供的函数
setInterval()
格式：setInterval(函数名, 毫秒数);
setInterval(匿名函数, 毫秒数)
功能：每隔毫秒数，去执行一次函数。
返回值：当前定时器的ID，我们可以通过ID找到定时器。
clearInterval(ID);
功能：通过ID找到定时器，清除定时器。
【注】用chrome运行
*/
var i = 0;
/*function show(){
document.write(i++ + "<br/>");
}*/
/*var show = function(){
document.write(i++ + "<br/>");
}*/
// setInterval(show, 1000);
//开房
var ID = setInterval(function(){
if(i == 5){
//退房 ID 房卡
clearInterval(ID);
}
document.write(i++ + "<br/>");
}, 1000);
8、计时器
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#timer{
150px;
height: 200px;
background-color: orange;
border: 1px solid black;
margin: 100px auto;
text-align: center;
padding: 20px
}
#timer span{
color: green;
font-size: 30px
}
#timer button{
100px;
height: 30px;
background-color: black;
color: yellow;
font-size: 16px;
margin-top: 15px
}
</style>
</head>
<body>
<div id = "timer">
<span id = "hour">00</span>
<span>:</span>
<span id = "min">00</span>
<span>:</span>
<span id = "sec">00</span>
<br/>
<button id = "start">开始</button><br/>
<button id = "pause">暂停</button><br/>
<button id = "stop">停止</button>
</div>
</body>
<script>
//<1>获取所有要用到的标签。
var oHour = document.getElementById("hour");
var oMin = document.getElementById("min");
var oSec = document.getElementById("sec");
var oStart = document.getElementById("start");
var oPause = document.getElementById("pause");
var oStop = document.getElementById("stop");
var ID = null;
//<2>给三个按钮添加函数
var i = 0; //总秒数
oStart.onclick = function(){
// alert("开始");
// 开始计数
ID = setInterval(function(){
i++;
// document.title = i;
//将总秒数显示成 时分秒
oSec.innerHTML = doubleNum(i % 60);
oMin.innerHTML = doubleNum(parseInt(i / 60) % 60);
oHour.innerHTML = doubleNum(parseInt(i / 3600));
}, 1000);
}
//封装函数，传入数字，如果不足两位，前面补0
function doubleNum(num){
if(num < 10){
return "0" + num;
}else{
return num;
}
}
oPause.onclick = function(){
clearInterval(ID);
}
oStop.onclick = function(){
//<1>不管是否正在计数，先运行一起取消定时器
clearInterval(ID);
//<2>数据清零
i = 0;
oSec.innerHTML = "00";
oMin.innerHTML = "00";
oHour.innerHTML = "00";
}
</script>
9、innerHTML
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id = "div1"><h2>div内容</h2></div>
</body>
<script>
var oDiv = document.getElementById("div1");
//1、获取访问标签间的内容，包括其中的标签，一起获取
// alert(oDiv.innerHTML);
//2、设置innerHTML，可以改变标签间内容的值，并且文本中含有标签，会自动解析。
oDiv.innerHTML = "<strong>修改的内容</strong>";
</script>
10、字符串方法_重点
字符串：带单引号或双引号的都叫做字符串，在JS中单引号和双引号的作用是一样的，但是不能混用。
【注】字符串无论是object还是string使用起来都没有任何区别。
复合数据类型：数组、函数、对象、日期对象、字符串。
【注】复合数据类型全是对象，万事万物皆对象。都是引用。存储的都是地址。
1、字符串可以通过new运算符声明、
参数：任意数据类型的数据，都会生成一个字符串。
// var str = new String(true);
// alert(typeof str); //object
// alert(str + 1);
2、可以省略new创建字符串
// var str = String(1000);
// alert(str + 22);
// alert(typeof str); //string
3、通过常量赋值
/*var str = "hello";
alert(typeof str);*/
字符串的属性 length
【注】字符串的长度。
var str = "hello";
// alert(str.length);
访问字符串中的某一个字符。
charAt()
格式：字符串.charAt(下标)
返回值：对应下标的字符
// alert(str.charAt(1));
【注】字符串一旦被声明，就没有办法被修改，只读的。如果非要修改，只能讲原字符串销毁，重新赋值。
/*str = "hxllo";
alert(str);*/
【注】字符串可以类似于数组，通过下标访问每一个字符。
var str = "hello";
// alert(str[1]);
// alert(str);
循环输出每一个字符
for(var i = 0; i < str.length; i++){
alert(str[i]);
}
11、字符串方法__重点
charAt()
/*var str = "hello";
alert(str.charAt(1)); //等价
alert(str[1]);*/
charCodeAt()
格式：字符串.charCodeAt(下标)
功能：访问对应下标字符的ASCII码值。
/*var str = "hello";
alert(str.charCodeAt(1));*/
格式：String.fromCharCode()
参数：ASCII码值，个数不定。
返回值：该ASCII码值对应的字符所组成的字符串。
/*var str = String.fromCharCode(97, 101, 102);
alert(str);*/
数字验证码代码：
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
100px;
height: 30px;
background-color: black;
color: white;
text-align: center;
line-height: 30px;
font-size: 18px
}
</style>
<script>
/*
charAt()
*/
/*var str = "hello";
alert(str.charAt(1)); //等价
alert(str[1]);*/
/*
charCodeAt()
格式：字符串.charCodeAt(下标)
功能：访问对应下标字符的ASCII码值。
*/
/*var str = "hello";
alert(str.charCodeAt(1));*/
/*
格式：String.fromCharCode()
参数：ASCII码值，个数不定。
返回值：该ASCII码值对应的字符所组成的字符串。
*/
/*var str = String.fromCharCode(97, 101, 102);
alert(str);*/
/*
封装函数，传入一个n，生成n位数字验证。
*/
function testCode(n){
var arr = []; //用来记录生成的验证码
for(var i = 0; i < n; i++){
var num = parseInt(Math.random() * 10);
arr.push(num);
}
// alert(arr);
return arr.join("");
}
/*var str = testCode(6);
alert(str);*/
</script>
</head>
<body>
<div id = "div1">
</div>
</body>
<script>
var oDiv = document.getElementById("div1");
oDiv.innerHTML = testCode(6);
</script>
带字母的验证码
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
100px;
height: 30px;
background-color: black;
color: white;
text-align: center;
line-height: 30px;
font-size: 18px
}
</style>
<script>
/*
随机带字母的验证码：
关键点：1、先随机ASCII码值
2、再通过ASCII码值转成字母
0-9 a-z A-Z
0-9
a-z 97-122 17-42 + 80
A-Z 65-90
*/
function testCode(n){
var arr = []; //存放随机数
for(var i = 0; i < n; i++){
var tmp = parseInt(Math.random() * 100);
if(tmp >= 0 && tmp <= 9){
arr.push(tmp);
}else if(tmp >= 65 && tmp <= 90){
//大写字母
var bigStr = String.fromCharCode(tmp);
arr.push(bigStr);
}else if(tmp >= 17 && tmp <= 42){
//小写字母
var smallStr = String.fromCharCode(tmp + 80);
arr.push(smallStr);
}else{
//如果随机到没用的数,让他多随机一次
i--;
}
}
return arr.join("");
}
</script>
</head>
<body>
<div id = "div1">
</div>
</body>
<script>
var oDiv = document.getElementById("div1");
oDiv.innerHTML = testCode(6);
</script>
12、字符串方法__重点
concat()
功能：拼接字符串，新生成一个字符串。
格式：字符串1.concat(字符串2)
功能：拼接
/*var str1 = "hello";
var str2 = "world";
// var str = str1.concat(str2);
var str = str1 + str2;
alert(str);
alert(str1);
alert(str2);*/
indexOf()
格式：父字符串.indexOf(子字符串, start);
参数：子字符串 要查找的字符串 start 开始查找的下标
【注】如果start不写的话，默认从下标0开始去查
功能：在父字符串中查子字符串第一次出现的位置，从start开始去查。
返回值：如果没有查找到 -1 如果查找到了是>=0的值。
lastIndexOf()
格式：父字符串.lastIndexOf(子字符串);
功能：查找最后一次出现的位置。
返回值：如果没有查找到 -1 如果查找到了是>=0的值。
/*var supStr = "abcabcabc";
var subStr = "abcd";
var index = supStr.indexOf(subStr);
alert(index);*/
/*var supStr = "abcabcabc";
var subStr = "abc";
var index = supStr.lastIndexOf(subStr);
alert(index);*/
search()
格式：父字符串.search(子字符串/正则表达式);
功能：在父字符串中查找，子字符串第一次出现的位置。
返回值：如果查找不到 -1
【注】正则和字符串的使用方式一致。
var supStr = "Abcabcabc";
// var subStr = "abc";
var subStr = /abc/;
var index = supStr.search(subStr);
alert(index);
13、replace
replace(oldStr, newStr);
格式：父字符串.replace(oldStr, newStr);
功能:用newStr将oldStr替换掉，并且生成新字符串。
通过字符串替换只能替换一个。
通过正则表达式替换所有。
正则表达式
超级字符串
修饰符：g 全局匹配
i 忽略大小写
/*var supStr = "How Are are you!";
// var newStr = supStr.replace("are", "old are");
var newStr = supStr.replace(/are/gi, "old are");
alert(newStr);
alert(supStr);*/
substring()
格式：字符串.substring(start, end)
功能：从提取start到end的字符，生成新字符串。
返回值：提取到的字符串。
/*var str = "helloworld";
var subStr = str.substring(2, 6);
alert(subStr);
alert(str);*/
split
格式：字符串.split(分隔符, 数字)
参数：第一个参数，代表用什么字符串去分割
第二个参数，分割完成以后数组的长度（一般情况下不传）
返回值：装有分割完毕的子串的数组。
字符串 -> 数组 split
数组 -> 字符串 join
/*var str = "This is Tom";
var arr = str.split(" ");
alert(arr);
alert(arr.join("+"))*/
toLowerCase()方法用于把字符串转换成小写
toUpperCase()方法用于把字符串转换成大写
var str = "helloWROLD";
alert(str.toLowerCase());
alert(str.toUpperCase());