8、日期对象和字符串

1、对象语法

对象语法：
1、new 创建对象
【注】格式： 对象.属性
      对象.函数名
【注】对象通过下标访问，一定要传字符串。
2、省略new创建对象

            // var car = new Object();
            // var car = Object();
            /*var car = {};
            //<1>添加属性和函数
            //属性  
            car.name = "凯迪拉克";
            // car.color = "red";
            car["color"] = "red";
            //功能 => 函数
            car.run = function(){
                alert("跑的非常的块");
            }*/

            var car = {
                name: "凯迪拉克",
                age: 18,
                run: function(){
                    alert("跑的块");
                }
            }

            alert(car.name);

            //删除某一个属性
            delete car.name;
            alert(car.name);

            alert(car.color);

            //调用
            car.run();

2、日期对象

对象：JS中万事万物皆对象。
面试官：举例。
时间也是对象。

1、不传参数的时候，默认获取的时当前系统时间。
var d = new Date();

    Wed May 23 2018 09:29:01 GMT+0800 (CST)
                北京： 东八区
                GMT  格林尼治

2、可以传参
<1>"2018/05/22" 　　加引号
<2>"2018-05-22"　　 加引号
<3>2016,04,13,14,34,50
<4>毫秒数 1秒 = 1000毫秒

var d = new Date();
简写后面获取年月日等不好使
var d = Date();
alert(d);

            /*var d = new Date("2018/05/22");
            alert(d);*/

            //Tue May 22 2018 08:00:00 GMT+0800 (CST)
            /*var d = new Date("2018-05-22");
            alert(d);*/

            /*var d = new Date(2016,04,13,14,34,50);
            alert(d); //Fri May 13 2016 14:34:50 GMT+0800 (CST)*/


            //Thu Jan 01 1970 08:00:01 GMT+0800 (CST)
            /*
                毫秒数，用这个毫秒数从1970年1月1日0时0分0秒为参照点，进行计算，过了这个毫秒数的时候。

                1970 unix诞生日 世界上第一个操作系统。
            */
            /*var d = new Date(1000);
            alert(d);*/

            var d = new Date();
            /*
                输出日期对象的形式。
            */
            alert(d.toLocaleDateString());//本地日期转成字符串输出年月日
            alert(d.toLocaleTimeString());//本地时间转成字符串输出时分秒

3、日期对象方法

Date.parse()
   格式:
     Date.parse()
  日期字符串 "2015-08-22"
  返回值：毫秒数

功能：将日期传进行，计算该日期到1970年的毫秒数

            var time = Date.parse("2015-08-22");
             alert(time);
            var d = new Date(time);
            alert(d);

日期对象的方法
   d是日期对象
  d.getTime();
  获取该日期对象距离1970年的毫秒数
  返回值：毫秒数
  d.setTime();

        设置距离1970年的毫秒数      
            var d = new Date();
            // alert(d.getTime());
            d.setTime(1000);
            alert(d);

set/getDate() 从Date对象中返回一个月中的某一天(1~31)
getDay() 从Date对象返回一周中的某一天(0~6)
set/getMonth() 从Date对象中返回月份(0~11)
set/getFullYear() 从Date对象以四位数返回年份
set/getHours() 返回Date对象的小时(0~23)
set/getMinutes() 返回Date对象的分钟(0~59)
set/getSeconds() 返回Date对象的秒数(0~59)
set/getMilliseconds()返回Date对象的毫秒
set/getTime() 返回1970年1月1日至今的毫秒数
getTimezoneOffset() 返回本地时间与格林威治标准时间(GMT)的分钟差

4、强调日期函数细节

/
getMonth() 【注】月份 0~11月
返回值：月份
/

var d = new Date();
            // var res = d.getMonth();
            // alert(d.getMonth()); //获取月份
            d.setMonth(5); //重设月份
            alert(d);

/
getDay() 【注】星期几
只能获取
/

            var d = new Date("2018-05-27");
            alert(d.getDay());

5、显示当前年月日，星期，时分秒。

1、显示当前时间

                function showTime(){
                //<1>获取当前时间
                var d = new Date();
                //<2> 2018年5月23日 星期三 10:47:50
                var year = d.getFullYear();
                var month = d.getMonth() + 1;
                var date = d.getDate();

                var hour = d.getHours();
                var min = d.getMinutes();
                var sec = d.getSeconds();

                var week = d.getDay();
                week = numToChinese(week);

                //<3>进行字符串拼接
                var str = year + "年" + month + "月" + date + "日" + " 星期" + week + " " + hour + ":" + min + ":" + sec;
                return str;
            }


            //数字和中文互换  传入数字  传出中文
            function numToChinese(num){
                var charStr = "";
                switch(num){
                    case 1:
                        charStr = "一";
                        break;
                    case 2:
                        charStr = "二";
                        break;
                    case 3:
                        charStr = "三";
                        break;
                    case 4:
                        charStr = "四";
                        break;
                    case 5:
                        charStr = "五";
                        break;
                    case 6:
                        charStr = "六";
                        break;
                    case 0:
                        charStr = "日";
                        break;
                    default:
                        alert("error");
                        break;
                }
                return charStr;
            }


            var res = showTime();
            

2、拓展：实现计时，记录时间(获取当前的时间,开始计时,计时过程相当于你的手机时钟)xxxx年xx月xx日 xx时xx分xx秒

    <body>
        <div id = "div1"></div>
    </body>
    <script>
        var oDiv = document.getElementById("div1");
        oDiv.innerHTML = showTime();
        //启动定时器
        setInterval(function(){
            oDiv.innerHTML = showTime();
        }, 1000);
    </script>

6、练习

    1、复合数据类型：数组 函数 对象 日期对象
        
                <1>获取当前时刻
                <2>getDate()
                   setDate(23 + 10)
        
        var d = new Date();
        function dateAdd(n){
            var date = d.getDate();
            d.setDate(date + n);
            alert(d);
        }
        dateAdd(10);
    

        
    2、判断两个日期相差的天数
                2018-05-20
                2018-04-10
                参照时间点： 1970
                
            function getNumOfDate(date1, date2){
                //1、找一个参照的时间点
                var time1 = date1.getTime();
                var time2 = date2.getTime();
                //2、两个时间点相差毫秒数
                var time = Math.abs(time1 - time2);
                return time / 1000 / 3600 / 24;
            }

            var d1 = new Date("2018-4-18");
            var d2 = new Date("2018-5-24");

            var num = getNumOfDate(d1, d2);
            alert(num);
            

7、定时器

系统提供的函数
   setInterval()
格式：setInterval(函数名, 毫秒数);
功能：每隔毫秒数，去执行一次函数。
【注】用chrome运行

            var i = 0;
            function show(){
                document.write(i++ + "<br/>");
            }
            setInterval(show, 1000);

拓展

            系统提供的函数

            setInterval()
            格式：setInterval(函数名, 毫秒数);
                 setInterval(匿名函数, 毫秒数)
            功能：每隔毫秒数，去执行一次函数。
        

返回值：当前定时器的ID，我们可以通过ID找到定时器。

            clearInterval(ID);

功能：通过ID找到定时器，清除定时器。

            【注】用chrome运行
        */
        var i = 0;
        /*function show(){
            document.write(i++ + "<br/>");
        }*/

        /*var show = function(){
            document.write(i++ + "<br/>");
        }*/

        // setInterval(show, 1000);

        //开房
        var ID = setInterval(function(){
            if(i == 5){
                //退房 ID 房卡
                clearInterval(ID);
            }
            document.write(i++ + "<br/>");
        }, 1000);
        

8、计时器

<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            #timer{
                width: 150px;
                height: 200px;
                background-color: orange;
                border: 1px solid black;
                margin: 100px auto;
                text-align: center;
                padding: 20px
            }
            #timer span{
                color: green;
                font-size: 30px
            }
            #timer button{
                width: 100px;
                height: 30px;
                background-color: black;
                color: yellow;
                font-size: 16px;
                margin-top: 15px
            }

        </style>
    </head>
    <body>
        <div id = "timer">
            <span id = "hour">00</span>
            <span>:</span>
            <span id = "min">00</span>
            <span>:</span>
            <span id = "sec">00</span>
            <br/>
            <button id = "start">开始</button><br/>
            <button id = "pause">暂停</button><br/>
            <button id = "stop">停止</button>
        </div>
    </body>
    <script>
        //<1>获取所有要用到的标签。
        var oHour = document.getElementById("hour");
        var oMin = document.getElementById("min");
        var oSec = document.getElementById("sec");

        var oStart = document.getElementById("start");
        var oPause = document.getElementById("pause");
        var oStop = document.getElementById("stop");


        var ID = null;
        //<2>给三个按钮添加函数
        var i = 0; //总秒数
        oStart.onclick = function(){
            // alert("开始");
            // 开始计数
            ID = setInterval(function(){
                i++;
                // document.title = i;
                //将总秒数显示成 时分秒
                oSec.innerHTML = doubleNum(i % 60);
                oMin.innerHTML = doubleNum(parseInt(i / 60) % 60);
                oHour.innerHTML = doubleNum(parseInt(i / 3600));
            }, 1000);
        }

        //封装函数，传入数字，如果不足两位，前面补0
        function doubleNum(num){
            if(num < 10){
                return "0" + num;
            }else{
                return num;
            }
        }

        oPause.onclick = function(){
            clearInterval(ID);
        }

        oStop.onclick = function(){
            //<1>不管是否正在计数，先运行一起取消定时器
            clearInterval(ID);
            //<2>数据清零
            i = 0;
            oSec.innerHTML = "00";
            oMin.innerHTML = "00";
            oHour.innerHTML = "00";
        }

    </script>

9、innerHTML

<head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div id = "div1"><h2>div内容</h2></div>
    </body>
    <script>
        var oDiv = document.getElementById("div1");

        //1、获取访问标签间的内容，包括其中的标签，一起获取
        // alert(oDiv.innerHTML);

        //2、设置innerHTML，可以改变标签间内容的值，并且文本中含有标签，会自动解析。
        oDiv.innerHTML = "<strong>修改的内容</strong>";
    </script>

10、字符串方法_重点

  字符串：带单引号或双引号的都叫做字符串，在JS中单引号和双引号的作用是一样的，但是不能混用。
【注】字符串无论是object还是string使用起来都没有任何区别。

复合数据类型：数组、函数、对象、日期对象、字符串。
【注】复合数据类型全是对象，万事万物皆对象。都是引用。存储的都是地址。

1、字符串可以通过new运算符声明、

            参数：任意数据类型的数据，都会生成一个字符串。
    
    

            // var str = new String(true);
            // alert(typeof str); //object
            // alert(str + 1);              

2、可以省略new创建字符串

            // var str = String(1000);
            // alert(str + 22);
            // alert(typeof str); //string

3、通过常量赋值

            /*var str = "hello";
            alert(typeof str);*/

字符串的属性 length
【注】字符串的长度。

            var str = "hello";
            // alert(str.length);

访问字符串中的某一个字符。
charAt()
格式：字符串.charAt(下标)
返回值：对应下标的字符

// alert(str.charAt(1));

【注】字符串一旦被声明，就没有办法被修改，只读的。如果非要修改，只能讲原字符串销毁，重新赋值。

            /*str = "hxllo";
            alert(str);*/

【注】字符串可以类似于数组，通过下标访问每一个字符。

                var str = "hello";
            // alert(str[1]);
            // alert(str);

循环输出每一个字符

            for(var i = 0; i < str.length; i++){
                alert(str[i]);
            }

11、字符串方法__重点

charAt()

            /*var str = "hello";
            alert(str.charAt(1)); //等价
            alert(str[1]);*/

charCodeAt()
格式：字符串.charCodeAt(下标)
功能：访问对应下标字符的ASCII码值。

            /*var str = "hello";
            alert(str.charCodeAt(1));*/

格式：String.fromCharCode()
参数：ASCII码值，个数不定。
返回值：该ASCII码值对应的字符所组成的字符串。

            /*var str = String.fromCharCode(97, 101, 102);
            alert(str);*/

数字验证码代码：

<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            #div1{
                width: 100px;
                height: 30px;
                background-color: black;
                color: white;
                text-align: center;
                line-height: 30px;
                font-size: 18px
            }
        </style>
        <script>
            /*
                charAt()
            */
            /*var str = "hello";
            alert(str.charAt(1)); //等价
            alert(str[1]);*/


            /*
                charCodeAt()
                格式：字符串.charCodeAt(下标)
                功能：访问对应下标字符的ASCII码值。
            */
            /*var str = "hello";
            alert(str.charCodeAt(1));*/


            /*
                格式：String.fromCharCode()
                参数：ASCII码值，个数不定。
                返回值：该ASCII码值对应的字符所组成的字符串。
            */
            /*var str = String.fromCharCode(97, 101, 102);
            alert(str);*/


            /*
                封装函数，传入一个n，生成n位数字验证。
            */
            function testCode(n){
                var arr = []; //用来记录生成的验证码
                for(var i = 0; i < n; i++){
                    var num = parseInt(Math.random() * 10);
                    arr.push(num);
                }

                // alert(arr);
                return arr.join("");
            }

            /*var str = testCode(6);
            alert(str);*/
        </script>
    </head>
    <body>
        <div id = "div1">
        
        </div>
    </body>
    <script>
        var oDiv = document.getElementById("div1");
        oDiv.innerHTML = testCode(6);
    </script>

带字母的验证码

<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            #div1{
                width: 100px;
                height: 30px;
                background-color: black;
                color: white;
                text-align: center;
                line-height: 30px;
                font-size: 18px
            }
        </style>
        <script>
            /*
                随机带字母的验证码：
                关键点：1、先随机ASCII码值
                       2、再通过ASCII码值转成字母

                0-9 a-z A-Z
                0-9
                a-z 97-122    17-42 + 80
                A-Z 65-90
            */

            function testCode(n){
                var arr = []; //存放随机数
                for(var i = 0; i < n; i++){
                    var tmp = parseInt(Math.random() * 100);
                    if(tmp >= 0 && tmp <= 9){
                        arr.push(tmp);
                    }else if(tmp >= 65 && tmp <= 90){
                        //大写字母
                        var bigStr = String.fromCharCode(tmp);
                        arr.push(bigStr);
                    }else if(tmp >= 17 && tmp <= 42){
                        //小写字母
                        var smallStr = String.fromCharCode(tmp + 80);
                        arr.push(smallStr);
                    }else{
                        //如果随机到没用的数,让他多随机一次
                        i--;
                    }

                }
                return arr.join("");
            }
        </script>
    </head>
    <body>
        <div id = "div1">
        
        </div>
    </body>
    <script>
        var oDiv = document.getElementById("div1");
        oDiv.innerHTML = testCode(6);
    </script>

12、字符串方法__重点

concat()

功能：拼接字符串，新生成一个字符串。
格式：字符串1.concat(字符串2)

功能：拼接

            /*var str1 = "hello";
            var str2 = "world";
            // var str = str1.concat(str2);
            var str = str1 + str2;
            alert(str);
            alert(str1);
            alert(str2);*/

indexOf()

格式：父字符串.indexOf(子字符串, start);
参数：子字符串 要查找的字符串 start 开始查找的下标
【注】如果start不写的话，默认从下标0开始去查
功能：在父字符串中查子字符串第一次出现的位置，从start开始去查。
返回值：如果没有查找到 -1 如果查找到了是>=0的值。

lastIndexOf()

格式：父字符串.lastIndexOf(子字符串);
功能：查找最后一次出现的位置。
返回值：如果没有查找到 -1 如果查找到了是>=0的值。

            /*var supStr = "abcabcabc";
            var subStr = "abcd";
            var index = supStr.indexOf(subStr);
            alert(index);*/

            /*var supStr = "abcabcabc";
            var subStr = "abc";
            var index = supStr.lastIndexOf(subStr);
            alert(index);*/

search()

格式：父字符串.search(子字符串/正则表达式);
功能：在父字符串中查找，子字符串第一次出现的位置。
返回值：如果查找不到 -1

【注】正则和字符串的使用方式一致。

var supStr = "Abcabcabc";
            // var subStr = "abc";
            var subStr = /abc/;
            var index = supStr.search(subStr);
            alert(index);

13、replace

replace(oldStr, newStr);

            格式：父字符串.replace(oldStr, newStr);      
            功能:用newStr将oldStr替换掉，并且生成新字符串。           
            通过字符串替换只能替换一个。    
            通过正则表达式替换所有。    

正则表达式
超级字符串
修饰符：g 全局匹配
i 忽略大小写

/*var supStr = "How Are are you!";
            // var newStr = supStr.replace("are", "old are");
            var newStr = supStr.replace(/are/gi, "old are");
            alert(newStr);
            alert(supStr);*/

substring()

            格式：字符串.substring(start, end)        
            功能：从提取start到end的字符，生成新字符串。      
            返回值：提取到的字符串。        
    

            /*var str = "helloworld";
            var subStr = str.substring(2, 6);
            alert(subStr);
            alert(str);*/

split

            格式：字符串.split(分隔符, 数字)   
            参数：第一个参数，代表用什么字符串去分割  
                 第二个参数，分割完成以后数组的长度（一般情况下不传）   
            返回值：装有分割完毕的子串的数组。    
    
    

字符串 -> 数组 split
数组 -> 字符串 join

/*var str = "This is Tom";
            var arr = str.split(" ");
            alert(arr);
            alert(arr.join("+"))*/

toLowerCase()方法用于把字符串转换成小写
toUpperCase()方法用于把字符串转换成大写

        var str = "helloWROLD";
            alert(str.toLowerCase());
            alert(str.toUpperCase());