js总结（！！！）

简述JavaScript起源
起源于美国的Netscape公司，原名为LiveScript，后改为JavaScript，他是一种脚本语言，用于与浏览器实现对话

JavaScript三大核心
ECMAScript，
Web浏览器对于EMCAScript来说是一个寄宿环境，但他并不是唯一的寄宿环境。事实上，还有不计其数的其他环境可以容纳ECMAScript实现。
文档对象模型（Dom,Document Object Model）,
如果没有document（文档），DOM也就无从谈起。当创建了一个页面并把它加载到Web浏览器时，DOM就在幕后悄然而生。他根据编写的页面文档创建一个文档对象
浏览器对象模型 （Bom,Browser Object Model），
BOM提供了独立于内容的与浏览器窗口进行交互的对象。由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window.

javascript的特点
编写简单
无需编译，直接运行
面向对象的编程语言

JavaScript的运用方式
内部运用：在结束语随意位置就可以，写入

声明变量：

var name='king';
console.log(name);

常亮赋值：

const PI=3.55;
const PI=3.84;
console.log(PI);

js最基本的三种输出方式：

console.log('hello king');
document.write('hello king')
alert('hello king');

命名规范：

var name='king';
var name1='king';
var name_1='king';
var $name='king';

变量赋值：

var name='king';
var name='queen';
console.log(name);
console.log(typeof name);

声明变量与未声明变量：

//1.声明变量不赋值,返回undefined
var hename
console.log(hename);

//2.直接输出未声明的变量,会报错
console.log(ahflk);

数据类型的转换：
number

var num1=10;
var num2=16;

string

var str1='king';

boolean

var boo=true;
var oo2=false;

undefined

var undef;

1)number + number = number

var num3=num1+num2;
console.log(num3);//26
console.log(typeof num3);

2)number + string = string

var str=num1+str1;
console.log(str);//10hello
console.log(typeof str);

3)number + boolean = number

var boo=num1+boo1;
console.log(boo);//11
console.log(typeof boo);

4)number + undefined = number

var und=num1+undef;
console.log(und);//NAN
console.log(typeof und);

5)string + boolean = string

var stb=str1+boo1;
console.log(stb); //kingtrue
console.log(typeof stb);

6)string + undefined = string

var sfind=str1+undef;
console.log(sfind);/kingundefined
console.log(typeof sfind);

数据类型转换减法操作：

var num1 = 10;
var str1 = "11";
var str2 = "Hello";
var str3 = "35";
var str4 = "waht";

console.log(num1+str1);//1011
console.log(num1-str1);// -1
console.log(str1+str3);//1135
console.log(str3-str1);//24
console.log(str2-str4);//NaN

运算符-逻辑运算符：

var num = parseInt(prompt("请输入一个数字"));
//判断 num 是否在 0~10之间
var result=(num>=0&&num<=10);
console.log(num+"在0~10之间吗?"+result);

转换：
parseInt();-转换成整数;（没有四舍五入）。

parseFloat();转换为小数；基本不变 如果是0.xx的话可省略小数点前面的0。

Number();转换为number类型最后结果只会是unmber（数字）类型。

toString();转换成字符串最后结果都是字符串（string);。

toFixed();按要求保留小数位数。

a.toFixed();括号里面是保留几位小数不能过于大，有四舍五入的功能。

显示装换 强制转换：

parseInt();转换成整数

var a=5.3;

var b=parseInt(a);

console.log(typeof a);

parseFloat();转换成小数

var a='.33';

var b=parseFloat(a);

cosole.log(b);

console.log(typeof b);

Number();转换成number类型

var a='5';

var b=Number(a);

console.log(b)

console.log(typeof b)

toSting();转换成字符串

var a=3

var b=a.toSting();

console.log(b);

console.log(ty

toFiexd();按要求保留几位小数

var a=14.95;

var b=a.toFixed(1);

console.log(b);

三目运算法：条件+？score>=60?就是条件；

如: (

var score=prompt('成绩')

var result=score>=60?'合格':'不合格';

alert(result); )

满足两个条件（

var sleep=prompt('请输入您的睡眠时间')

var result=sleep>=8?'正常':'不正常';

var result=sleep<=10?'正常':'不正常';

alert(result); ）

符号引用：

与（和，且）：&&；

或：||

非：！ 去与它相反的（如果他是对的用“非”的话就是错的）

有假且（&&）为假，有真或（||）为真意思是

在“和”（&&）里只要有一个是假的那他整个都是假的

在“或”（||）里面有一个是真的那么他全部都是真的

在 和（&&）里面有一个是假的它输出的就是false 在或里面有一个是真的那么他输出的就是true

循环语句：while

var a=1;

while(a<=10){

console.log('GOGOGO');

a++;

}

(1-100)

var a=1;

while(a<=100){

document.write(a);

a++;

}

var a=1;

while(a<=100){

document.write(a++);//++a:偶数;a++:奇数；

a++;

}

模：

var a=1;

while(a<=100){

if(a%2==0){

console.log(a);

};

a++;

};

var a=1;

while(a<=100){

console.log(a);

a+=a=2;

};

for循环语句：

for(1.声明一个（多个）变量;条件;对变量进行操作)

for(var i=1;i<=10; i++){

console.log('hello word');

}

for(var i=1;i<=100; i++){

console.log(i);

}

for(var i=1;i<=100;i++){

if (i%2==0){

console.log(i);

}

}

//奇数：

for(var i=1,sum=0;i<=100;i++){

if(i%2==1){

sum=sum+i;

}

}

console.log(sum);

//偶数：

for(var i=1,sum=0;i<=100;i++){

if(i%2==0){

sum=sum+i;

}

}

console.log(sum);

求出数组中的最大值：

var arr=[1,3,4,2,5];

for(var i=0,sum=arr[0];i<=arr.length;i++){

if(arr[i]>sum){

        sum=arr[i];

  }

}

console.log(sum);

1.遍历数组，同时声明变量sum并且赋值为数组中的某个元素

2如果数组中的当前元素大于sum，就把数组中的当前元素赋值给sum

3.输出sum

for循环：

//五行星星:

for(var a=1;a<=5;a++){

document.write('
');

for(var b=1;b<=10;b++){

document.write('*')

      }               

}

//三角星星:

for(var a=1;a<=5;a++){

document.write('
');

for(var b=1;b<=a;b++){

document.write('*')

 }

}

//99乘法表:

for(var a=1;a<=9;a++){

document.write('
');

for(var b=1;b<=a;b++){

document.write(b+''+a+'='+(ab)+'\t')

   }

}

数组:内存中的一段存储空间，多个变量的集合 创建一个数组(声明)

var arr=[]; 声明了一个空数组

var arr=new Array();

给数组中添加值

var arr=[1,2,3,4,5];

var arr1=['a','b','c','d'];

var arr2=[true,false]

数组中的值不限制数据类型

数组不限制长度

两个特点

1.下标:标识数组中元素的位置，从0开始，递增不重复

2.长度 length

var arr=[1,2,3,4,5,6,7,8,9];

            0 1 2 3 4 5 6 7 8       

console.log(arr.length)

输出数组中下标为4的值

consolze.log(arr[4])

数组的长度等于最大下标+1

给数组下标为11的位置处添加元素

arr[11]='a'

console.log(arr);

//数组API:

1.String();把数组转换成字符串

var arr=[1,2,3,4,5];

var str=String(arr);

console.log

2.join('拼接符');拼接，最后拼接成的是字符串

如果没有拼接符，默认等于String;

var arr=['h','e','l','l','o'];

var str=arr.join('-');

var str=arr.join('');

var str=arr.join();

console.log(str);

3.const();拼接 结果还为数组

var arr=['a','b','c'];

var arr2=[1,2,3,4,5];

var str=arr.concat(1,2);

var str=arr.concat(arr2);

console.log(str);

4.slice(starti,endi+1);截取

特点:1含头不含尾

2.如果省略第二个参数，默认从starti开始截取到结尾

3.如果一个参数都不写，相当于复制原数组

4.支持负数参数

var arr=['a','b','c','d','e','f','g'];

      0  1  2  3  4  5  6

var str=arr.slice(2,5);

var str=arr.slice(2);

var str=arr.slice();

var str=arr.slice(-3,-1);

console.log(str);

5.splice(starti,n);

删除 插入 替换

var arr=['a','b','c','d','e','f'];

      0  1  2  3  4  5

删除:

var str=arr.splice(3,2);

插入var str=arr.splice(3,0,'1','2');

替换

var str=arr.splice(3,2,'A','B');

console.log(str);

console.log(arr);

6.翻转

var arr=[1,2,3,4,5];

var str=arr.reverse();

console.log(str);

7.push();给数组末尾添加元素

var arr=[1,2,3,4,5];

var str=arr.push('a',10);

console.log(arr);

pop();删除数组末尾的元素

var arr=[1,2,3,4,5];

var str=arr.pop();

console.log(arr);

unshift();给数组开头添加一个元素

var arr=['a','b','c']

var str=arr.unshift('fff');

console.log(arr);

shift();删除

var arr=[1,2,3,4,5];

var str=arr.shift();

console.log(arr);

//Dom: 操作页面元素(增删改查)

1.查找：

一.通过元素间的关系查找

1)父子关系

parentElement 查找一个元素的父元素

console.log(ceshi.parentElement) //查找id为ceshi的父元素

ceshi.parentElement.style.backgroundColor='#ccf'; //设置ceshi父元素的背景色

children 查找一个元素的所有子元素(输出为数组形式)

console.log(ceshi.children); //查找id为ceshi的所有子元素(!结果为数组形式!)

ceshi.children[2].style.color='#f00';//给ceshi的子元素中下标为2的设字体颜色

var a=ceshi.children; //给ceshi的所有子元素的设置字体颜色

for(var i=0;i

ceshi.children[i].style.backgroundColor='#0f0';

}

console.log(ceshi.children[2].children[0].children[2])

var b=ceshi.children[2].children[0].children[2];

b.style.color='#50f';

firstElementChild 查找一个元素的第一个子元素(输出为原来的形式)

lastElementChild 查找一个元素的最后一个子元素(输出为原来的形式)

// console.log(ceshi.firstElementChild.)

2）兄弟关系

previousElementSibling 前一个兄弟

nextElementSibling 下一个兄弟

//找 阳光的快乐生活

var c=ceshi.firstElementChild.nextElementSibling.children[0].firstElementChild.nextElementSibling;

console.log(c);

c.style.backgroundColor='#00f';

//找 回村的诱惑

var d=ceshi.children[2].previousElementSibling.firstElementChild.lastElementChild;

console.log(d);

d.style.color='#ff0';

找 儿子去哪儿

var e=ceshi.firstElementChild.nextElementSibling.nextElementSibling.firstElementChild.lastElementChild

console.log(e);

e.style.backgroundColor='#0ff';

二.通过HTML查找

1）通过id查找

var ele=document.getElementById('id号'); //只能找到一个

var id=document.getElementById('ceshi');

console.log(id);

id.style.backgroundColor='#f0f';

2)通过class查找

var ele=document.getElementsByClassName('class名'); //可以找到多个 并且返回一个动态集合(数组)

var main=document.getElementsByClassName('main');

console.log(main);

main[0].style.backgroundColor='#ff0';

3)通过标签名查找

var ele=document.getElementsByTagName('标签名') //可以找到多个 并且返回一个动态集合(数组)

var li=document.getElementsByTagName('li');

console.log(li);

for(var i=0;i

li[i].style.color='#c2c';

};

4)通过name属性查找

var ele=document.getElementsByName('name'); //可以找到多个 返回动态集合 (数组)

var uname=document.getElementsByName('uname');

console.log(uname)

三.通过选择器查找

1. var ele=document.querySelector('选择器'); //只能找到一个

var lia=document.querySelector('#ceshi>li>ul>li:last-child');

console.log(lia);

lia.style.color='#f0f';

2. var ele=document.querySelectorAll('选择器'); 查找所有 返回动态集合 (数组)

var liall=document.querySelectorAll('.main>li');

console.log(liall);

for(var i=0;i

liall[i].style.backgroundColor='#cf0';

}

//函数：预先定义好的，可以被反复利用的代码块

 function fn(){fn 表示函数名

   代码

   console.log('hello js');

例：

点击

练习：

按钮

显示

正则：

1.search

search(/正则/);判断是否包含符合规定的关键词

varstr='you can you up';varstrs=str.search(/you/);//返回关键词的位置varstrs=str.search(/uoy/);//找不到返回-1console.log(strs);

2.match

match(/正则/); 获得所有和正则匹配的关键词

varstr='good good study,Day day up';// var strs=str.match(/d/);varstrs=str.match(/d/gi);console.log(strs);

3.exec

exec();既获得每个关键词的位置又获得每个关键词的内容

varstr='good good study,Day day up';varreg=/day/g;console.log(reg.exec(str));

4.replace

replace(/正则/ig,'替换值'); 替换

varstr='no zuo no die';varstrs=str.replace(/no/ig,'*');console.log(strs);

5.spilit

spilit(/正则/);切割 //切割完返回一个数组

varstr='no,zuo,no,die';varstrs=str.split(/,/);console.log(strs);

js轮播实现：

var banner=document.querySelectorAll('.banner>ul>li>a>img');
var point=document.querySelectorAll('.banner>p>span');
var timer;
var i=0;

function play(){
  timer=setInterval(function(){
        banner[i].style.display='none';
        point[i].style.background='#8b8b8b';
        i++;
        if(i>1){
            i=0;
        }
        banner[i].style.display='block';
        point[i].style.background='#ff8800
    },2000)
}

play();

//给box添加鼠标移入移出事件
var box=document.querySelector('.banner>ul');
box.onmouseover=function(){
    clearInterval(timer);
}

box.onmouseout=function(){
play();
}

//点击圆点切换

for(var j=0;j point[j].index=j;
point[j].onclick=function(){
var nu=this.index;
for(var b=0;b banner[b].style.display='none';
point[b].style.background='#8b8b8b';
}
banner[nu].style.display='block';
point[nu].style.background="#ff8800";
}
}

计时器：

css样式

停止一次性定时器
停止永久性定时器
script 一次性定时器

var btn1=document.querySelector('.btn1');
var btn2=document.querySelector('.btn2');
function show(){
console.log('这是一次性定时器');
}//一次性定时器
script 永久性定时器

var timer=setTimeout(show,3000);
btn1.onclick=function(){
clearTimeout(timer);
}

function print(){
console.log('这是永久性定时器');
}
var times=setInterval(print,1000);
btn2.onclick=function(){
clearTimeout(times);
}
instanceof：

var arr=[1,2,3,4,5];
var obj={name:'jack'};
console.log(arr instanceof Array);
console.log(obj instanceof Array);
深度克隆：
var student={
name:'jack',
age:18,
friend:['lily','lucy']
}
function clone(obj){
var newObj=obj instanceof Array?[]:{};
for(var key in obj){
if(obj[key] instanceof Object){
newObj[key]=clone(obj[key]);
}else{
newObj[key]=obj[key];
}
}
return newObj;
}

var newObj=clone(student);
student.friend[0]='rose';
console.log(student.friend[0]);
console.log(newObj.friend[0]);
事件委托：
事件委托：可以简单第理解为将子集的事件委托给父级来处理
div

按钮1
按钮2

script 第一种写法

var btn1 = document.querySelector(".btn1");
var btn2 = document.querySelector(".btn2");
btn1.addEventListener("click",function(){
console.log(this.innerHTML)
})
btn2.addEventListener("click",function(){
console.log(this.innerHTML)
})
script 第二种写法

var btnArray = document.querySelectorAll("button");
for(var i = 0;i btnArray[i].addEventListener("click",function(){
console.log(this.innerHTML)
})
}
第三种:使用事件委托的方式实现

var box=document.querySelector('.boxs');
box.addEventListener('click',function(event){
var target=event.target;
console.log(target.innerHTML);
})

仿微博发表评论：
1)css样式
{
margin:0;
padding:0;
}
a{
text-decoration: none;
}
input{
border:0;
}
li{
list-style: none;
}
.container{
width:800px;
margin:0 auto;
/border:1px solid #000;/
padding:20px;
}
input{
border:1px solid #666;
width:100%;
height:100px;
padding-left:10px;
}
.content>p{
font-weight: bold;
font-size: 20px;
padding:10px;
}
.content>p>span{
font-weight: normal;
font-size:14px;
margin-left:400px;
}
.content>button{
width:70px;
height:40px;
line-height: 40px;
background: #e4393c;
border-radius: 5px;
border:0;
font-size: 16px;
font-weight: bold;
color:#fff;
margin-top:10px;
margin-left:90%;
}
.main{
width:100%;
border:1px solid #000;
overflow: hidden;
border-radius: 20px;
margin-top:20px;
padding:0 10px;
}
.main>img,.main>p{
float:left;
}
.main>img{
width:100px;
height:100px;
}
.main>p{
width:500px;
height:100px;
line-height: 100px;
padding-left:50px;
/border:1px solid #000;*/
}
.main>button{
width:70px;
height:40px;
line-height: 40px;
background: #e4393c;
border-radius: 5px;
border:0;
font-size: 16px;
font-weight: bold;
color:#fff;
float:right;
margin-top:30px;
}
2)div

你想对楼主说点什么 你最多可输入30个字符

发表

3)script
把图片做成随机数

var btn=document.querySelector('.content>button');
btn.onclick=function(){
var inputVal=document.querySelector('.content>input').value;
//动态创建元素：
//动态创建div
var div=document.createElement('div');
div.className='main';
var img=document.createElement('img');
var arr=['img/1.jpg','img/2.jpg','img/3.jpg'];
var num=Math.floor(Math.random()*3);
img.src=arr[num];
div.appendChild(img);
var p=document.createElement('p');
p.innerHTML=inputVal;
document.querySelector('.content>input').value='';
div.appendChild(p);
var button=document.createElement('button');
button.innerHTML='删除';
button.onclick=function remov(){
this.parentElement.parentElement.removeChild(this.parentElement);
}
div.appendChild(button);
document.querySelector('.container').appendChild(div);
}
仿新浪微博发布评论js代码：
1)css样式
.main{
width: 800px;
margin:20px auto;
}
span{
display: inline-block;
width: 200px;
height: 25px;
line-height: 25px;
vertical-align: middle;
text-align: left;
margin-bottom: 10px;
}
.tag{
font-size: 13px;
margin-left: 370px;
vertical-align: bottom;
text-align: center;
margin-bottom: 0;
}
.text{
width: 750px;
height: 180px;
margin:0 auto;
resize:none;
}
input{
display: inline-block;
width: 80px;
height: 50px;
background: #E2526F;
border: 0;
margin-left: 670px;
margin-top: 10px;
}
.creatediv{
width: 675px;
height: 80px;
border: 1px solid gray;
position: relative;
margin-top: 10px;
padding-left: 75px;
}
.createinput{
width: 80px;
height: 30px;
position:absolute;
right: 5px;
bottom:5px;
}
.createimg{
width: 50px;
height: 50px;
position: absolute;
top: 15px;
left: 15px;
}
.createdivs{
width:600px;
height:50px;
position: absolute;
top: 15px;
left: 85px;
}
2)div

你想对楼主说点什么
你最多可以输入30个字符

3)script
var textarea=document.getElementById("text");
var ipt=document.getElementById("ipt");
var txt=document.getElementById("txt");
ipt.onclick=function(){
var txtValue=textarea.value;
if(txtValue.length>0){
var divs=document.createElement("div");
var imgs=document.createElement("img");
var ps=document.createElement("p");
var inputs=document.createElement("input");
divs.setAttribute("class","creatediv");
imgs.setAttribute("class","createimg");
ps.setAttribute("class","createdivs");
inputs.setAttribute("class","createinput");
img.src="pic/1.jpg";
input.type="button";
inputs.value="删除";
ps.innerHTML=txtValue;
divs.appendChild(imgs);
divs.appendChild(ps);
divs.appendChild(inputs);
if(txt.children.length==0){
txt.appendChild(divs);
}else{
txt.insertBefore(divs,get_firstChild(txt));
}

    inputs.onclick=function(){
        this.parentElement.parentElement.removeChild(this.parentElement)
    }
}

}
var textarea=document.getElementById("text");
var inputs=document.getElementById("ipt");
var txt=document.getElementById("txt");
ipt.onclick=function(){
var txtValue=textarea.value;
if(txtValue.length>0){
var divs=document.createElement("div");
var imgs=document.createElement("img");
var ps=document.createElement("p");
var inputs=document.createElement("input");
divs.setAttribute("class","creatediv");
imgs.setAttribute("class","createimg");
ps.setAttribute("class","createdivs");
inputs.setAttribute("class","createinput");
imgs.src="pic/1.jpg";
inputs.type="butto";
inputs.value="删除";
ps.innerHTML=txtValue;
divs.appendChild(imgs);
divs.appendChild(ps);
divs.appendChild(inputs);
if(txt.children.length==0){
txt.appendChild(divs)
}else{
txt.appendChild(divs,get_firstChild(txt));
}

        inputs.onclick=function(){
            this.parentElement
                    .parentElement
                    .removeChild(this.parentElement)
        }

    }
}

更改网页背景色：
window.onload=function(){
document.body.bgColor="#000";
定时器 一秒钟显示一个星星 一秒钟调用star一次
window.setInterval("star()",1000);
25 }
动画主函数：
function star(){
//创建图片节点
var imgObj = document.createElement("img");
//添加src属性
imgObj.setAttribute("src","images/lele.jpg");
//添加width属性 getRandom()随机数函数
var width = getRandom(20,120);
imgObj.setAttribute("width",width);

添加层叠样式表属性(style属性 行内样式)

var x = getRandom(0,window.innerWidth);
var y = getRandom(0,window.innerHeight);
    //设置坐标 x y 为未知数
    imgObj.setAttribute("style","position:absolute;left:"+x+"px;top:"+y+"px;");
     
    //添加onclick事件属性
    //this 代表当前对象,this是一个对象,只能在函数内使用
    imgObj.setAttribute("onclick","removeImg(this)");
    //将图片节点,挂载到的父节点下
    document.body.appendChild(imgObj);

函数:求随机数函数：
function getRandom(min,max){
var random = Math.random()*(max-min)+min;
//向下取整
random = Math.floor(random);
//返回结果
return random;
}
函数:删除节点
function removeImg(obj){
document.body.removeChild(obj);
}
动态创建表格：
var json='[{"ename":"Tom", "salary":10000, "age":25},{"ename":"John", "salary":11000, "age":28},{"ename":"Mary", "salary":12000, "age":25}]';
var emps=eval(json);
var table=document.createElement('table');
var thead=document.createElement('thead');
var tr=document.createElement('tr');
for(var key in emps[0]){
var th=document.createElement('th');
th.innerHTML=key;
tr.appendChild(th);
}
thead.appendChild(tr);
table.appendChild(thead);
//创建tbody
var tbody=document.createElement('tbody');
table.appendChild(tbody);
for(var i=0;i var tr=document.createElement('tr');
for(var key in emps[i]){
var td=document.createElement('td');
td.innerHTML=emps[i][key];
tr.appendChild(td);
}
tbody.appendChild(tr);
}

document.getElementById('data').appendChild(table);

一次性定时器：setTimeout
清除一次性定时器用clearTimeout

var timer=setTimeout(show,3000);
btn1.onclick=function(){
clearTimeout(timer);
}
永久性定时器：setInterval
清除永久性定时器用clearInterval

var times=setInterval(print,1000);
btn2.onclick=function(){
clearInterval(times);
}

万年历：

• 
  1
  
  
  
  • 1
  
  
  
  


• 
  2
  
  
  
  • 2
  
  
  
  


• 
  3
  
  
  
  • 3
  
  
  
  


• 
  4
  
  
  
  • 4
  
  

• 5
  • 5
• 6
  • 6
• 7
  • 7
• 8
  • 8
• 9
  • 9
• 10
  • 10
• 11
  • 11
• 12
  • 12

Date 对象用于处理日期和时间。

 创建 Date 对象的语法：

var myDate=new Date();

 Date对象的方法：

Date()    //返回当日的日期和时间
getDate()  //从 Date 对象返回一个月中的某一天 (1 ~ 31)
getDay()  //从 Date 对象返回一周中的某一天 (0 ~ 6)
getMonth()  //从 Date 对象返回月份 (0 ~ 11)
getFullyare  //从 Date 对象以四位数字返回年份
getHours()  //返回 Date 对象的小时 (0 ~ 23)
getMinutes()  //返回 Date 对象的分钟 (0 ~ 59)
getSeconds()  //返回 Date 对象的秒数 (0 ~ 59)
getMilliseconds()  //返回 Date 对象的毫秒(0 ~ 999)

等等有很多对象方法API，可以去w3school官网查找学习

---

date示例如下：
JavaScript代码块

function time() {
        var a = new Date(); //获取当前时间
        var year = a.getFullYear(); //年
        var month = a.getMonth(); //月
        var dat = a.getDate(); //日
        var day = a.getDay(); //周
        var hour = a.getHours(); //时
        var min = a.getMinutes(); //分
        var sec = a.getSeconds(); //秒
        document.write('现在时间' + year + '年' + month + '月' + dat + '日，星期' + day + '\t' + hour + '时' + min + '分' + sec + '秒'); //最后拼接在一块
}   
time();   //调用

效果：

image

当然这个效果是静态的效果并不会动的效果，如果你想要附加给他走起来的效果的得用到定时器，定时器分为：一次定时器setTimeout、永久定时器setInterval；

永久定时器setInterval写法：
注释：设置一个定时器，到达指定时间执行我们的操作,然后定时器并没有停止，以后每隔这么长时间，都重新执行我们的操作

setInterval(function() {
        var a = new Date(); //获取当前时间
        var year = a.getFullYear(); //年
        var month = a.getMonth(); //月
        var dat = a.getDate(); //日
        var day = a.getDay(); //周
        var hour = a.getHours(); //时
        var min = a.getMinutes(); //分
        var sec = a.getSeconds(); //秒
        document.getElementById('date').innerHTML = '现在时间' + year + '年' + month + '月' + dat + '日，星期' + day + '\t' + hour + '时' + min + '分' + sec + '秒'; //最后拼接在一块，输出到指定地点
})

一次定时器setTimeout写法：
注释：设置一个定时器，到达指定的时间,执行我们的操作，定时器停止

setTimeout(function() {
        var a = new Date(); //获取当前时间
        var year = a.getFullYear(); //年
        var month = a.getMonth(); //月
        var dat = a.getDate(); //日
        var day = a.getDay(); //周
        var hour = a.getHours(); //时
        var min = a.getMinutes(); //分
        var sec = a.getSeconds(); //秒
        document.getElementById('date').innerHTML = '现在时间' + year + '年' + month + '月' + dat + '日，星期' + day + '\t' + hour + '时' + min + '分' + sec + '秒'; //最后拼接在一块
},2000)    //2000意思就是两秒之后执行操作

一、 认识正则
1、 什么是正则
正则就是一个事物的规则。什么是正则表达式，就是描述事物规则的式子。
2、 正则能帮我们干什么？
1）做表单验证
2）制作QQ表情
3）制作小偷程序
正则就是做字符串的查找、匹配、分割、替换。是字符串方法的升级版。
3 、正则难学吗？
这是一个邮箱的正则表达式 \w+@\w+(.com|.cn|.org|.net){1,3}
对不懂正则规则的人，正则就是一堆乱七八糟的字符串就，正则像医生的字，道士的符，就是天书。只要学习这个规则，其实正则对我们来说就非常简单了。正则非常好学。
4 如何学习正则
学好正则只需要学两个东西
1） 正则表达式：就是描述事物规则的式子
2） 正则函数：没有正则函数，正则表达式就是一堆乱七八糟的字符串，正则表达式要起作用，必须和正则函数一起使用。
二 、正则的基本语法
1 声明一个正则对象
①用正则构造函数
var patt = new RegExp(‘正则表达式’，’修饰符’);
②使用正则字面量的方式
var patt = /正则表达式（描述事物规则的字符串）/修饰符;
2 正则表达式
正则表达式分四块内容，只要学好这四块，你就可描述任务事物的规则了。
如我们可以定义一个电话号码的规则表达式，这样就可以检查一个字符串是否是电话号码了。
① 定界符 ，正则中的定界符就是定义正则表达式边界的。符号是 / /,作用就是告诉程序，定界符内的是正则表达式，要按照正则的语法规则进行解析。
② 原子，自然界中的原子就是组成物质的最小单位。正则中的原子是组成正则表达式的最小单位。原子分三种
（1） 普通原子
（2） 转义符号、特殊符号,常见的转义符号有\n 换行 \r回车 \t 水平制表符 /输出定界符 \”输出双引号。。。。。。
（3） 通配符
\d 表示任意一位数字0-9 \D任意一位非数字 非0-9
\w 表示任意一位数字、字母下划线 \W任意一位非数字字母下划线
\s 表示任意一位空白字符 如空格 \S任意一位非空白字符
\b 表示一个单词的边界 空格 \B表示非单词边界 非空格
③ 元字符
元字符是修饰原子的，不能单独单独存在
（1）[] 从多个原子中选一个
(2) ^ 如果是出现在[]中，表示取反的意思，一定不能有
(3) ^ 如果出现在正则表达式开头，表示以xxx开头的意思
(4) / 字符串要匹配此表达式，必须满足三个条件
1 字符串以a开头
2 字符串以a结尾
3 字符串只能含一个a
/^ a+$/ 字符串要匹配此表达式，必须满足三个条件
1 字符串以a开头
2 字符串以a结尾
3 字符串可以含一个或多个a
（5）+ 表示匹配前面的原子一次或多次，大于0次
（6）? 表示匹配前面的原子0次或1次
（7）* 表示匹配前面的原子0次1次或多次，任意次
（8）{m} 匹配前面的原子m次
（9）{m,} 前面的原子最少出现m次
（10）{m,n} 前面的原子最少出现m次,最多出现n次
(11) | 从多分支中选一个 abc|opq|xyz
(12) . 表示除了换行符以外的任意符号
（13） .* 匹配任意字符（除换行符）任意多次，这种匹配是贪婪匹配，如果有好几部分满足，取最长符合要求的子串
（14） .*? 不贪婪的匹配任意符号任意多次
（15） （）叫做模式单元
他的几个作用
1 把（）中的内容作为整体处理 ab|c a(b|c)
2 ()中的内容会在内存中单独存放一份，方便使用
3通过正则的匹配函数，返回一个数组，数组中下标为0的元素中放的是满足正则规则的子串，下标为1的元素中放的是，第一个（）中匹配的内容， 下标为1的元素中放的是，第一个（）中匹配的内容，依次类推。
4如果不想匹配括号中的内容 使用(?:) 三元运算符
④ 修饰符
i 忽略大小写
m 把字符串作为多行对待
g 全局匹配
3 正则函数
分两大类，一类是字符串的正则方法，一类是正则对象的方法
一 字符串的正则方法
string.match()
string.search()
string.replace()
string.split()
二 正则对象的方法
patt.test()
patt.exec()
patt.complie()

重点、几个例子

点击导航栏内容变

• 新闻


• 娱乐


• 综艺


• 军事

• 还在打王者LOL呢？国家大事你关心了么？


• 元芳薛之谦事件你怎么看？


• 娱乐圈的那点事，潜规则？


• 淘宝双十一你们是不是又要剁手了？

万年历

• 
  1
  
  
  
  • 春节
  
  
  
  


• 
  2
  
  
  
  • 二月二龙抬头
  
  
  
  


• 
  3
  
  
  
  • 三八妇女节
  
  
  
  


• 
  4
  
  
  
  • 4444444444
  
  

• 5
  • 五月劳动节
• 6
  • 666666666
• 7
  • 777777777
• 8
  • 888888888
• 9
  • 999999999
• 10
  • 十月一日国庆节
• 11
  • 11111111111
• 12
  • 1212121212

js轮播实现

var banner=document.querySelectorAll('.banner>ul>li>a>img');
var point=document.querySelectorAll('.banner>p>span');
var timer;
var i=0;

function play(){
  timer=setInterval(function(){
        banner[i].style.display='none';
        point[i].style.background='#8b8b8b';
        i++;
        if(i>1){
            i=0;
        }
        banner[i].style.display='block';
        point[i].style.background='#ff8800
    },2000)
}

play();

//给box添加鼠标移入移出事件
var box=document.querySelector('.banner>ul');
box.onmouseover=function(){
    clearInterval(timer);
}

box.onmouseout=function(){
play();
}

//点击圆点切换

for(var j=0;j point[j].index=j;
point[j].onclick=function(){
var nu=this.index;
for(var b=0;b banner[b].style.display='none';
point[b].style.background='#8b8b8b';
}
banner[nu].style.display='block';
point[nu].style.background="#ff8800";
}
}

....................................................收工