js总结（！！！）

作者: 3ab670b99521 | 来源:发表于2018-08-16 10:22 被阅读0次

简述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的运用方式
内部运用：在</body>结束语随意位置就可以，写入
<script type="text/javascript">
写入脚本js
<script/>
外部链接：
<script type="text/javascript" src="写入你的路径"></script>

声明变量：

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)

三.通过选择器查找

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

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

console.log(lia);

lia.style.color='#f0f';

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');

例：<body>

function myFunction(a,b){

    alert('hello js');

}

带参数的函数

function myFunction(a,b){

    alert(a*b);

}

外链接

var bth=document.getElementById('btn');

bth.onclick=function(){

    alert('点击');

}

</script>

</body>

练习：

div{

    width:200px;

    height:200px;

    background:green;

}

</style>
<body>

<div></div>
</body>
<script>
第一种方法

var a=document.getElementById('btn');

a.onclick=function(){

var b=document.querySelector('div');

b.style.display='none';

var a=document.getElementById('btn');

a.onclick=function(){

var b=document.querySelector('div');

b.style.display='block';

}

第二种方法
var btn=document.querySelector('#btnn');

var div=document.querySelector('div');

var num=1;

btn.onclick=function(){

 if(num==1){

     div.style.display='none';

     num=0;

 }else{

     div.style.display='block';

     num=1;

 }

}
</script>

正则：

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.length;j++){
point[j].index=j;
point[j].onclick=function(){
var nu=this.index;
for(var b=0;b<point.length;b++){
banner[b].style.display='none';
point[b].style.background='#8b8b8b';
}
banner[nu].style.display='block';
point[nu].style.background="#ff8800";
}
}

计时器：

css样式

<button class='btn1'>停止一次性定时器</button>
<button class='btn2'>停止永久性定时器</button>
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 newObj=clone(student);
student.friend[0]='rose';
console.log(student.friend[0]);
console.log(newObj.friend[0]);
事件委托：
事件委托：可以简单第理解为将子集的事件委托给父级来处理
div

<div class='boxs'>
<button class='btn1'>按钮1</button>
<button class='btn2'>按钮2</button>
</div>
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.length;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
<div class='container'>
<div class='content'>
<p>你想对楼主说点什么 <span>你最多可输入30个字符</span></p>
<input type="text" name="" placeholder="请输入你想要说的内容">
<button>发表</button>
</div>
</div>
3)script
把图片做成随机数

    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)");
    //将图片节点,挂载到<body>的父节点下
    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<emps.length;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);
}

万年历：
<style>
*{
margin:0;
padding:0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}

.ul{
width:500px;
background: #999;
overflow: hidden;
padding-bottom: 10px;
}
.ul li{
float:left;
width:100px;
margin-left:20px;
height:50px;
line-height: 50px;
text-align: center;
background: #000;
color:#fff;
margin-top:10px;
}
div{
width:500px;
height:50px;
border:1px solid #000;
}
.ul>li>ul{
display:none;
}
</style>
<body>
<ul class='ul'>
<li>
1
<ul>
<li>1</li>
</ul>
</li>
<li>
2
<ul>
<li>2</li>
</ul>
</li>
<li>
3
<ul>
<li>3</li>
</ul>
</li>
<li>
4
<ul>
<li>4</li>
</ul>

</li>
<li>
    5
    <ul>
        <li>5</li>
    </ul>
</li>
<li>
    6
    <ul>
        <li>6</li>
    </ul>
</li>
<li>
    7
    <ul>
        <li>7</li>
    </ul>
</li>
<li>
    8
    <ul>
        <li>8</li>
    </ul>
</li>
<li>
    9
    <ul>
        <li>9</li>
    </ul>
</li>
<li>
    10
    <ul>
        <li>10</li>
    </ul>
</li>
<li>
    11
    <ul>
        <li>11</li>
    </ul>
</li>
<li>
    12
    <ul>
        <li>12</li>
    </ul>
</li>

</ul>
<div></div>
<script>
var li = document.querySelectorAll('.ul>li');
var div = document.querySelector('div');
for(var i = 0; i < li.length; i++) {
li[i].onmouseover = function() {
this.style.background = '#fff';
this.style.color = '#f00';
div.innerHTML = this.children[0].children[0].innerHTML;
}
li[i].onmouseout = function() {
this.style.background = '';
this.style.color = '';
}
}
</script>

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) $如果出现在正则表达式结尾，表示以xxx结尾的意思 /^ a$ / 字符串要匹配此表达式，必须满足三个条件
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()

重点、几个例子

点击导航栏内容变
<style>
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
a{
text-decoration: none;
}
.container{
width:600px;
margin:100px auto;
}
.nav{
height:40px;
line-height: 40px;
overflow: hidden;
}
.nav li{
float:left;
}
.nav li a{
display:inline-block;
width:150px;
height:40px;
text-align: center;
color:#fff;
background: #000;
}
.nav li:first-child a{
background: #f00;
}

    /*box*/
    .box{
        position: relative;
    }
    .box li{
        width:600px;
        height:300px;
        line-height: 300px;
        text-align: center;
        position: absolute;
        background: #eee;
        display: none;
    }
    .box li:first-child{
        display: block;
    }
</style>

</head>
<body>
<div class='container'>

<ul class='nav'>
<li><a href="#">新闻</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">综艺</a></li>
<li><a href="#">军事</a></li>
</ul>
<ul class='box'>
<li>还在打王者LOL呢？国家大事你关心了么？</li>
<li>元芳薛之谦事件你怎么看？</li>
<li>娱乐圈的那点事，潜规则？</li>
<li>淘宝双十一你们是不是又要剁手了？</li>
</ul>
</div>

<script>
  //找到nav中的li
    var navLi=document.querySelectorAll('.nav li');
  //找到box中的li
    var boxLi=document.querySelectorAll('.box li');
  //遍历navLi
    for(var i=0;i<navLi.length;i++){
        navLi[i].index=i;
        navLi[i].onclick=function(){
            //获取当前的索引值
          var num=this.index;
        for(var j=0;j<navLi.length;j++){
            //统一样式
            navLi[j].firstElementChild.style.background='#000';
            boxLi[j].style.display='none';
        }  
        navLi[num].firstElementChild.style.background='#f00';  
        boxLi[num].style.display='block';  
        }
    }
</script>

万年历
<style>
*{
margin:0;
padding:0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}

.ul{
    width:500px;
    background: #999;
    overflow: hidden;
    padding-bottom: 10px;
}
.ul li{
    float:left;
    width:100px;
    margin-left:20px;
    height:50px;
    line-height: 50px;
    text-align: center;
    background: #000;
    color:#fff;
    margin-top:10px;
}
div{
    width:500px;
    height:50px;
    border:1px solid #000;
}
.ul>li>ul{
    display:none;
}

</style>
<body>
<ul class='ul'>
<li>
1
<ul>
<li>春节</li>
</ul>
</li>
<li>
2
<ul>
<li>二月二龙抬头</li>
</ul>
</li>
<li>
3
<ul>
<li>三八妇女节</li>
</ul>
</li>
<li>
4
<ul>
<li>4444444444</li>
</ul>

    </li>
    <li>
        5
        <ul>
            <li>五月劳动节</li>
        </ul>
    </li>
    <li>
        6
        <ul>
            <li>666666666</li>
        </ul>
    </li>
    <li>
        7
        <ul>
            <li>777777777</li>
        </ul>
    </li>
    <li>
        8
        <ul>
            <li>888888888</li>
        </ul>
    </li>
    <li>
        9
        <ul>
            <li>999999999</li>
        </ul>
    </li>
    <li>
        10
        <ul>
            <li>十月一日国庆节</li>
        </ul>
    </li>
    <li>
        11
        <ul>
            <li>11111111111</li>
        </ul>
    </li>
    <li>
        12
        <ul>
            <li>1212121212</li>
        </ul>
    </li>
</ul>
<div></div>
<script>
    var li = document.querySelectorAll('.ul>li');
    var div = document.querySelector('div');
    for(var i = 0; i < li.length; i++) {
        li[i].onmouseover = function() {
            this.style.background = '#fff';
            this.style.color = '#f00';
            div.innerHTML = this.children[0].children[0].innerHTML;
        }
        li[i].onmouseout = function() {
            this.style.background = '';
            this.style.color = '';
        }
    }
</script>

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();
}

//点击圆点切换

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

js总结（！！！）

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

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

js总结（！！！）

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

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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