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  //trueundefined===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（）//123123.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=strconsole.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=disif(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>

贺倩的第二周js总结相关推荐

临摹中国慕课静态网页第二周周记（CSS3+JS）
临摹中国慕课静态网页第二周周记(CSS3+JS) 第二周这周主要是对细节,轮播图,下拉菜单等地完善和JS的学习学习内容 (1)CSS word-break 属性属性规定自动换行的处理方法. 语法 ...
深度学习笔记第五门课序列模型第二周自然语言处理与词嵌入
本文是吴恩达老师的深度学习课程[1]笔记部分. 作者:黄海广[2] 主要编写人员:黄海广.林兴木(第四所有底稿,第五课第一二周,第三周前三节).祝彦森:(第三课所有底稿).贺志尧(第五课第三周底稿). ...
深度学习笔记第四门课卷积神经网络第二周深度卷积网络：实例探究
本文是吴恩达老师的深度学习课程[1]笔记部分. 作者:黄海广[2] 主要编写人员:黄海广.林兴木(第四所有底稿,第五课第一二周,第三周前三节).祝彦森:(第三课所有底稿).贺志尧(第五课第三周底稿). ...
深度学习笔记第三门课结构化机器学习项目第二周机器学习（ML）策略（2）...
本文是吴恩达老师的深度学习课程[1]笔记部分. 作者:黄海广[2] 主要编写人员:黄海广.林兴木(第四所有底稿,第五课第一二周,第三周前三节).祝彦森:(第三课所有底稿).贺志尧(第五课第三周底稿). ...
深度学习笔记第二门课改善深层神经网络第二周：优化算法
本文是吴恩达老师的深度学习课程[1]笔记部分. 作者:黄海广[2] 主要编写人员:黄海广.林兴木(第四所有底稿,第五课第一二周,第三周前三节).祝彦森:(第三课所有底稿).贺志尧(第五课第三周底稿). ...
深度学习笔记第一门课第二周：神经网络的编程基础（上）
本文是吴恩达老师的深度学习课程[1]笔记部分. 作者:黄海广[2] 主要编写人员:黄海广.林兴木(第四所有底稿,第五课第一二周,第三周前三节).祝彦森:(第三课所有底稿).贺志尧(第五课第三周底稿). ...
团队项目第二周 - 需求规格说明书 - 天冷记得穿秋裤队
团队项目第二周 - 需求规格说明书 - 天冷记得穿秋裤队队员姓名学号陈俊旭(组长) 3116004630 夏瓦克提·木合塔尔 3116004658 张婷(副组长) 3216004672 周方源 ...
【采访】腾讯社交广告高校算法大赛决赛第二周最大进步队伍——拔萝卜比赛经验及心得分享
腾讯社交广告高校算法大赛决赛第二周进步最大的一支队伍她的名字叫拔萝卜这是一支单人队伍而且还是少有的女孩子哦可爱.乖巧.独立的小女孩祝贺你话不多说直接上照片小编对咱们的周进步冠军同学进行 ...
Javescript第二周学习
DAY第二周第一天: 1.***数据类型的转换: 1.强制转换: 1.转字符串:var str=xtoString();//x不能是undefined和null,因为他俩不能使用 var =Strin ...

贺倩的第二周js总结

1.Date(日期)对象

2.倒计时

3.Window对象

4.Math（算数）对象

5.数据类型

undefined ：未定义

null ：空

string ：字符串

number：数字类型

bool：布尔

Array ：数组

Object ：对象

声明变量类型

NaN : 不是数字

6.typeof操作符

7.类型转换

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

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

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

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

(5)转换为bool值

8.贺倩编写的程序们：

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

（2）选项卡

（3）钟表

（4）多个选项卡

（5）倒计时

贺倩的第二周js总结相关推荐

最新文章

热门文章

贺倩的第二周js总结

1.Date(日期)对象

2.倒计时

3.Window对象

4.Math（算数） 对象

5.数据类型

undefined ： 未定义

null ： 空

string ： 字符串

number：数字类型

bool：布尔

Array ：数组

Object ： 对象

声明变量类型

NaN : 不是数字

6.typeof操作符

7.类型转换

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

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

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

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

(5)转换为bool值

8.贺倩编写的程序们：

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

（2）选项卡

（3）钟表

（4）多个选项卡

（5）倒计时

贺倩的第二周js总结相关推荐

最新文章

热门文章

4.Math（算数）对象

undefined ：未定义

null ：空

string ：字符串

Object ：对象