JavaScript 基础(三) - Date对象，RegExp对象，Math对象，Window 对象，History 对象，Location 对象，DOM 节点
程序员文章站
2022-04-15 17:18:21
Date对象 创建Date对象 Date对象的方法—获取日期和时间 显示当前时间 History 对象 history_1.html history_2.html 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 // 上一个兄弟标签元素
<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> 上一篇： 初识HTML