贺倩的第二周js总结

1.Date(日期)对象

---

（1）获取当前的日期：new Date( )

var time=new Date()

(2)获取从1970年1.1到此时此刻的毫秒数：getTime( )

console.log(time.getTime())

(3)获取当前的年份：getFullYear( )

consolo.log(time.getFullYear（）)

（4）获取当前的月份：getMouth（）

consolo.log（time.getMouth（））//月份是从0-11

（5）获取当前的日：getDate（）

console.log（time.getDate）

(6) 获取当前的时：getHours（）

console.log(time.getHours())

(7) 获取当前的分：getMinutes（）

console.log(time.get.Minutes())

(8) 获取当前的秒：getSeconds(）

console.log(time.getSeconds())

2.倒计时

例：

        var a=new Date()
        var b=new Date(2017,5,12,20,02,0)
        var time=Math.floor((b-a)/1000);//取得相差秒数并且向下取整
        var D=Math.floor(time/84600)    //取得相差天数
        var H=Math.floor(time%84600/3600)//取得相差小时数
        var M=Math.floor(time%84600%3600/60)//取得相差分钟数
        var S=Math.floor(time%60)         //取得相差秒数
        var dis='剩余时间还有'+D+'天'+H+'小时'+M+'分钟'+S+'秒';

        odiv.innerHTML=dis//把以上相差的时间显示在界面中

3.Window对象

---

（1）Window setInterval( ) 方法
setInterval（要调用的函数或者表达式，指定周期的毫秒数）
setInterval（）会一直被调用知道clearInterval（）被调用或者窗口关闭。

---

（2）Window clearInterval（）方法
clearInterval（setInterval返回的id值）

---

（3）Window setTimeout ( ) 方法
在指定毫秒数后执行函数或者计算表达式。
setTimeout(要被调用的函数，要延迟的毫秒数 )

setTimeout(function(){alert("hello")},3000)//3秒后弹出框。

4.Math（算数） 对象

（1）Math.round( ) ： 对指定的数四舍五入

Math.round(5.6 )  //6

(2)Math.floor( ) : 对指定数向下取整

Math.floor(2.6)  //2

(3)Math.ceil( ) : 对指定数向上取整

Math.ceil(2.2 )  //3

(4)Math.random( ) :返回0-1之间的随机数字，不包括1。

Math.random( )*10//返回0-10之间随机的一个数字。
Math.floor（Math.random( )*10） //返回0-10之间的随机一个整数

（5）Math.E : 常数e
（6）Math.abs（） ： 绝对值
（7）Math.sin（） ：正弦
（8）Math.cos（） ：余弦
（9）Math.max（） ：返回指定数中的最大值

alert（Math.max（））//-Infinity

（10）Math.min（） ：返回指定数中的最小值

alert（Math.min（））//Infinity

( 11 ) Math.pow(x, y) //x的y次方
( 12 )Math.sqrt( x) //根号下x

---

5.数据类型

undefined ： 未定义

null ： 空

var a;
var b="joy"
var c=null
document.write(a)  //undefined
document.write(b)  //joy
document.write(c)  //null

string ： 字符串

var a="abcd"
var b=' He name is "joy" '
document.write(a)  //abcd 
document.write(b)  // He name is "joy"

number：数字类型

var a=123
var b=23.33
var c=123e5  
var d=123e-5 
document.write(a)  //123
document.write(b)  //23.33
document.write(c)  //12300000
document.write(d)  //0.00123

bool：布尔

布尔逻辑只能有两个值：true和false

var a=true
var b=false

---

Array ：数组

var arr=new Array( ) ;
arr[0]=2
arr[1]="joy"
arr[2]="abc"
arr=[2,"joy","abc"]
document.write(arr[1])  // joy

Object ： 对象

var a={firstname="joy",lastname="zhang",id=5555}//对象ayou
三个属性：firstname，lastname和id
document.write(a.firstname)//joy
document.write(a.["firstname"])//joy

---

声明变量类型

当声明新的变量时，可以使用new来声明它的类型；

var carname=new String; //
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

NaN : 不是数字

NaN 属性用于引用特殊的非数字值。 该属性指定的并不是不合法的数字。
NaN 属性 与 Number.Nan 属性相同。
提示： 请使用 isNaN() 来判断一个值是否是数字。原因是 NaN 与所有值都不相等，包括它自己。
是数字：false
不是数字 ： true

---

6.typeof操作符

（1）

var a="joy"  
var b=3.33
var c=false
var d=[1,2,3]
var e={name:'joy',id:333}
var f=function(){}
var g=NaN
var h= new Date()
document.write(typeof a) //string
document.write(typeof b) //number
document.write(typeof c) //bool 
document.write(typeof d) //object
document.write(typeof e) //object
document.write(typeof f) //function
document.write(typeof g) //number
document.write(typeof h) //object
注：在JavaScript中数组是特殊的对象类型。

（2）

var a=null
var b=undefined
document.write(typeof a) //object
document.write(typeof b) //undefined
注： null 和 underfined 的值相等，但类型不等：
    undefined==null  //true
    undefined===null //false
var a; //值为undefined
document.write(typeof a)//undefined

7.类型转换

在JavaScript中有：
5种数据类型：number，string，object，bool，function；
3种对象类型：Array，object，Date
2种不含任何值的类型：null，undefined

(1)将布尔值转换为字符串

var a=false
var b=true
string(a)//"false"
string(b)//"true"

(2)将日期转换为字符串

var a=new Date()
string(a)//Thu Jun 15 2017 17:10:44 GMT+0800 (中国标准时间)

(3)将数字转换为字符串：

该方法可用于任何类型的数字，字母，变量，表达式：

var a=123
String (a) //123
String (123) //123
String (100+23) //123
同：a.toString（）//123
   123.toString（）//123
   (100+23).toString（）//123
var a=[1,2,3]
string(a).length// 5
var b={name:"小张"，age：12}
string(b).length// 15

（4）将字符串转换为数字

var a="aaaa"  Number（a） //NaN
var b=ture    Number(b)  //1
var c=false   Number(c)  //0
var d=""      Number(d)  //0
var e=[1,2,3] Number(e)  //NaN 

(5)转换为bool值

var a="aaa"   Boolean(a) //true
var b=""      Boolean(b) //false
var c=123     Boolean(c) //true
var d=0       Boolean(d) //false
var e=-2      Boolean(e) //true
var f=1       Boolean(f) //true

8.贺倩编写的程序们：

（1）Math.floor（Math.random（））在切换的应用：

图片的切换：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <button>点击</button>
        <img src="img/floors_pic1.jpg">

        <script>
            var arr=["img/floors_pic1.jpg","img/floors_pic2.jpg","img/hot1.jpg","img/hot2.jpg"]
            var obtn=document.getElementsByTagName("button")[0]
            var oimg=document.getElementsByTagName("img")[0]
            obtn.onclick=function()
            {
                var num=Math.floor(Math.random()*arr.length)
                oimg.src=arr[num]

            }
        </script>
    </body>
</html>

验证码的变换：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>验证码</title>
        <style>
            div {
                width: 400px;
                height: 200px;
                background: #ADFF2F;
                margin: 0 auto;
                padding: 20px;
            }

            input {
                width: 150px;
                height: 50px;
                float: left;
                margin-left: 20px;
                margin-right: 55px;
            }

            span {
                display: block;
                width: 150px;
                height: 56px;
                background: #CCCCCC;
                float: left;
                margin-bottom: 20px;
            }

            button {
                display: block;
                clear: both;
                margin: 0 auto;
                width: 100px;
                height: 50px;
            }
        </style>
    </head>

    <body>
        <div>
            <input type="text" />
            <span></span>
            <button>确定</button>
            <!--<input type="button" value="确定"/>-->
            <script>
                var oinput =document.getElementsByTagName("input")[0]
                var ospan = document.getElementsByTagName("span")[0]
                var obtn = document.getElementsByTagName("button")[0]
                var arr = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "a", "s", "d", "f", "g", "h", "j", "k", "l", "z", "x", "c", "v", "b", "n", "m"]
                var str=""
                //function go()
                //{
                     for(var i=0;i<6;i++)
                     {
                         var num=Math.floor(Math.random()*arr.length);

                         str=str+arr[num]
                     }
                         ospan.innerHTML=str
                         console.log(str)
                //}
                //go()

                obtn.onclick=function()
                {
                    var text=oinput.value.toUpperCase()
                    var demo=ospan.innerHTML.toUpperCase()
                if(text=="")
                {
                    alert('请输入验证码')
                }
                else if(text!=demo)
                {
                    alert('请输入正确的验证码')
                }
                else if(text=demo)
                {
                    alert('输入正确!')
                }
                }

            </script>
        </div>
    </body>

</html>

（2）选项卡

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #box{width: 600px;height: 400px;background: #FF0000;margin: 0 auto;padding: 20px;}
            #title{width: 500px;height: 50px;background: #CCCCCC;margin: 0 auto;}
            #title div{float: left;width: 100px;height: 50px;color: white;background:black;margin-left: 20px;margin-bottom: 50px;}
            table{clear:both;width: 400px;height: 150px;background: #FFFFFF;border: 1px solid #000000;margin: 0 auto;display: none;}
           #content{display: block;}
            td{text-align: center;text-align: center;height: 40px;width: 400px;}
            .active{background:green;color: white;}
        </style>
    </head>
    <body>
        <div id="box">
            <div id="title">
            <div>标题1</div>
            <div>标题2</div>
            <div>标题3</div>
            <div>标题4</div>
            <table id="content">
                <tr>
                    <td>内容1</td>
                </tr>
                <tr>
                    <td>内容2</td>
                </tr>
                <tr>
                    <td>内容3</td>
                </tr>
            </table>

            <table>
                <tr>
                    <td>内容4</td>
                </tr>
                <tr>
                    <td>内容5</td>
                </tr>
                <tr>
                    <td>内容6</td>
                </tr>
            </table>
            <table>
                <tr>
                    <td>内容7</td>
                </tr>
                <tr>
                    <td>内容8</td>
                </tr>
                <tr>
                    <td>内容9</td>
                </tr>
            </table>
            <table>
                <tr>
                    <td>内容10</td>
                </tr>
                <tr>
                    <td>内容11</td>
                </tr>
                <tr>
                    <td>内容12</td>
                </tr>
            </table>
            </div>
        </div>
        <script>
        var odiv=document.getElementById("title").getElementsByTagName("div")
        //console.log(odiv)
        var otable=document.getElementsByTagName("table")
            for(var i=0;i<odiv.length;i++)
            {
                odiv[i].index=i//因为函数里面无法访问i，所以我们自定义一个元素，并将i交给它；否则函数只能访问for的最后一个值；
                odiv[i].onclick=function()
                {
                 for(var j=0;j<otable.length;j++)
                 {
                    odiv[j].className=""
                    otable[j].style.display="none"
                 }
                this.className="active"
                otable[this.index].style.display="block"
                }
            }           
        </script>   
    </body>
</html>

（3）钟表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{margin: 0;padding: 0;}
            #box1{width:600px;height: 600px;position: relative;margin: 0 auto;}
            #h,#m,#s{position: absolute;left:285px;top:0;height: 600px;}
            img{margin: 0 auto;}
        </style>
    </head>
    <body>
        <div id="box1"><img src="img/clock.jpg"><div>
        <div id="h"><img src="img/hour.png"></div>
        <div id="m"><img src="img/minute.png"></div>
        <div id="s"><img src="img/second.png"></div>
        <script>
            function go()
            {
                var oh=document.getElementById("h");
                var om=document.getElementById("m");
                var os=document.getElementById("s");
                var time=new Date()
                var st=time.getSeconds()+time.getMilliseconds()/1000 
                os.style.transform='rotate(' + st*6 + 'deg)'//transform:改变，变换。
                var mt=time.getMinutes()
                om.style.transform='rotate(' + mt*6 + 'deg)'
                var ht=time.getHours()
                oh.style.transform='rotate(' + ht*30 + 'deg)'

            }
            go()
            setInterval(go,1000)
        </script>
    </body>
</html>

（4）多个选项卡

<script>
window.onload=function()
{
    choose("meau1","click")
    choose("meau2","click")
    choose("meau3","click")

    function choose(id,event)
    {
    var odiv=document.getElementById(id);
    var otitle=odiv.getElementsByTagName("span")
    console.log(otitle)
    var otable=document.getElementById(id).getElementsByTagName("table")
    for(var i=0;i<otitle.length;i++)
    {
        (function(a)

        otitle[a].addEventListener(event,function()
        //addEventListener侦听事件并处理相应的函数
        {
          for(var j=0;j<otable.length;j++)
             {
             otitle[j].className=""
             otable[j].style.display="none"
             }
             this.className="active"
             otable[a].style.display="block"
        })
    })(i)

    }   

    }
}   //闭包函数：里面的函数可以访问到上一层的变量函数，即使上一层已经关闭；    
</script>

（5）倒计时

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>定时器</title>
        <style>
        div{width: 300px;height: 50px;background: red;}
        </style>
    </head>
    <body>
        <button>播放</button>
        <button>停止</button>
        <div></div>
        <audio src="../date2/music.mp3"></audio> //插入音频
    <script>

        var obtn=document.getElementsByTagName("button")
        var oad=document.getElementsByTagName("audio")[0]
        var odiv=document.getElementsByTagName("div")[0];
        function go()
        {
        var a=new Date()
        var b=new Date(2017,5,12,20,02,0)
        var time=Math.floor((b-a)/1000);//取得相差秒数并且向下取整
        var D=Math.floor(time/84600)
        var H=Math.floor(time%84600/3600)
        var M=Math.floor(time%84600%3600/60)
        var S=Math.floor(time%60)
        var dis='剩余时间还有'+D+'天'+H+'小时'+M+'分钟'+S+'秒';

        odiv.innerHTML=dis
        if(time<=0)
        {
            /*obtn[0].onclick=function()
            {
                oad.play();
                odiv.innerHTML="到点"
                clearInterval(start)
            }
            obtn[1].onclick=function()
            {
                oad.pause();
            }
        }*/
        clearInterval(start)//当到达这个时间是停止计时。
        }
        }
        go()
        var start=setInterval(go,1000)


    </script>
    </body>
</html>