当前位置: 移动技术网 > IT编程>开发语言>JavaScript > JavaScript 基础(三) - Date对象,RegExp对象,Math对象,Window 对象,History 对象,Location 对象,DOM 节点

JavaScript 基础(三) - Date对象,RegExp对象,Math对象,Window 对象,History 对象,Location 对象,DOM 节点

2019年01月25日  | 移动技术网IT编程  | 我要评论
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>

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网