【黑马程序员济南】 前端与移动开发就业班笔记DOM讲解Day06
【黑马程序员济南】前端与移动开发就业班笔记
DOM讲解:Day06
日期对象
JavaScript给我们提供了Data日期对象，下面介绍一下Data对象的简单使用。
/*
*@author 传智播客
*/
var date = new Date();//创建日期对象
console.log(date.toDateString());//把Date 对象的日期部分转换为字符串。
console.log(date.toTimeString());//把Date 对象的时间部分转换为字符串。
console.log(date.toLocaleDateString());//根据本地时间格式，把Date 对象的日期部分转换为字符串。
console.log(date.toLocaleTimeString());//本地时间格式，把Date 对象的时间部分转换为字符串。
console.log(typeof date);//Object类型
console.log(date.toString());//可以把日期对象转换成字符串的形式
console.log(date.valueOf());//可以把日期对象转换成数值的形式13位的数字
//从1970-1-1 00:00:00:000 到现在所过去的毫秒数
var date1 = new Date(2015,10,1,10,10,10); //根据指定的日期创建一个时间对象
var date2 = Date.parse("2015-10-1");//返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
console.log(date1);
var date2 = Date.now();//旧版浏览器不支持
console.log(date2);
var date3 = +new Date();//所有浏览器都支持
console.log(date3);学习完Date对象的基本用法，我们利用所学知识，做一个电子表的小案例。
/*
*@author 传智播客
*/
//需求：设置demo的内部文本显示当前时间
var demo = document.getElementById("demo");
//获取当前时间的函数
function clock() {
var d = new Date();//创建日期对象
var hour = d.getHours();//小时
hour = hour < 10 ? "0" + hour : hour;//改善一下格式
var minute = d.getMinutes();//分钟
minute = minute < 10 ? "0" + minute : minute;//改善一下格式
var second = d.getSeconds();//秒钟
second = second < 10 ? "0" + second : second;//改善一下格式
var str = hour + ":" + minute + ":" + second;
demo.innerHTML = str;
}
//clock();
setInterval(clock, 1000);
String对象
我们之前学过基本数据类型中的字符串类型，今天我们学习基本包装类String 对象。
/*
*@author 传智播客
*/
var str = "abc";
console.log(str.length);
var temp = new String(str);//1.创建临时的包装对象
console.log(temp.length);//2.调用临时的包装对象的属性
temp = null;//3.使用完成后对临时对象进行销毁
var bool = false;
var temp = new Boolean(bool);
console.log(!!temp);
console.log(temp);
下面我们学习一下String对象的一些常用方法。
/*
*@author 传智播客
*/
//截取字符串：截取字符串"我爱中华人民共和国"，中的"中华"
var str1 = "我爱中华人民共和国";
console.log(str1.slice(2, 4)); //从start位置开始，截取到end位置，end取不到console.log(str1.substring(2, 4));//从start位置开始，截取到end位置，end取不到console.log(str1.substr(2, 2));//从start位置开始，截取length个字符
//查找元素出现的位置：查找字符串中所有o出现的位置
var str2 = "abcoefoxyozzopp";
/*console.log(str2.indexOf("o", 0));
console.log(str2.indexOf("o", 3 + 1));
console.log(str2.indexOf("o", 6 + 1));
console.log(str2.indexOf("o", 9 + 1));
console.log(str2.indexOf("o", 12 + 1));*/
var index = -1;
do {
index = str2.indexOf("o", index + 1);
console.log(index);
} while (index !== -1);
//字符串替换：把字符串中所有的o替换成!
var str3 = "abcoefoxyozzopp";
console.log(str);
//str3 = str3.replace("o", "!");
//str3 = str3.replace(/o/, "!");
//str3 = str3.replace(/o/g, "!");
do {
str = str3.replace("o", "!");
} while (str3.indexOf("o") !== -1);
console.log(str);
//大小写转换
var str4 = "aBcDeF";
console.log(str4.toUpperCase());
console.log(str4.toLowerCase());
console.log(str4.toLocaleUpperCase());
console.log(str4.toLocaleLowerCase());
学完String对象的基本用法之后我们做两个案例进行巩固一下。
*@author 传智播客
*/
//统计一个字符串中每个字符出现的次数
var str = "abcoefoxyozzopp";
var o = {};
for (var i = 0; i < str.length; i++) {
//var item = str;//每个字符
var item = str.charAt(i);//所有浏览器都支持
if (o[item]) {
//o[item] = o[item] + 1;
o[item]++;//之前出现过就让出现次数加一
} else {
o[item] = 1;//之前没有出现过现在出现了出现次数就是1 }
}
//console.log(o);
for (var k in o) {
console.log(k + "出现了" + o[k] + "次");
}去掉字符串中的空格
/*
*@author 传智播客
//把一个字符串中所有的空格全部去掉" aaa df sdd sds sd "
var str = " aaa df sdd sds sd ";
console.log(str);
//console.log(str.trim());//只能去掉两端的空白符
var arr = str.split(" ");//按照指定字符对字符串进行切割返回一个数组console.log(arr);
console.log(arr.join(""));
函数的两种定义方式
/*
*@author 传智播客
*/
//var fn2 = undefined;
//预解析声明提升变量声明提升函数声明提升
//console.log(fn1(1, 2));//函数声明提升
console.log(fn2);
console.log(fn2(1, 2));//变量声明提升只提升声明不提升赋值
//函数声明
function fn1(a, b) {
return a + b;
}
//函数表达式
var fn2 = function (a, b) {
return a + b;
};
变量的作用域
变量分为全局变量和局部变量，局部变量只能在当前函数内部使用，全局变量在哪儿都能用。
/*
*@author 传智播客
*/
//在最外层声明的变量就是全局变量
var a = "a";//全局变量在哪儿都能用
console.log(a);
function fn() {
console.log(a);
}
fn();
function fn1() {
var b = "b";//在函数内部声明的变量是局部变量
//局部变量只能在当前函数内部使用
console.log(b);
c = "c";//在函数内部没有加var声明的变量是全局变量
console.log(c);
}
fn1();
//console.log(b);//报错
console.log(c);
作用域链
/*
*@author 传智播客
*/
//作用域链
//1全局变量解析器先在函数内部作用域寻找name1的声明，如果找不到，就会向上级作用域中寻找变量name1
/*var name1 = "zs";
function f1() {
name1 = "ls";
}
f1();
console.log(name1);//ls*/
//2局部变量解析器先在函数内部的作用域寻找name2的声明，如果找到就使用局部变量
/*var name2 = "zs";
function f2() {
var name2 = "ls";
}
f2();
console.log(name2);//zs*/
//3作用域链
/*var color = "red";
function outer() {
var anotherColor = "blue";
function inner() {
var tmpColor = color;
color = anotherColor;
anotherColor = tmpColor;
console.log(anotherColor);//red
}
inner();
}
outer();
console.log(color);//blue*/
//4作用域链所谓的不加var就是全局变量其实并不准确var name3 = "zs";
function f3() {
var name3 = "ls";
function f4() {
name3 = "ww";
}
f4();
console.log(name3);//ww
}
f3();
console.log(name3);//zs
如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友，那就快来吧！
黑马程序员济南中心联系电话：0531-********