JavaScript 基础(三) - Date对象，RegExp对象，Math对象，Window 对象，History 对象，Location 对象，DOM 节点
Date对象
创建Date对象
//方法1：不指定参数
var date_obj = new Date();
alert(date_obj.toLocaleString())
//方法2：参数为日期字符串
var date_obj2 = new Date("2019/01/21 15:14");
var date_obj3 = new Date("2019 01 21 15:14");
alert(date_obj2.toLocaleString());
alert(date_obj3.toLocaleString());
//方法3：参数为毫秒数
var date_obj4 = new Date(5000);
alert(date_obj4.toLocaleString());
alert(date_obj4.toUTCString());
Date对象的方法—获取日期和时间
var date_obj = new Date();
console.log(date_obj.getFullYear()); // 获取完整年份
console.log(date_obj.getMonth()); // 获取月（0-11）
console.log(date_obj.getDate()); // 获取日
console.log(date_obj.getDay()); // 获取星期
console.log(date_obj.getHours()); // 获取小时
console.log(date_obj.getMinutes()); // 获取分钟
console.log(date_obj.getSeconds()); // 获取秒
console.log(date_obj.getMilliseconds()); // 获取毫秒
显示当前时间
function getTime(){
var date_obj = new Date();
var year = date_obj.getFullYear();
var month = date_obj.getMonth();
var day = date_obj.getDate();
var hour = date_obj.getHours();
var minute = date_obj.getMinutes();
var seconds = date_obj.getSeconds();
var week = date_obj.getDay();
return year+"年"+f2(month)+"月"+f(day)+"日"+" "+hour+": "+minute+": "+seconds+" "+num_week(week);
}
alert(getTime())
function num_week(n){
week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
return week[n]
}
function f(num){
if (num<10){
return "0"+num;
}
return num;
}
function f2(num){
return num+1;
}
RegExp对象
// 方式一：
var re_obj = new RegExp("\d+", "g");
alert(re_obj.test("asdf324lsdk"));
// 方式二：
var re_obj2 = /\d+/g;
alert(re_obj2.test("asdf324lsdk"));
// match 取出所有匹配的内容放到数组里；search 取出第一个结果的索引值。
var s = "hello545sg455";
alert(s.match(/\d+/g));
alert(s.search(/\d+/g));
// split 取出第一个结果的索引值；replace 取出第一个结果的索引值。
var s = "hello545sg455";
alert(s.split(/\d+/g));
alert(s.replace(/\d+/g, "*"));
Math对象
该对象中的属性方法和数学有关。
// 获得随机数 0~1 不包括1
alert(Math.random());
// 四舍五入
alert(Math.round(2.3));
// 返回 2 的 4 次幂。
alert(Math.pow(2,4));
Window 对象
// 显示带有一段消息以及确认按钮和取消按钮的对话框。
var ret=confirm("内容是否保存");
alert(ret);
// 显示可提示用户输入的对话框。
var ret=prompt("hello");
alert(ret);
setInterval()： 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()：取消由 setInterval() 设置的 timeout。
clearTimeout()：取消由 setTimeout() 方法设置的 timeout。
setTimeout()： 在指定的毫秒数后调用函数或计算表达式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="clock" style="width: 249px">
<input type="button" value="begin" onclick="begin_click()">
<input type="button" value="End" onclick="End()">
<input type="button" value="timeout" onclick="f1()">
<script>
function Timeout(){
alert(123);
}
function f1(){
var ID=setTimeout(Timeout, 1000);
clearTimeout(ID);
}
function begin(){
var stime = getTime();
var ret=document.getElementById("clock");
ret.value=stime;
}
var ID;
function begin_click(){
if (ID==undefined){
begin();
ID = setInterval(begin, 1000);
}
}
function End(){
clearInterval(ID);
ID=undefined;
}
function getTime(){
var date_obj = new Date();
var year = date_obj.getFullYear();
var month = date_obj.getMonth();
var day = date_obj.getDate();
var hour = date_obj.getHours();
var minute = date_obj.getMinutes();
var seconds = date_obj.getSeconds();
var week = date_obj.getDay();
return year+"年"+f2(month)+"月"+f(day)+"日"+" "+hour+": "+minute+": "+seconds+" "+num_week(week);
}
function num_week(n){
week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
return week[n]
}
function f(num){
if (num<10){
return "0"+num;
}
return num;
}
function f2(num){
return num+1;
}
</script>
</body>
</html>
History 对象
back() // 加载 history 列表中的前一个 URL。
forward() // 加载 history 列表中的下一个 URL。
go() // 加载 history 列表中的某个具体页面。
history_1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="前进" onclick="func1();">
<a href="histroy_2.html">lesson2</a>
<script>
func1(){
history.forward();
//history.go(1);
}
</script>
</body>
</html>
history_2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="后退" onclick="func2();">
<script>
function func2(){
history.back();
//history.go(-1);
}
</script>
</body>
</html>
Location 对象
reload() // 重新加载当前文档。
href //设置或返回完整的 URL。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="重载" onclick="location.reload();">
<input type="button" value="百度" onclick="location.href='http://www.baidu.com'">
</body>
</html>
DOM 节点
节点(自身)属性:
attributes // 节点（元素）的属性节点
nodeType // 节点类型。以数字值返回指定节点的节点类型。如节点是元素节点，则返回 1；如节点是属性节点，则返回 2。
nodeValue // 节点值
nodeName // 节点名称
innerHTML // 节点（元素）的文本值
导航属性:
parentNode // 节点（元素）的父节点 (推荐)
firstChild // 节点下第一个子元素
lastChild // 节点下最后一个子元素
childNodes // 节点（元素）的子节点
推荐导航属性：
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
通过 Id 定位 HTML 元素
<div id="div1">
<div>hello div</div>
<p>hello p</p>
</div>
<script>
var ele = document.getElementById("div1");
console.log(ele.nodeName);
console.log(ele.nodeType);
console.log(ele.nodeValue);
</script>
<div id="div1">
<div>hello div</div>
<p>hello p</p>
</div>
<script>
var ele = document.getElementById("div1");
var ele3 = ele.parentNode;
alert(ele3.nodeName);
</script>
<div id="div1">
<div>hello div</div>
<p>hello p</p>
</div>
<script>
var ele = document.getElementById("div1");
var ele_son = ele.firstElementChild;
var ele_son2 = ele.lastElementChild;
alert(ele_son.nodeName);
alert(ele_son2.nodeName);
</script>
<div id="div1">
<div>hello div</div>
<p>hello p</p>
</div>
<script>
var ele = document.getElementById("div1").firstElementChild;
var sib = ele.nextElementSibling;
alert(ele);
alert(sib.nodeName);
</script>
通过 ClassName 定位 HTML 元素
<div id="div1"> hello
<div class="div2">hello 2</div>
<div class="div3">hello 3</div>
</div>
<script>
var ele = document.getElementsByClassName("div2")[0];
var ele2 = ele.nextElementSibling;
alert(ele2.nodeName);
</script>
通过 tag 定位 HTML 元素
<div id="div1"> hello
<div class="div2">hello 2</div>
<div class="div3">hello 3</div>
<p>hello p</p>
</div>
<script>
var tag = document.getElementsByTagName("p");
alert(tag[0].innerHTML);
</script>
局部定位 HTML 元素
1.局部查找可以通过 getElementsByClassName() 和 getElementsByTagName() 方法
2.局部查找不可以通过getElementsByName() 和 getElementById() 方法
<div id="div1"> hello
<div class="div2">hello 2</div>
<div class="div3" name="klvchen">hello 3
<p>hello inner</p>
</div>
<p>hello p</p>
</div>
<script>
var ele = document.getElementsByClassName("div3")[0];
var ele2 = ele.getElementsByTagName("p")[0];
alert(ele2.innerHTML);
</script>
JavaScript 基础(三) - Date对象，RegExp对象，Math对象，Window 对象，History 对象，Location 对象，DOM 节点的更多相关文章
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- JavaScript中的Date，RegExp，Function对象
Date对象 创建Date对象 //方法1:不指定参数var nowd1=new Date();alert(nowd1.toLocaleString( ));//方法2:参数为日期字符串var now ...
- JavaScript 基础三
遍历对象的属性 for...in 语句用于对数组或者对象的属性进行循环操作. for (变量 in 对象名字) { 在此执行代码 } 这个变量是自定义 符合命名规范 但是一般我们 都写为 k 或则 k ...
- JavaScript基础三
1.10 关于DOM的事件操作 1.10.1 JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数. ...
- JS浏览器对象：window对象、History、Location对象、Screen对象
一.JS浏览器对象-window 1.window对象 window对象是BOM的核心,window对象指当前的浏览器窗口 所有JavaScript全局对象.函数以及变量均自动成为window对象的成 ...
- JS---BOM基本知识 (顶级对象，系统对话框，加载事件，location对象, history对象, navigator对象)
BOM JavaScript分三个部分: 1. ECMAScript标准---基本语法 2. DOM--->Document Object Model 文档对象模型,操作页面元素的 3. BOM ...
- JavaScript 基础(三) 对象 条件判断
JavaScript的对象是一种无序的集合数据类型,它是由若干键对组成. var guagua = { name:'瓜瓜', birth:1988, school:'No.1 Middle Schoo ...
- Javascript基础三（函数）
函数第一节: 1.函数的概念及作用 函数是由事件驱动的或者当他被调用时可执行的可重复使用的代码块. 具备一点功能的代码段,代码段来实现具体的功能.要想实现一个函数的功能需要对函数进行调用. ...
- JavaScript 基础回顾——对象
JavaScript是基于对象的解释性语言,全部数据都是对象.在 JavaScript 中并没有 class 的概念,但是可以通过对象和类的模拟来实现面向对象编程. 1.对象 在JavaScript中 ...
随机推荐
- js高级笔记
定时器this指向window javascript 的执行过程 预解析(变量) 数据集和功能集---- 对象 对象----属性和方法 -------------------面向对象--------- ...
- Day4:html和css
Day4:html和css 规范注意 链接里面不能再放链接. a里面可以放入块级元素. 空格规范 选择器与{之间必须包含空格. 如: .class {} 属性名与之后的:符号之间不允许包含空格, 而: ...
- Linux 网络工具详解之 ip tuntap 和 tunctl 创建 tap/tun 设备
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 在前面一篇文章 ...
- 剑指offer【06】- 旋转数组的最小数字(java)
题目:旋转数组的最小数字 考点:查找和排序 题目描述:把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4, ...
- MyEclipse中JavaMail冲突问题
MyEclipse中的JavaEE5中的mail包中只有接口,而没有实现,所以不能使用 会抛出:java.lang.NoClassDefFoundError: com/sun/mail/util/BE ...
- sql server 索引阐述系列二 索引存储结构
一.概述. "流光容易把人抛,红了樱桃,绿了芭蕉“ 转眼又年中了,感叹生命的有限,知识的无限.在后续讨论索引之前,先来了解下索引和表数据的内部结构,这一节将介绍页的存储,页分配单元类型,区的 ...
- Android--使用剪切板在Activity中传值
在Activity之间传递数据还可以利用一些技巧,不管windows还是Linux操作系统,都会支持一种叫剪切板的技术,也就是某一个程序将一些数据复制到剪切板上,然后其他的任何程序都可以从剪切板中获取 ...
- 在微信小程序中使用图表
前言:网上有许多的图表库,如:Echarts.Tau Charts.ChartJS等等,具体自行百度. 这次我们使用的是:Echarts 官方教程:点击查看 Echarts下载地址:飞机直达 1.下载 ...
- SpringCloud各个组件说明
对于SpringCloud来说,首先我们需要认识一些基本的组件,这会让我们之后的讨论和交流更有效率. 组件名字和发音 如果你都不知道别人再说什么,或者别人都不知道你再讲什么,就很尴尬了. Eureka ...
- Long类型时间如何转换成视频时长？
数据库中存放的视频时长是一个Long类型的毫秒/秒时间,现在需要把这个时间转换成标准的视频时长格式,在我看来这应该是一个很常用的转化有一个很常用的转换方法工具才对,可是我百度找了许久,没有一个简单直观 ...