前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Web前端学习 第3章 JavaScript基础教程9 内置对象

Web前端学习 第3章 JavaScript基础教程9 内置对象

原创
作者头像
学习猿地
修改2020-06-16 14:29:56
4940
修改2020-06-16 14:29:56
举报
文章被收录于专栏:学习猿地

一、内置对象概述

javascript为我们提供了很多内置对象,这些内置对象为我们提供了很多语言的基本功能。我们之前学过的数组就是JavaScript的内置对象,除了数组我们还应该了解的内置对象有:Math、Date、RegExp。

需要说明的是document对象是DOM提供的对象,不属于JavaScript内置对象,window对象是BOM中的对象,同样不属于JavaScript内置对象。

二、Math

Math对象不像数组那样需要我们手动去创建,我们在JavaScript程序中直接写Math代表的就是Math对象。我们可以通过Math对象直接获取圆周率

代码语言:javascript
复制
1 var pi = Math.PI;
2 console.log(pi);

Math对象提供了很多方法来简化我们的数学运算,下面简单列举几个方法

代码语言:javascript
复制
 1 var pi = Math.PI;   
 2 var num1 = Math.floor(pi);  //向下取整
 3 var num2 = Math.ceil(pi);   //向上取整
 4 var num3 = Math.round(pi);  //四舍五入
 5 var num4 = Math.abs(-pi);   //获取绝对值
 6 var num5 = Math.random();   //获取0~1之间的随机数
 7 console.log(num1);
 8 console.log(num2);
 9 console.log(num3);
10 console.log(num4);
11 console.log(num5);

在Math对象的方法中,floor和random两个方法比较常用,我们可以通过这两个方法获取我们想要的随机数范围。例如我们想要1~10的随机数,代码如下

代码语言:javascript
复制
1 var number = Math.floor(Math.random()*10 + 1);
2 console.log(number);

下面我们来实现一个猜数字的游戏,JavaScript随机生成一个1~100之间的数字,我们通过文本输入框输入我们所猜的数字,猜的数字不管是大于结果,还是小于结果,还是等于结果,都会有相应的提示 代码如下

代码语言:javascript
复制
 1 <input type="text" id="number">
 2 <button id="guess">猜数字</button>
 3 <script>
 4     var target = Math.floor(Math.random()*100+1); //生成1~100的随机数。
 5     var btn = document.querySelector("#guess");
 6     var number = document.querySelector("#number");
 7     btn.onclick = function(){
 8         var value = Number(number.value);
 9         if(value > target){
10             alert("大于结果");
11         }else if(value < target){
12             alert("小于结果");
13         }else if(value === target){
14             alert("回答正确");
15         }
16     }
17 </script>

三、Date

Date对象是JavaScript用于处理日期和时间的对象,我们可以通过Date对象获取当前的时间,需要说明的是Date对象获取的时间是本机的时间

代码语言:javascript
复制
 1 var dateNow = new Date();
 2 var year = dateNow.getFullYear();    //获取年,不能用getYear()方法,此方法已经被废弃
 3 var month = dateNow.getMonth();      //获取月份 从0开始,一月份返回的值是0
 4 var date = dateNow.getDate();        //获取日期
 5 var hours = dateNow.getHours();      //获取小时
 6 var minutes = dateNow.getMinutes();  //获取分钟
 7 var seconds = dateNow.getSeconds();  //获取秒
 8 var day = dateNow.getDay();          //获取星期
 9 console.log(year);
10 console.log(month);
11 console.log(date);
12 console.log(hours);
13 console.log(minutes);
14 console.log(seconds);
15 console.log(day);

我们可以通过JavaScript将当前的时间显示在网页上

代码语言:javascript
复制
1 var h1 = document.querySelector("h1");
2 var dateNow = new Date();
3 var hours = dateNow.getHours();      
4 var minutes = dateNow.getMinutes();  
5 var seconds = dateNow.getSeconds(); 
6 var strTimeNow = hours + ":" + minutes + ":" + seconds;
7 h1.innerHTML = strTimeNow;

上面的例子我们成功将当前的日期显示在h1标签中,但是我们显示的时间是获取的那个时间点,显示的时间是静止不动的,我们可以通过计时器方法让我们显示的时间与实际时间同步

代码语言:javascript
复制
 1 var h1 = document.querySelector("h1");
 2 function getTime(){     
 3     var dateNow = new Date();
 4     var hours = dateNow.getHours();      
 5     var minutes = dateNow.getMinutes();  
 6     var seconds = dateNow.getSeconds(); 
 7     var strTimeNow = hours + ":" + minutes + ":" + seconds;
 8     h1.innerHTML = strTimeNow;
 9 }
10 getTime();
11 setInterval(getTime,1000);

我们将过去时间的代码放到了一个函数中,然后通过计时器方法每秒执行一次这个函数,这样我们显示出来的日期就想电子钟一样每秒与真实事件同步一次。

我们还可以通过参数创建一个指定时间的日期对象,我们修改一下

代码语言:javascript
复制
1 var dateNow = new Date("2017-5-1 17:30:20");  //创建指定日期和时间的对象
2 var year = dateNow.getFullYear();   
3 var month = dateNow.getMonth();     
4 var date = dateNow.getDate();       
5 var hours = dateNow.getHours();      
6 var minutes = dateNow.getMinutes(); 
7 var seconds = dateNow.getSeconds(); 
8 var day = dateNow.getDay();

我们在编写程序的时候,有的时候会希望获取一个唯一的时间点,我们可以使用getTime方法或得。 示例代码如下

代码语言:javascript
复制
1 var dateTarget = new Date("2017-5-1 17:30:20");
2 var dateNow = new Date();
3 var target = dateTarget.getTime();
4 var now = dateNow.getTime();
5 console.log(target);
6 console.log(now);

通过getTime方法可以获取时间戳,时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总毫秒数,我们可以用时间戳表示一个不会重复的时间点。

课后练习

制作一个倒计时的功能,要求如下:

  1. 计算距离指定日期还有多少天,多少小时,多少分钟,多少秒。
  2. 在控制台输出这个时间。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、内置对象概述
  • 二、Math
  • 三、Date
  • 课后练习
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档