- 【融职培训】Web前端学习 第3章 JavaScript基础教程
- 【融职培训】Web前端学习 第3章 JavaScript基础教程
- 【融职培训】Web前端学习 第3章 JavaScript基础教程
- 【融职培训】Web前端学习 第3章 JavaScript基础教程
- 【融职培训】Web前端学习 第3章 JavaScript基础教程
- 【融职培训】Web前端学习 第3章 JavaScript基础教程
- 【融职培训】Web前端学习 第3章 JavaScript基础教程
- 【融职培训】Web前端学习 第3章 JavaScript基础教程
- 【融职培训】Web前端学习 第3章 JavaScript基础教程
- 【融职培训】Web前端学习 第3章 JavaScript基础教程
一、内置对象概述
javascript为我们提供了很多内置对象,这些内置对象为我们提供了很多语言的基本功能。我们之前学过的数组就是JavaScript的内置对象,除了数组我们还应该了解的内置对象有:Math、Date、RegExp。
需要说明的是document对象是DOM提供的对象,不属于JavaScript内置对象,window对象是BOM中的对象,同样不属于JavaScript内置对象。
二、Math
Math对象不像数组那样需要我们手动去创建,我们在JavaScript程序中直接写Math代表的就是Math对象。我们可以通过Math对象直接获取圆周率
1varpi = Math.PI;2console.log(pi);
Math对象提供了很多方法来简化我们的数学运算,下面简单列举几个方法
1varpi = Math.PI; 2varnum1 = Math.floor(pi);//向下取整 3varnum2 = Math.ceil(pi);//向上取整 4varnum3 = Math.round(pi);//四舍五入 5varnum4 = Math.abs(-pi);//获取绝对值 6varnum5 = Math.random();//获取0~1之间的随机数 7console.log(num1); 8console.log(num2); 9console.log(num3);10console.log(num4);11console.log(num5);
在Math对象的方法中,floor和random两个方法比较常用,我们可以通过这两个方法获取我们想要的随机数范围。例如我们想要1~10的随机数,代码如下
1varnumber = Math.floor(Math.random()*10 + 1);2console.log(number);
下面我们来实现一个猜数字的游戏,JavaScript随机生成一个1~100之间的数字,我们通过文本输入框输入我们所猜的数字,猜的数字不管是大于结果,还是小于结果,还是等于结果,都会有相应的提示
代码如下
1 2猜数字 3 4vartarget = Math.floor(Math.random()*100+1);//生成1~100的随机数。 5varbtn = document.querySelector("#guess"); 6varnumber = document.querySelector("#number"); 7btn.onclick =function(){ 8varvalue = Number(number.value); 9if(value > target){10alert("大于结果");11}elseif(value
三、Date
Date对象是JavaScript用于处理日期和时间的对象,我们可以通过Date对象获取当前的时间,需要说明的是Date对象获取的时间是本机的时间
1vardateNow =new Date(); 2varyear = dateNow.getFullYear();//获取年,不能用getYear()方法,此方法已经被废弃 3varmonth = dateNow.getMonth();//获取月份 从0开始,一月份返回的值是0 4vardate = dateNow.getDate();//获取日期 5varhours = dateNow.getHours();//获取小时 6varminutes = dateNow.getMinutes();//获取分钟 7varseconds = dateNow.getSeconds();//获取秒 8varday = dateNow.getDay();//获取星期 9console.log(year);10console.log(month);11console.log(date);12console.log(hours);13console.log(minutes);14console.log(seconds);15console.log(day);
我们可以通过JavaScript将当前的时间显示在网页上
1varh1 = document.querySelector("h1");2vardateNow =new Date();3varhours = dateNow.getHours(); 4varminutes = dateNow.getMinutes(); 5varseconds = dateNow.getSeconds(); 6varstrTimeNow = hours + ":" + minutes + ":" + seconds;7h1.innerHTML = strTimeNow;
上面的例子我们成功将当前的日期显示在h1标签中,但是我们显示的时间是获取的那个时间点,显示的时间是静止不动的,我们可以通过计时器方法让我们显示的时间与实际时间同步
1varh1 = document.querySelector("h1"); 2function getTime(){ 3vardateNow =new Date(); 4varhours = dateNow.getHours(); 5varminutes = dateNow.getMinutes(); 6varseconds = dateNow.getSeconds(); 7varstrTimeNow = hours + ":" + minutes + ":" + seconds; 8h1.innerHTML = strTimeNow; 9}10getTime();11setInterval(getTime,1000);
我们将过去时间的代码放到了一个函数中,然后通过计时器方法每秒执行一次这个函数,这样我们显示出来的日期就想电子钟一样每秒与真实事件同步一次。
我们还可以通过参数创建一个指定时间的日期对象,我们修改一下
1vardateNow =newDate("2017-5-1 17:30:20");//创建指定日期和时间的对象2varyear = dateNow.getFullYear(); 3varmonth = dateNow.getMonth(); 4vardate = dateNow.getDate(); 5varhours = dateNow.getHours(); 6varminutes = dateNow.getMinutes(); 7varseconds = dateNow.getSeconds(); 8varday = dateNow.getDay();
我们在编写程序的时候,有的时候会希望获取一个唯一的时间点,我们可以使用getTime方法或得。
示例代码如下
1vardateTarget =newDate("2017-5-1 17:30:20");2vardateNow =new Date();3vartarget = dateTarget.getTime();4varnow = dateNow.getTime();5console.log(target);6console.log(now);
通过getTime方法可以获取时间戳,时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总毫秒数,我们可以用时间戳表示一个不会重复的时间点。
课后练习
制作一个倒计时的功能,要求如下:
计算距离指定日期还有多少天,多少小时,多少分钟,多少秒。
在控制台输出这个时间。
网友评论