【融职培训】Web前端学习 第3章 JavaScript基础教程9 内置对象
一、内置对象概述
javascript为我们提供了很多内置对象,这些内置对象为我们提供了很多语言的基本功能。我们之前学过的数组就是JavaScript的内置对象,除了数组我们还应该了解的内置对象有:Math、Date、RegExp。
需要说明的是document对象是DOM提供的对象,不属于JavaScript内置对象,window对象是BOM中的对象,同样不属于JavaScript内置对象。
二、Math
Math对象不像数组那样需要我们手动去创建,我们在JavaScript程序中直接写Math代表的就是Math对象。我们可以通过Math对象直接获取圆周率
1 var pi = Math.PI;
2 console.log(pi);
Math对象提供了很多方法来简化我们的数学运算,下面简单列举几个方法
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的随机数,代码如下
1 var number = Math.floor(Math.random()*10 + 1);
2 console.log(number);
下面我们来实现一个猜数字的游戏,JavaScript随机生成一个1~100之间的数字,我们通过文本输入框输入我们所猜的数字,猜的数字不管是大于结果,还是小于结果,还是等于结果,都会有相应的提示
代码如下
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对象获取的时间是本机的时间
1 var dateNow = new Date();2 var year = dateNow.getFullYear(); //获取年,不能用getYear()方法,此方法已经被废弃3 var month = dateNow.getMonth(); //获取月份 从0开始,一月份返回的值是04 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将当前的时间显示在网页上
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标签中,但是我们显示的时间是获取的那个时间点,显示的时间是静止不动的,我们可以通过计时器方法让我们显示的时间与实际时间同步
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);
我们将过去时间的代码放到了一个函数中,然后通过计时器方法每秒执行一次这个函数,这样我们显示出来的日期就想电子钟一样每秒与真实事件同步一次。
我们还可以通过参数创建一个指定时间的日期对象,我们修改一下
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方法或得。
示例代码如下
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秒)起至现在的总毫秒数,我们可以用时间戳表示一个不会重复的时间点。
课后练习
制作一个倒计时的功能,要求如下:
- 计算距离指定日期还有多少天,多少小时,多少分钟,多少秒。
- 在控制台输出这个时间。
【融职教育】在工作中学习,在学习中工作
【融职培训】Web前端学习 第3章 JavaScript基础教程9 内置对象相关推荐
- 【融职培训】Web前端学习 第3章 JavaScript基础教程18 BOM概述
一.概述 <javaScript高级程序设计>这本书讲过: javaScript = ECMAScript + DOM + BOM. DOM:文档对象模型(document对象) BOM: ...
- 【融职培训】Web前端学习 第7章 Vue基础教程4 组件传值
一.组件传值的三种情况 我们可以把组件之间的数据传递分为三种情况: 父级向子级传递数据 子级向父级传递数据 非父子级传递数据 二.父级向子级传值 父级可以通过属性向自己传递数据,示例代码如下所示: 1 ...
- Web前端开发精品课HTML CSS JavaScript基础教程JavaScript部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结 第24章 JavaScript简介 1.HTML是网页的结构,CSS是网页的外观,而JavaScript是网 ...
- Web前端开发精品课HTML CSS JavaScript基础教程HTML部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结 第1章 HTML简介 1.前端技术简介 (1)从Web1.0到Web2.0,网页制作已经变成前端开发了. ...
- Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结 第11章 CSS简介 1.HTML是网页的结构,CSS是网页的外观,JavaScript是网页的行为. 2. ...
- Web前端开发精品课HTML CSS JavaScript基础教程第五章课后编程题答案
编程题: 图5-15所示为一个问卷调查的网页,请制作出来.要求:大标题用h1标签:小题目用h3标签:前两个问题使用有序列表:最后一个问题使用无序列表. 用VS2013新建ASP.NET空网站,添加新项 ...
- Web前端开发精品课HTML CSS JavaScript基础教程第十四章课后编程题答案
编程题: 下面有一段代码,请在这段代码的基础上使用正确的选择器以及这两章学到的字体样式.文本样式来实现图14-13所示的效果. <!DOCTYPE html> <html> & ...
- Web前端开发精品课HTML CSS JavaScript基础教程第六章课后编程题答案
编程题: 利用这样一章学到的知识,制作如图6-10所示的表格效果,并且要求代码语义化. 用VS2013新建ASP.NET空网站,添加新项,建立HTML文件,向其加入以下代码: <!DOCTYPE ...
- Web前端开发精品课HTML CSS JavaScript基础教程第四章课后编程题答案
编程题 利用这一章学到的各种文本标签,把图4-25所示的网页效果做出来. 用VS2013新建ASP.NET空网站,添加新项,建立HTML文件,向其加入以下代码: <!DOCTYPE html&g ...
最新文章
- 学校计算机机房好处,浅谈学校计算机机房维护
- swift 多线程GCD和延时调用
- 测试机房质量之上传下载速率测试
- MongoDB numa系列问题一:[initandlisten] connection refused because too many open connections:
- 字节/阿里/ 百度2021年Java岗发布+最新内部面试题
- 全球地区资料json 含中英文 经纬度_[喵咪软件推荐(1)]全球国家信息库
- python中shutil模块的用法_python中的os,shutil模块的定义以及用法
- 返回固定数据的web服务器
- websocket php apache,PHP第一篇:PHP WebSocket实现前后端数据交互,亲测可用(windows+ apache2.4 +php5.6 )...
- Win8 内置游戏应用更新 中文翻译错误得以修正
- 阿里巴巴java开发手册心得_阿里巴巴JAVA开发手册总结
- linux下调用扫描仪sane协议
- JavaScript的prototype是什么?
- 微信公众号小程序开通方法_微信小程序发布审核大概要多久
- Mysql必知必会概要总结
- python_pdf常规使用
- 个人关于工作上的一点建议
- 支付宝支付 62009
- GPS从入门到放弃(三)、GPS坐标系
- 分形几何python代码_Python教程之绘制Mandelbrot集合