1.案例——点击button换照片

html部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>换照片</title>
</head>
<body><button id="btn">点我</button><br><image src= 'images/a.jpg' id = 'a'></image><script type="text/javascript" src="js/button.js"></script>
</body>
</html>

js部分

//1.获取元素
var btn = document.getElementById('btn');
var image_a = document.getElementById('a') ;
//2.给按钮注册事件
var flag = 1;//当flag值是1的时候对应a.jpg,当flag值是2的时候对应b.jpg
btn.onclick = function(){//3.切换图片if (flag == 1) {image_a.src = 'images/b.jpg';flag = 2;
}else{image_a.src = 'images/a.jpg';flag = 1;
}
}

实现效果

2.案例——点击图片显示/隐藏，button上的字跟着变化

html部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>点击切换</title><link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body><input type="button" id="btn" value="隐藏"><div id="box" ></div><script type="text/javascript" src="js/box.js"></script>
</body>
</html>

css部分

#box{width: 500px;height: 300px;background-color: red;
}
.show{display: block;
}
.hidden{display: none;
}

js部分
（方法一写法）

//方法一:
//1.获取元素
var btn = document.getElementById('btn');
//2.给按钮注册事件
var flag = 1;
btn.onclick = function(){var box = document.getElementById('box');//3.控制div的显示和隐藏box.className = 'hidden';//如何设置按钮对应的属性名字if (flag == 1) {btn.value = '显示';flag = 2;box.className = 'hidden';}else{btn.value = '隐藏';box.className = 'show';flag = 1;}
}

（方法二写法）

//方法二:
//this的几种情况
//1.普通函数中的this ——》window
//2.构造函数中的this ——》是当前构造函数创建的对象
//3.方法中的this——》方法所属的对象
//4.事件处理函数中的this——》事件源，谁调用的该事件this指向谁
////1.获取元素
var btn = document.getElementById('btn');
//2.给按钮注册事件
var isShow = true;
btn.onclick = function(){var box = document.getElementById('box');//3.控制div的显示和隐藏if (isShow) {box.className = 'hidden';this.value = '显示';isShow = false;}else{box.className = 'show';this.value = '隐藏';isShow = true;}
}

实现效果

3.取消a标签的默认行为

a标签的默认行为未取消时

html部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片放大</title>
</head>
<body><a href="http://www.baidu.com" id="link">百度</a></body>
<script type="text/javascript" src="js/fangda.js"></script>
</html>

js部分

var btn = document.getElementById('link');
btn.onclick = function(){alert("被点击了");//取消a标签的默认行为//return false;
}

实现效果

取消时

js部分

var btn = document.getElementById('link');
btn.onclick = function(){alert("被点击了");//取消a标签的默认行为return false;
}

实现效果

4.点击图片放大

html部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片放大</title><link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body><h2>美女书屋</h2><div id="bookshop"><a href="images/1.jpg" title="一号"><img src="data:images/1-small.jpg" width = "100px"></a><a href="images/2.jpg" title="二号"><img src="data:images/2-small.jpg" width = "100px"></a><a href="images/3.jpg" title="三号"><img src="data:images/3-small.jpg" width = "100px"></a><a href="images/4.jpg" title="四号"><img src="data:images/4-small.jpg" width = "100px"></a></div><div style="clear: both"></div><img id="image" src="data:images/placeholder.png" alt="" width="450px" /><p id="des">选择一个图片</p></body>
<script type="text/javascript" src="js/fangda.js"></script>
</html>

css部分

body{font-family: "Helvetica","Arial",serif;color: #333;background-color: #ccc;margin: 1em 10%;
}
h1{color: #333;background-color: transparent;
}
a{color: #c60;background-color: transparent;font-weight: bold;
}

js部分

//1.获取到所有的a标签
var bookshop = document.getElementById('bookshop');
var links = bookshop.getElementsByTagName('a');
//2.给所有的a标签注册事件
for (var i = 0; i < links.length; i++) {//给所有的a标签注册事件var link = links[i];link.onclick = function(){//4.切换图片//获取占位的大的img标签var image = document.getElementById('image');//把img标签的src属性设置为当前点击的a标签的hrefimage.src = this.href;//5.设置a标签的内容//获取p标签var des = document.getElementById('des');//当前点击的a标签的title属性为this.title//如何设置p标签显示的内容des.innerText = this.title;//3.取消a的默认行为return false;}
}

补充知识
js中innerHTML与innerText的用法与区别：
实现效果
1、js中innerHTML的用法：

innerHTML可获取或设置指定元素标签内的 html内容，从该元素标签的起始位置到终止位置的全部内容(包含html标签)。

获取元素的内容：element.innerHTML;

给元素设置内容：element.innerHTML =htmlString;

代码示例为：

<p id="test"><font color="#000">获取段落p的 innerHTML</font></p>

执行：

document.getElementById("test").innerHTML

输出内容为:<font color="#000">获取段落p的 innerHTML</font>
2、js中innerText的用法：

innerText可获取或设置指定元素标签内的文本值，从该元素标签的起始位置到终止位置的全部文本内容(不包含html标签)。

获取元素的内容：element.innerText;
给元素设置内容：element.innerText = string;

代码示例为：

<p id="test"><font color="#000">获取段落p的 innerHTML</font>测试测试</p>

执行：

document.getElementById("test").innerHTML

输出内容为: 获取段落p的 innerHTML试测试

5.给文本框赋值

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>设置文本框的值</title>
</head>
<body><input type="text" ><br><input type="text" ><br><input type="text" ><br><input type="text" ><br><input type="text" ><br><input type="text" ><br><input type="text" ><br><input type="text" ><br><input id="btn" type="button" value="获取文本框的值"><script type="text/javascript">//给所有的文本框赋值var inputs = document.getElementsByTagName('input');for (var i = 0; i < inputs.length-1; i++) {var input = inputs[i];if(input.type == 'text'){input.value = i;}}//2.当点击按钮的时候,获取所有文本框的值var btn = document.getElementById('btn');btn.onclick = function(){var array = [];for(var i = 0; i<inputs.length-1;i++){var input = inputs[i];if(input.type == 'text'){array.push(input.value);}}console.log(array.join('|'));}</script>
</body>
</html>

实现效果：

6.检测用户名和密码

检测用户名是否是3-6位，密码是否是6-8位,如果不满足要求高亮显示文本框
html部分：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>检测用户名和密码</title><style type="text/css">.bg{background-color: yellow;}
</style>
</head>
<body><input type="text" id="txtUserName" ><br><input type="password" id='txtUserPassword'><br><input type="button" value="登录" id="btnLogin">
</body>
</html>

js部分：

<script type="text/javascript">//检测用户名是否是3-6位，密码是否是6-8位,如果不满足要求 高亮显示文本框var btnLogin = document.getElementById('btnLogin');btnLogin.onclick = function(){var txtUserName = document.getElementById('txtUserName');var txtUserPassword = document.getElementById('txtUserPassword');//检测用户名3-6位if (txtUserName.value.length <3 || txtUserName.value.length>6) {txtUserName.className = 'bg';return;}else{txtUserName.className = '';}//检测密码是否是6-8位if (txtUserPassword.value.length<6 || txtUserPassword.value.length>8) {txtUserPassword.className = 'bg';return;}else{txtUserPassword.className = '';}}</script>

实现效果

7.设置下拉框，点击按钮随机选中

html部分：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>设置下拉框选项</title>
</head>
<body><input type="button" value="设置" id="btnSet"><select id = "selCities"><option value="1">北京</option><option value="2">上海</option><option value="3">广州</option><option value="4">深圳</option><option value="5">武汉</option></select>
</body>
</html>

js部分：

<script type="text/javascript">//1.给按钮注册事件var btn = document.getElementById('btnSet');btn.onclick = function(){//2.获取下拉框中的所有optionvar sel = document.getElementById('selCities');var options = sel.getElementsByTagName('option');//3.随机生成索引//Math.random()范围[0,1)var randomIndex = parseInt(Math.random()*options.length);//4.根据索引获取option 并让option选中var option = options[randomIndex];option.selected = true;}</script>

8.搜索文本框

1.文本框被选中的时候文本框清空,并让字体变为黑色
2.当文本框失去焦点,如果文本框内容为空则还原文本框里的文字,并让字体变为灰色

html部分：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文本框搜索</title><style type="text/css">.gray{color: gray;}.black{color: black;}
</style>
</head>
<body><input type="text" class="gray" value="请输入搜索关键字" id="txtSearch"><input type="button" value="搜索" id="btnSearch">
</body>
</html>

js部分：

<script type="text/javascript">//1.文本框被选中的时候 文本框清空,并让字体变为黑色//2.当文本框失去焦点,如果文本框内容为空则还原文本框里的文字,并让字体变为灰色var textbtn = document.getElementById('txtSearch');//获取焦点的事件focustxtSearch.onfocus = function(){if (this.value =="请输入搜索关键字") {this.value = '';this.className = 'black';}}//2.~~txtSearch.onblur = function(){//文本框内容为空if(this.value.length =='' ){this.value = "请输入搜索关键字";this.className = 'gray';}}</script>

实现效果：

9.反选全选

1.全选
2.当点击子的checkbox,如果所有的子的checkbox都被选中,让父的checkbox也选中，如果有一个子的未被选中父的也取消选中

html部分：

<style type="text/css">* {padding: 0;margin: 0;}.wrap {width: 300px;margin: 100px auto 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;width: 300px;}th,td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}th {background-color: #09c;font: bold 16px "微软雅黑";color: #fff;}td {font: 14px "微软雅黑";}tbody tr {background-color: #f0f0f0;}tbody tr:hover {cursor: pointer;background-color: #fafafa;}</style></head>
<body><div class="wrap"><table><thead><tr><th><input type="checkbox" id="j_cbAll" /></th><th>商品</th><th>价钱</th></tr></thead><tbody id="j_tb"><tr><td><input type="checkbox" /></td><td>iPhone8</td><td>8000</td></tr><tr><td><input type="checkbox" /></td><td>iPad Pro</td><td>5000</td></tr><tr><td><input type="checkbox" /></td><td>iPad Air</td><td>2000</td></tr><tr><td><input type="checkbox" /></td><td>Apple Watch</td><td>2000</td></tr></tbody></table><input type="button" value="  反 选  " id="btn"></div></body>
</html>

js部分

<script type="text/javascript">//1.全选//1.1获取父checkbox 注册点击事件var j_cbAll = document.getElementById('j_cbAll');var j_tb = document.getElementById('j_tb');var inputs = j_tb.getElementsByTagName('input');j_cbAll.onclick = function(){//1.2找到所有的子checkbox for(var i = 0;i < inputs.length;i++){var input = inputs[i];if (input.type == 'checkbox') {//让这些checkbox的状态跟父checkbox保持一致可以通过this找到事件源input.checked = this.checked;}}}//2.当点击子的checkbox,如果所有的子的checkbox都被选中,让父的checkbox也选中，如果有一个子的未被选中 父的也取消选中for(var i = 0;i < inputs.length;i++){//此处的循环是用于子的checkbox，注册点击事件var input = inputs[i];//判断是否受checkboxif (input.type != 'checkbox') {continue;//结束当前循环 继续下一次循环}//给子的checkbox注册点击事件input.onclick = function(){checkAllCheckBox();}//判断父的checkbox的状态，封装成函数function checkAllCheckBox(){var isAllChecked = true;//判断所有子的checkbox受否都被选中for(var i = 0;i<inputs.length;i++){var input = inputs[i];if(input.type !='checkbox'){continue;}//判断所有的checkbox是否都被选中//假设所有的checkbox都被选中if(!input.checked){isAllChecked = false;}}//设置父的checkbox状态j_cbAll.checked=isAllChecked; }}//3.反选//3.1给反选按钮注册点击事件var btn = document.getElementById('btn');btn.onclick = function(){//3.2找到所有的子的checkbox 让其反选for(var i = 0;i<inputs.length;i++){var input = inputs[i];//判断是否是checkboxif (input.type != 'checkbox'){continue;}//反选input.checked = !input.checked;//父的checkboxcheckAllCheckBox();}}</script>

实现效果

10.隔行变色

html部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>隔行变色</title>
</head>
<body><style type="text/css"></style><ul id="mv"><li>杨幂</li><li>刘诗诗</li><li>林允儿</li><li>林依晨</li><li>李冰冰</li></ul>
</body>
</html>

js部分

<script type="text/javascript">var mv = document.getElementById('mv');mv.getElementsByTagName('li');//判断是否有子节点if(mv.hasChildNodes()){for(var i = 0;i < mv.children.length;i++){var li = mv.children[i];if(i%2 == 0){li.style.backgroundColor = 'red';}else{li.style.backgroundColor = 'purple';}}}</script>

实现效果

11.使用element.innerHTML动态创建元素

html部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动态创建元素</title>
</head>
<body><input type="button" value="按钮" id="btn"><div id="box"></div></body>
</html>

js部分

<script type="text/javascript">var btn = document.getElementById('btn');var box = document.getElementById('box');btn.onclick = function(){box.innerHTML = 'hello <p>world</p>';}</script>

实现效果

12.使用document.createElement()创建元素

实现效果
点击按钮动态创建列表鼠标放上去高亮显示
html部分：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动态创建元素3</title>
</head>
<body><input type="button" value="按钮" id="btn"><div id="box"></div></body>
</html>

js部分

<script type="text/javascript" src="common.js"></script><script type="text/javascript">//点击按钮 动态创建列表 鼠标放上去高亮显示var datas = ['西施','貂蝉','刘亦菲','芙蓉姐姐'];my$('btn').onclick = function(){//动态创建ul,内存中创建对象var ul = document.createElement('ul');//把ul放到页面上my$('box').appendChild(ul);for (var i = 0;i<datas.length;i++){var data = datas[i];//在内存中动态创建livar li = document.createElement('li');//把li添加到DOM树，并且会重新绘制ul.appendChild(li);//设置li中显示的内容// li.innerText = data;//innerText有兼容性问题setInnerText(li,data);//开始处理高亮显示//给li注册事件li.onmouseover = liMouseOver;li.onmouseout = liMouseOut;}}//当鼠标经过li的时候执行function liMouseOver(){//鼠标经过高亮显示this.style.backgroundColor = 'red';}function liMouseOut(){ //鼠标离开高亮显示this.style.backgroundColor = '';}//设置InnerText的兼容性问题function setInnerText(element,content){//判断当前浏览器是否支持innerText(若当前浏览器支持innerText就用InnerText，不支持就用TextContent)if(typeof element.innerText =='string'){//若不是string的话就是undefinedelement.innerText = content;}else{element.textContent = content;}}</script>

common.js

function my$(id){return document.getElementById(id);
}
//处理浏览器兼容性
//获取第一个子元素
function getfirstElementChild(element){var node,nodes = element.childNodes, i = 0;while(node = nodes[i++]){if(node.nodeType == 1){return node;}}return null;
}//设置InnerText和TextContent的兼容性问题
function setInnerText(element,content){//判断当前浏览器是否支持innerText(若当前浏览器支持innerText就用InnerText，不支持就用TextContent)
if(typeof element.innerText =='string'){//若不是string的话就是undefinedelement.innerText = content;}else{element.textContent = content;
}

实现效果

13.动态创建删除表格

html部分：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动态创建表格</title><style>#box table{border-collapse: collapse;}
</style>
</head>
<body><div id="box"></div></body>
</html>

js部分

<script src="common.js"></script><script>var datas = [{name:'aa',subject:'语文', score:34},{name:'bb',subject:'数学', score:45},{name:'cc',subject:'英语', score:56},{name:'dd',subject:'政治', score:67},{name:'ee',subject:'历史', score:67},{name:'ff',subject:'物理', score:78},];//表头数据var headDatas = ['姓名','科目','成绩','操作'];//1.创建tablevar table = document.createElement('table');my$('box').appendChild(table);//将table加入box中table.border = '1px';table.width = '400px';//2.创建表头var thead = document.createElement('thead');table.appendChild(thead);var tr = document.createElement('tr');thead.appendChild(tr);tr.style.height = '40px';tr.style.backgroundColor='lightgray';//遍历头部数据,创建thfor(var i=0;i<headDatas.length;i++){var th = document.createElement('th');tr.appendChild(th);setInnerText(th,headDatas[i]);//给th元素设置内容}//调用setInnerText,兼容性问题//3.创建数据行var tbody = document.createElement('tbody');table.appendChild(tbody);for(var i=0;i<datas.length;i++){//一个学生的成绩var data = datas[i];tr = document.createElement('tr');tbody.appendChild(tr);//遍历对象 创建列for(var key in data){var td = document.createElement('td');tr.appendChild(td);setInnerText(td,data[key]);}//生成删除对应的列td = document.createElement('td');tr.appendChild(td);//删除的超链接var link = document.createElement('a');td.appendChild(link);link.href = 'javascript:void(0)';setInnerText(link,'删除');link.onclick = linkDelete;}function linkDelete() {// removeChild()// 获取父元素// // 获取要删除的行var tr = this.parentNode.parentNode;tbody.removeChild(tr);return false;}</script>

common.js

function my$(id) {return document.getElementById(id);
}// 处理浏览器兼容性
// 获取第一个子元素
function getFirstElementChild(element) {var node, nodes = element.childNodes, i = 0;while (node = nodes[i++]) {if (node.nodeType === 1) {return node;}}return null;
}// 处理浏览器兼容性
// 获取下一个兄弟元素function getNextElementSibling(element) {var el = element;while (el = el.nextSibling) {if (el.nodeType === 1) {return el;}}return null;}// 处理innerText和textContent的兼容性问题
// 设置标签之间的内容
function setInnerText(element, content) {// 判断当前浏览器是否支持 innerTextif (typeof element.innerText === 'string') {element.innerText = content;} else {element.textContent = content;}
}

实现效果

14.菜单栏点击高亮显示

html部分：

 <style>#menu ul li.current {background-color: burlywood;}#menu ul li a {text-decoration: none;}</style>
</head>
<body><div id="menu"><ul><li class="current"><a href="javascript:void(0)">首页</a></li><li><a href="javascript:undefined">播客</a></li><li><a href="javascript:void(0)">博客</a></li><li><a href="javascript:void(0)">相册</a></li><li><a href="javascript:void(0)">关于</a></li><li><a href="javascript:void(0)">帮助</a></li></ul></div>
</body>
</html>

js部分

<script type="text/javascript" src="js/common.js"></script><script type="text/javascript">//void是运算符//执行void后面的表达式 并始终返回undefined// var menu = document.getElementById('menu');var menu = my$('menu');//获取menu中的ul(ul是第一个元素)var ul = getfirstElementChild(menu);for(var i = 0;i<ul.children.length;i++){var li = ul.children[i];//拿到每一个li//获取li中的a标签var link = getfirstElementChild(li);link.onclick =linkClick;//注意此处不要加小括号 因为此时是把函数赋给onclick,而不是函数的调用}function linkClick(){//让其他所有的li取消高亮显示for(var i = 0;i<ul.children.length;i++){var li = ul.children[i];li.className = '';}//让当前a标签所在的li高亮显示//this是当前点击的a标签对应的元素(this是事件源)this.parentNode.className = 'current';//取消后续内容的执行return false;}</script>

common.js部分

function my$(id){return document.getElementById(id);
}
//处理浏览器兼容性
//获取第一个子元素
function getfirstElementChild(element){var node,nodes = element.childNodes, i = 0;while(node = nodes[i++]){if(node.nodeType == 1){return node;}}return null;
}

取消高亮显示

15.选水果

html部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>选择水果</title>
</head>
<body><style type="text/css">select{width: 200px;height: 200px;background-color: #33cccc;font-size: 20px;}
</style><select id="all" multiple="multiple"><option>苹果</option><option>橘子</option><option>西瓜</option><option>哈密瓜</option><option>草莓</option><option>榴莲</option></select><input type="button" value=">>" id="btn1"><input type="button" value="<<" id="btn2"><input type="button" value=">" id="btn3"><input type="button" value="<" id="btn4"><select id="select" multiple="multiple"></select></body>
</html>

js部分

<script type="text/javascript" src="common.js"></script><script type="text/javascript">//1.全部选择var select = document.getElementById('select');var btn1 = document.getElementById('btn1');var all = document.getElementById('all');btn1.onclick = function(){//获取select下面的所有元素//若从上往下索引错误,children被移走之后 索引会重新排列//若从下往上索引-顺序错误// var alls = document.getElementById('all');// for(var i = alls.children.length-1;i>=0;i--){//     var all = alls.children[i];//  select.appendChild(all)// }// //方法索引号为0var len = all.children.length;for(var i = 0;i<len;i++){var option = all.children[0];select.appendChild(option);}}//全部左移var btn2 = document.getElementById('btn2');btn2.onclick = function(){var len = select.children.length;for(var i = 0;i<len;i++){var option = select.children[0];all.appendChild(option);}}//单个右移// var btn3 = document.getElementById('btn3');// btn3.onclick = function(){//  var option = all.children[0];//    select.appendChild(option);// }// //单个左移// var btn4 = document.getElementById('btn4');// btn4.onclick = function(){//   var option = select.children[0];//     all.appendChild(option);// }//左边多选往右移var btn3 = document.getElementById('btn3');btn3.onclick = function(){//找到所有选中的optionvar array = [];//存储选中的optionvar len = all.children.length;for(var i = 0;i<len;i++){var option = all.children[i];if(option.selected){array.push(option);//去掉option选中之后的效果option.selected = false;}}for(var i = 0;i<len;i++){var option = array[i];select.appendChild(option);}}//左边多选往右移var btn4 = document.getElementById('btn4');btn4.onclick = function(){var array = [];for(var i = 0;i<select.children.length;i++){var option = select.children[i];if(option.selected){array.push(option);//去掉option选中之后的效果option.selected = false;}}for(var i = 0;i<select.children.length;i++){var option = array[i];all.appendChild(option);}}</script>

实现效果

16.图片跟着鼠标飞

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>跟着鼠标飞</title>
</head>
<body><img src="data:images/tianshi.gif" id="tianshi" alt=""><style type="text/css">#tianshi {position: absolute;}body{line-height: 1000px;}</style>
<script type="text/javascript">var tianshi = document.getElementById('tianshi');document.onmousemove = function(e){//处理兼容性问题e = e || window.event;//鼠标在可视区域的位置// tianshi.style.left = e.clientX-20 + 'px';// tianshi.style.top = e.clientY + 'px';tianshi.style.left = e.pageX-20 + 'px';tianshi.style.top = e.pageY + 'px';
//鼠标在页面中的位置}
</script>
</body>
</html>

实现效果

17.文本框中只允许输入数字，不能输入字母

按退出键可进行撤销

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>输入数字</title>
</head>
<body><input type="text" name="" id="box"><script type="text/javascript">//学习键盘事件//keydown 键盘按下的时候//keyup 键盘弹起的时候//两者区别  keydown的时候按键未录入文本框  keyup时按键已录入文本框var txt = document.getElementById('box');txt.onkeydown = function(e){//判断按下的按键是否是数字//先做兼容性处理e = e||window.event;//e.keycode键盘码 keycode的值在48-57是数字if((e.keyCode < 48 || e.keyCode>57 ) &&e.keyCode!==8){//非数字取消默认行为// e.preventDefault();return false;}}</script>
</body>
</html>

实现效果

18.删除提示（定时器）

代码部分：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>删除成功</title><style type="text/css">body{margin: 0;padding: 0;}#tip{width: 150px;height: 30px;background-color: lightgray;opacity: 0.5;margin: 200px auto;padding-top: 5px;text-align: center;color: red;display: none;}
</style></head>
<body><input type="button" id="btn" value="删除"><div id="tip">删除成功</div><script type="text/javascript">//当页面的所有元素创建完成之后执行，不需要等待外部文件下载完毕var btn = document.getElementById('btn');btn.onclick = function(){//进行删除操作//显示删除成功的tipvar tip = document.getElementById('tip');tip.style.display = 'block';setTimeout(function(){tip.style.display = 'none';},3000);}
</script>
</body>
</html>

实现效果

19.点击盒子向右移动

获取盒子当前的位置 offsetLeft offsetTop

代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>简单动画</title><style type="text/css">body{margin: 0;}#box{position: relative;background-color: red;width: 100px;height: 100px;}
</style>
</head>
<body><input type="button" id="btn" value="移动"><div id="box"></div><script type="text/javascript">//1.点击按钮让盒子向右移动var btn = document.getElementById('btn');var box = document.getElementById('box');btn.onclick = function(){// box.style.left += 20 + 'px';//只能移动一次//如果标签中的style没有设置样式属性，我们获取到的是空字符串//获取盒子当前的位置 offsetLeft   offsetTopbox.style.left = box.offsetLeft + 10 +'px';}//2.让盒子不停的向右移动</script>
</body>
</html>

实现效果

20.盒子不停向右移动

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>简单动画</title><style type="text/css">body{margin: 0;}#box{position: relative;background-color: red;width: 100px;height: 100px;}
</style>
</head>
<body><input type="button" id="btn" value="移动"><input type="button" id="btn1" value="停止"><div id="box"></div><script type="text/javascript">//1.点击按钮让盒子向右移动var btn = document.getElementById('btn');var box = document.getElementById('box');btn.onclick = function(){// box.style.left += 20 + 'px';//只能移动一次//如果标签中的style没有设置样式属性，我们获取到的是空字符串//获取盒子当前的位置 offsetLeft   offsetTop// box.style.left = box.offsetLeft + 10 +'px';//2.让盒子不停的向右移动(通过循环)// for(var i = 0;i< 100;i++){//     box.style.left = box.offsetLeft + 1 +'px';//循环速度非常快 看不到循环过程// }//2.让盒子不停的向右移动(通过设置定时器)var timerId = setInterval(function(){//判断盒子当前位置 若到达500则停止定时器if(box.offsetLeft == 500){clearInterval(timerId);//退出函数return;}box.style.left = box.offsetLeft + 10 +'px';},50);}</script>
</body>
</html>

实现效果

21.倒计时

定时器的应用

代码部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>倒计时</title>
</head>
<body><style type="text/css">.time-item {width: 430px;height: 45px;margin: 0 auto;}.time-item strong {background: orange;color: #fff;line-height: 49px;font-size: 36px;font-family: Arial;padding: 0 10px;margin-right: 10px;border-radius: 5px;box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);}.time-item > span {float: left;line-height: 49px;color: orange;font-size: 32px;margin: 0 10px;font-family: Arial, Helvetica, sans-serif;}.title {width: 280px;height: 50px;margin:200px auto 50px auto;}
</style><h1 class="title">距离圣诞节,还有</h1><div class="time-item"><span><span id="day">00</span>天</span><strong><span id="hour">00</span>时</strong><strong><span id="minute">00</span>分</strong><strong><span id="second">00</span>秒</strong></div><script type="text/javascript" src="common.js"></script><script type="text/javascript">var endDate = new Date('2019-12-25 00:00:00');//获取spanvar spanDay = my$('day');var spanHour = my$('hour');var spanMinute = my$('minute');var spanSecond = my$('second');setInterval(countdown,1000);countdown();//写个定时器 隔一秒执行一次function countdown(){var startDate = new Date();//计算两个日期日期差//定义一个变量来接受var interval = getInterval(startDate,endDate);setInnerText(spanDay,interval.day);setInnerText(spanHour,interval.hour);setInnerText(spanMinute,interval.minute);setInnerText(spanSecond,interval.second);}</script>
</body>
</html>

common.js部分

function my$(id) {return document.getElementById(id);
}// 处理浏览器兼容性
// 获取第一个子元素
function getFirstElementChild(element) {var node, nodes = element.childNodes, i = 0;while (node = nodes[i++]) {if (node.nodeType === 1) {return node;}}return null;
}// 处理浏览器兼容性
// 获取下一个兄弟元素function getNextElementSibling(element) {var el = element;while (el = el.nextSibling) {if (el.nodeType === 1) {return el;}}return null;}// 处理innerText和textContent的兼容性问题
// 设置标签之间的内容
function setInnerText(element, content) {// 判断当前浏览器是否支持 innerTextif (typeof element.innerText === 'string') {element.innerText = content;} else {element.textContent = content;}
}//处理注册事件浏览器兼容性问题
function addEventListener(element,eventName,fn){if(element.addEventListener){element.addEventListener(eventName,fn);
}else if(element.attachEvent){element.attachEvent('on' +eventName,fn);
}else{element['on' + eventName] = fn;}
}//处理移除事件的兼容性处理
function removeEventListener(element,eventName,fn){if(element.removeEventListener){element.removeEventListener(eventName,fn);}else if(element.detachEvent){element.detachEvent('on'+ eventName,fn);}else{element['on' + eventName] = null;}
}
// 获取页面滚动距离的浏览器兼容性问题
// 获取页面滚动出去的距离
function getScroll() {var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;return {scrollLeft: scrollLeft,scrollTop: scrollTop}
}// 获取鼠标在页面的位置，处理浏览器兼容性
function getPage(e) {var pageX = e.pageX || e.clientX + getScroll().scrollLeft;var pageY = e.pageY || e.clientY + getScroll().scrollTop;return {pageX: pageX,pageY: pageY}
}//格式化日期对象，返回yyyy-MM-dd HH:mm:ss的形式
function formatDate(date) {// 判断参数date是否是日期对象// instanceof  instance 实例(对象)   of 的// console.log(date instanceof Date);if (!(date instanceof Date)) {console.error('date不是日期对象')return;}var year = date.getFullYear(),month = date.getMonth() + 1,day = date.getDate(),hour = date.getHours(),minute = date.getMinutes(),second = date.getSeconds();month = month < 10 ? '0' + month : month;day = day < 10 ? '0' + day : day;hour = hour < 10 ? '0' + hour : hour;minute = minute < 10 ? '0' + minute : minute;second = second < 10 ? '0' + second : second;return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
}// 获取两个日期的时间差
function getInterval(start, end) {// 两个日期对象，相差的毫秒数var interval = end - start;// 求 相差的天数/小时数/分钟数/秒数var day, hour, minute, second;// 两个日期对象，相差的秒数// interval = interval / 1000;interval /= 1000;day = Math.round(interval / 60 / 60 / 24);hour = Math.round(interval / 60 / 60 % 24);minute = Math.round(interval / 60 % 60);second = Math.round(interval % 60);return {day: day,hour: hour,minute: minute,second: second}
}

实现效果

22.拖拽窗口并关闭窗口

代码显示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>拖拽界面</title><style>* {margin: 0;padding: 0;}.nav {height: 30px;background: #036663;border-bottom: 1px solid #369;line-height: 30px;padding-left: 30px;}.nav a {color: #fff;text-align: center;font-size: 14px;text-decoration: none;}.d-box {width: 400px;height: 300px;border: 5px solid #eee;box-shadow: 2px 2px 2px 2px #666;position: absolute;top: 40%;left: 40%;background-color: white;/* 不让文字被选中 */-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.hd {width: 100%;height: 25px;background-color: #7c9299;border-bottom: 1px solid #369;line-height: 25px;color: white;/*鼠标样式(十字)*/cursor: move;}#box_close {float: right;/*鼠标变成小手*/cursor: pointer;}</style>
</head>
<body><div class="nav"><a href="javascript:;" id="register">注册信息</a></div><div class="d-box" id="d_box"><div class="hd" id="drop">注册信息(可以拖拽)<span id="box_close">【关闭】</span></div><div class="bd"></div></div><script type="text/javascript" src="common.js"></script><script type="text/javascript">var box = document.getElementById('d_box');var drop = document.getElementById('drop');drop.onmousedown = function(e){//处理兼容性问题e = e || window.event;//当鼠标按下的时候 求鼠标在盒子中的位置//鼠标在盒子中的位置 = 鼠标在页面上的位置 - 盒子的位置var x = getPage(e).pageX-box.offsetLeft;var y = getPage(e).pageY-box.offsetTop;//鼠标在文档中移动//事件对象edocument.onmouseover = function(e){e = e || window.event;//当鼠标在页面上移动的时候——》求盒子的坐标//盒子的坐标 = 鼠标在页面中的位置-鼠标在盒子中的位置var boxX = getPage(e).pageX - x;var boxY = getPage(e).pageY - y;box.style.left = boxX + 'px';box.style.top = boxY + 'px';}}drop.onmouseup = function(){document.onmouseover = null;}//点击关闭按钮 隐藏盒子var box_close = document.getElementById('box_close');box_close.onclick = function(){box.style.display = 'none';}</script></body>
</html>

效果显示

23.点击弹出登录窗口，拖拽窗口

代码如下：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.login-header {width: 100%;text-align: center;height: 30px;font-size: 24px;line-height: 30px;}ul, li, ol, dl, dt, dd, div, p, span, h1, h2, h3, h4, h5, h6, a {padding: 0px;margin: 0px;}.login {width: 512px;height: 280px;position: absolute;border: #ebebeb solid 1px;left: 50%;right: 50%;background: #ffffff;box-shadow: 0px 0px 20px #ddd;z-index: 9999;margin-left: -256px;margin-top: 140px;display: none;}.login-title {width: 100%;margin: 10px 0px 0px 0px;text-align: center;line-height: 40px;height: 40px;font-size: 18px;position: relative;cursor: move;-moz-user-select:none;-webkit-user-select:none;/*webkit浏览器*/-ms-user-select:none;/*IE10*/-khtml-user-select:none;/*早期浏览器*/user-select:none;}.login-input-content {margin-top: 20px;}.login-button {width: 50%;margin: 30px auto 0px auto;line-height: 40px;font-size: 14px;border: #ebebeb 1px solid;text-align: center;}.login-bg {width: 100%;height: 100%;position: fixed;top: 0px;left: 0px;background: #000000;filter: alpha(opacity=30);-moz-opacity: 0.3;-khtml-opacity: 0.3;opacity: 0.3;display: none;}a {text-decoration: none;color: #000000;}.login-button a {display: block;}.login-input input.list-input {float: left;line-height: 35px;height: 35px;width: 350px;border: #ebebeb 1px solid;text-indent: 5px;}.login-input {overflow: hidden;margin: 0px 0px 20px 0px;}.login-input label {float: left;width: 90px;padding-right: 10px;text-align: right;line-height: 35px;height: 35px;font-size: 14px;}.login-title span {position: absolute;font-size: 12px;right: -20px;top: -30px;background: #ffffff;border: #ebebeb solid 1px;width: 40px;height: 40px;border-radius: 20px;}</style>
</head>
<body>
<div class="login-header"><a id="link" href="javascript:void(0);">点击，弹出登录框</a></div>
<div id="login" class="login" ><div id="title" class="login-title">登录会员<span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span></div><div class="login-input-content"><div class="login-input"><label>用户名：</label><input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input"></div><div class="login-input"><label>登录密码：</label><input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input"></div></div><div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
</div>
<!-- 遮盖层 -->
<div id="bg" class="login-bg" ></div> <script>//点击按钮 弹出登录窗口var link = document.getElementById('link');link.onclick = function(){//显示登录框和遮盖层var login = document.getElementById('login');var bg  =  document.getElementById('bg');login.style.display = 'block';bg.style.display = 'block';return false;}//点击关闭按钮 隐藏登录界面var closeBtn = document.getElementById('closeBtn');closeBtn.onclick = function(){var login = document.getElementById('login');var bg  =  document.getElementById('bg');login.style.display = 'none';bg.style.display = 'none';}//遮盖层的目的  突出显示登录窗口   盖住其他位置不让操作//2.拖拽功能实现var title = document.getElementById('title');var login = document.getElementById('login');//按下鼠标的时候title.onmousedown = function(e){e = e || window.event;//鼠标相对于盒子的位置 = 鼠标在页面中的位置 - 盒子在页面中的位置var x = e.pageX - login.offsetLeft;var y = e.pageY - login.offsetTop;//文档移动的时候document.onmousemove = function(e){e = e || window.event;//盒子的位置 = 鼠标在页面中的位置 - 鼠标在盒子中的位置var boxX = e.pageX - x;var boxY = e.pageY - y;login.style.left = boxX + 256 + 'px';login.style.top = boxY - 140 + 'px';}//鼠标松开的时候document.onmouseup = function(){document.onmousemove = null;}}</script>
</body>
</html>

实现效果

24.图片放大镜

代码部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>放大镜</title><style>* {margin: 0;padding: 0;}.box {width: 350px;height: 350px;margin: 100px;border: 1px solid #ccc;position: relative;}.big {width: 400px;height: 400px;position: absolute;top: 0;left: 360px;border: 1px solid #ccc;overflow: hidden;display: none;}.big img {position: absolute;}.mask {width: 175px;height: 175px;background: rgba(255, 255, 0, 0.4);position: absolute;top: 0px;left: 0px;cursor: move;display: none;}.small {position: relative;}</style>
</head>
<body><div class="box" id="box"><div class="small"><img src="data:images/small.webp" width="350px" alt=""><div class="mask"></div></div><div class="big"><img src="data:images/big.jpg" width="800px" alt=""></div></div><script type="text/javascript" src="common.js"></script><script type="text/javascript">var box = document.getElementById('box');var smallBox = box.children[0];var bigBox = box.children[1];var smallImage = smallBox.children[0];var mask = smallBox.children[1];var bigImage = bigBox.children[0];//1.鼠标经过的时候显示mask和big 当鼠标离开box时隐藏mask和bigsmallBox.onmouseover = function(){mask.style.display = 'block';bigBox.style.display = 'block';}box.onmouseout = function(){mask.style.display = 'none';bigBox.style.display = 'none';}//2.当鼠标在盒子中移动的时候 让mask和鼠标一起移动box.onmousemove = function(e){e = e || window.event;//鼠标相对于mask的位置 = 鼠标在页面的位置 - 盒子的位置var maskX = getPage(e).pageX - box.offsetLeft;var maskY = getPage(e).pageY - box.offsetTop;//鼠标的位置出现在mask的中心点maskX = maskX - mask.offsetWidth/2;maskY = maskY - mask.offsetHeight/2;//此时mask是在box中移动。因此要将mask限制住maskX = maskX < 0 ? 0 : maskX;maskY = maskY < 0 ? 0 : maskY;maskX = maskX > box.offsetWidth - mask.offsetWidth ? box.offsetWidth - mask.offsetWidth : maskX;maskY = maskY >box.offsetHeight -  mask.offsetHeight ? box.offsetHeight -  mask.offsetHeight :maskY;mask.style.left = maskX  + 'px';mask.style.top = maskY  + 'px';//3.当mask移动的时候 让大图移动(根据比例)//mask移动距离/mask最大能够移动的距离 = 大图片移动的距离/大图片最大能移动的距离//mask最大能够移动的距离var maskMax =  box.offsetWidth - mask.offsetWidth;//大图片最大能移动的距离var bigImageMax = bigImage.offsetWidth - bigBox.offsetWidth;var bigImageX = maskX * bigImageMax/maskMax;var bigImageY = maskY *bigImageMax/maskMax;bigImage.style.left = -bigImageX + 'px';bigImage.style.top = -bigImageY + 'px';}</script></body>
</html>

实现效果

25.模拟滚动条

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>模拟滚动条</title><style>* {margin: 0;padding: 0;}.box {width: 300px;height: 500px;border: 1px solid red;margin: 100px;position: relative;overflow: hidden;/* 不让文字被选中 */-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.content {padding: 5px 18px 5px 5px;position: absolute;top: 0;left: 0;}.scroll {width: 18px;height: 100%;position: absolute;top: 0;right: 0;background-color: #eee;}.bar {height: 100px;width: 100%;position: absolute;top: 0;left: 0;background-color: red;border-radius:  10px;cursor: pointer;}</style>
</head>
<body>
<div class="box" id="box"><div class="content" id="content">我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内</div><div class="scroll" id="scroll"><div class="bar" id="bar"></div></div>
</div>
<script src="common.js"></script><script type="text/javascript">//1.根据内容的大小计算滚动条的高度var box = my$('box');var content = my$('content');var scroll = my$('scroll');var bar = my$('bar');//滚动条的高度/scroll的高度 = box的高度/内容的高度var barHeight = 0;if(content.scrollHeight > box.clientHeight){barHeight = box.clientHeight/content.scrollHeight*scroll.clientHeight;//注意 设置元素大小和位置时一定要带单位}bar.style.height = barHeight + 'px';//2.让滚动条能够拖拽//先求bar在滚动条的位置 = 鼠标在页面中的位置 - box的offsetTop距离bar.onmousedown = function(e){e = e || window.event;var y = getPage(e).pageY - bar.offsetTop - box.offsetTop;document.onmousemove = function(e){//当鼠标在页面上移动的时候 求滚动条的位置//e = e || window.event;//求滚动条的位置var barY = getPage(e).pageY - y - box.offsetTop;//控制bar不能移除scrollbarY = barY < 0 ? 0 : barY;barY = barY > scroll.clientHeight - bar.clientHeight ? scroll.clientHeight - bar.clientHeight : barY; bar.style.top = barY + 'px';//3.当拖拽滚动条的时候 改变内容的位置//内容滚动的距离/内容最大能够滚动的距离 = 滚动条滚动的距离/滚动条最大能够滚动的距离//内容滚动的距离var contentMax = content.scrollHeight - box.clientHeight;//滚动条最大能够滚动的距离var barMax = scroll.clientHeight - bar.clientHeight;var contentY = barY / barMax*contentMax;content.style.top = -contentY + 'px';}}document.onmouseup = function(){//移除鼠标移动的事件document.onmousemove = null;}</script></body>
</html>

实现效果

26.简单动画（改进）

20题存在问题：点击button之后，滑块开始运动，此时再点击button滑块速度会变化
原因在于再次点击button后会再次启动一个定时器
此处再进行升级改进，假设要控制不同的组件进行运动，因此要将函数进行封装

代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>简单动画</title><style type="text/css">body{margin: 0;}#box{position: relative;background-color: red;width: 100px;height: 100px;}
</style>
</head>
<body><input type="button" id="btn" value="移动400"><input type="button" id="btn1" value="移动800"><div id="box"></div><script type="text/javascript" src="common.js"></script><script type="text/javascript">//获取按钮var btn = document.getElementById('btn');var btn1 = document.getElementById('btn1');var box = document.getElementById('box');var timerId = null//注册点击事件btn.onclick = function(){animate(box,400);}btn1.onclick = function(){animate(box,800);}//封装动画的函数//不仅要控制box 可能需要任何一个物体 所以需要参数element//元素移动的位置  需要targetfunction animate(element,target){//保证页面只有一个定时器在执行动画if (timerId) {clearInterval(timerId);timerId = null;}//定时器timerId = setInterval(function(){//步进  每次移动的距离var step = 10;//最终盒子停止的位置//盒子当前的位置var current = element.offsetLeft;if (current >= target) {//定时器停止clearInterval(timerId);//让盒子到target的位置element.style.left = target + 'px';//退出函数return;}current += step;element.style.left = current + 'px';//0.1秒执行一次},30);}</script>
</body>
</html>

实现效果
改进点击button时，同时几个box同时开始运动
代码加入

btn.onclick = function(){animate(box,400);animate(box1,400);}btn1.onclick = function(){animate(box,800);animate(box1,800);

执行效果
问题
点击一个button之后只有下面的box运动
原因在于
//在执行第二个函数的时候，相对应的前一个定时器会被销毁
//所以想让每一个元素维护自己开启的定时器
需要将所有的timerID改为element.timerID
完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>简单动画</title><style type="text/css">body{margin: 0;}#box{position: relative;background-color: red;width: 100px;height: 100px;}#box1{position: relative;background-color: blue;width: 100px;height: 100px;}
</style>
</head>
<body><input type="button" id="btn" value="移动400"><input type="button" id="btn1" value="移动800"><div id="box"></div><div id="box1"></div><script type="text/javascript" src="common.js"></script><script type="text/javascript">//获取按钮var btn = document.getElementById('btn');var btn1 = document.getElementById('btn1');var box = document.getElementById('box');//var timerId = null//注册点击事件btn.onclick = function(){animate(box,400);animate(box1,400);//在执行第二个函数的时候，相对应的前一个定时器会被销毁//所以想让每一个元素维护自己开启的定时器}btn1.onclick = function(){animate(box,800);animate(box1,800);}//封装动画的函数//不仅要控制box 可能需要任何一个物体 所以需要参数element//元素移动的位置  需要targetfunction animate(element,target){//保证页面只有一个定时器在执行动画if (element.timerId) {clearInterval(element.timerId);timerId = null;}//定时器element.timerId = setInterval(function(){//步进  每次移动的距离var step = 10;//最终盒子停止的位置//盒子当前的位置var current = element.offsetLeft;//当从400到800时执行动画//当从800到400时没有动画直接跳转if(current > target){step = - Math.abs(step);}if(Math.abs(current - target) < Math.abs(step)){//定时器停止clearInterval(element.timerId);//让盒子到target的位置element.style.left = target + 'px';//退出函数return;}current += step;element.style.left = current + 'px';//0.1秒执行一次},30);}</script>
</body>
</html>

执行效果如下：

27.轮播图

代码如下
html部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>轮播图</title><link rel="stylesheet" href="css/style.css" />
</head>
<body><div class="all" id='box'><div class="screen"><ul><li><img src="data:images/wf1.jpg" width="500" height="200"/></li><li><img src="data:images/wf2.jpg" width="500" height="200"/></li><li><img src="data:images/wf3.jpg" width="500" height="200"/></li><li><img src="data:images/wf4.jpg" width="500" height="200"/></li><li><img src="data:images/wf5.jpg" width="500" height="200"/></li></ul><ol></ol></div><div id="arr" ><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>
<script src="js/common.js"></script>
<script src="js/animate.js"></script>
<script type="text/javascript" src="js/index.js"></script></body>
</html>

css部分

* {padding: 0;margin: 0;list-style: none;border: 0;}.all {width: 500px;height: 200px;padding: 7px;border: 1px solid #ccc;margin: 100px auto;position: relative;}.screen {width: 500px;height: 200px;overflow: hidden;position: relative;}.screen li {width: 500px;height: 200px;overflow: hidden;float: left;}.screen ul {position: absolute;left: 0;top: 0px;width: 3000px;}.all ol {position: absolute;right: 10px;bottom: 10px;line-height: 20px;text-align: center;}.all ol li {float: left;width: 20px;height: 20px;background: #fff;border: 1px solid #ccc;margin-left: 10px;cursor: pointer;}.all ol li.current {background: yellow;}#arr {display: none;z-index: 1000;}#arr span {width: 40px;height: 40px;position: absolute;left: 5px;top: 50%;margin-top: -20px;background: #000;cursor: pointer;line-height: 40px;text-align: center;font-weight: bold;font-family: '黑体';font-size: 30px;color: #fff;opacity: 0.3;border: 1px solid #fff;}#arr #right {right: 5px;left: auto;}

common.js

function my$(id) {return document.getElementById(id);
}// 处理浏览器兼容性
// 获取第一个子元素
function getFirstElementChild(element) {var node, nodes = element.childNodes, i = 0;while (node = nodes[i++]) {if (node.nodeType === 1) {return node;}}return null;
}// 处理浏览器兼容性
// 获取下一个兄弟元素function getNextElementSibling(element) {var el = element;while (el = el.nextSibling) {if (el.nodeType === 1) {return el;}}return null;}// 处理innerText和textContent的兼容性问题
// 设置标签之间的内容
function setInnerText(element, content) {// 判断当前浏览器是否支持 innerTextif (typeof element.innerText === 'string') {element.innerText = content;} else {element.textContent = content;}
}//处理注册事件浏览器兼容性问题
function addEventListener(element,eventName,fn){if(element.addEventListener){element.addEventListener(eventName,fn);
}else if(element.attachEvent){element.attachEvent('on' +eventName,fn);
}else{element['on' + eventName] = fn;}
}//处理移除事件的兼容性处理
function removeEventListener(element,eventName,fn){if(element.removeEventListener){element.removeEventListener(eventName,fn);}else if(element.detachEvent){element.detachEvent('on'+ eventName,fn);}else{element['on' + eventName] = null;}
}
// 获取页面滚动距离的浏览器兼容性问题
// 获取页面滚动出去的距离
function getScroll() {var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;return {scrollLeft: scrollLeft,scrollTop: scrollTop}
}// 获取鼠标在页面的位置，处理浏览器兼容性
function getPage(e) {var pageX = e.pageX || e.clientX + getScroll().scrollLeft;var pageY = e.pageY || e.clientY + getScroll().scrollTop;return {pageX: pageX,pageY: pageY}
}//格式化日期对象，返回yyyy-MM-dd HH:mm:ss的形式
function formatDate(date) {// 判断参数date是否是日期对象// instanceof  instance 实例(对象)   of 的// console.log(date instanceof Date);if (!(date instanceof Date)) {console.error('date不是日期对象')return;}var year = date.getFullYear(),month = date.getMonth() + 1,day = date.getDate(),hour = date.getHours(),minute = date.getMinutes(),second = date.getSeconds();month = month < 10 ? '0' + month : month;day = day < 10 ? '0' + day : day;hour = hour < 10 ? '0' + hour : hour;minute = minute < 10 ? '0' + minute : minute;second = second < 10 ? '0' + second : second;return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
}// 获取两个日期的时间差
function getInterval(start, end) {// 两个日期对象，相差的毫秒数var interval = end - start;// 求 相差的天数/小时数/分钟数/秒数var day, hour, minute, second;// 两个日期对象，相差的秒数// interval = interval / 1000;interval /= 1000;day = Math.round(interval / 60 / 60 / 24);hour = Math.round(interval / 60 / 60 % 24);minute = Math.round(interval / 60 % 60);second = Math.round(interval % 60);return {day: day,hour: hour,minute: minute,second: second}
}

animate.js

//功能：让某个元素实现动画
function animate(element, target) {//清除上一次创建的定时器if(element.timerId) {clearInterval(element.timerId);}//每次改变的值var step = 10;//开启定时器element.timerId = setInterval(function () {//获取当前的位置var current = element.offsetLeft;//当前位置 <  目标位置  + step//当前位置 > 目标位置   -stepif(current > target) {step = - Math.abs(step);}if(Math.abs(current - target) < Math.abs(step)) {//清除定期器，切换到目标位置clearInterval(element.timerId);element.style.left = target + "px";return;}current += step;element.style.left = current + "px";}, 10);
}

index.js

//获取元素var box = my$('box');var screen = box.children[0];var ul = screen.children[0];var ol = screen.children[1];var imgWidth = screen.offsetWidth;//箭头var arr = my$('arr');var arrLeft = my$('left');var arrRight = my$('right');//1.动态生成序号(在ol中动态生成li)//获取到页面上有多少张图片var count = ul.children.length;for(var i = 0;i<count;i++){var li = document.createElement('li');ol.appendChild(li);setInnerText(li,i+1);//2.点击序号(给序号设置点击事件) 动画的方式 切换图片li.onclick = liClick;//为什么写成这样而不写成li.onclick = function(){}//在循环函数中,若循环一次则会存储一次匿名函数,循环十次会存十个匿名函数,会浪费内存,因此只要定义一个命名函数即可//注意:不能在命名函数后面加上(),因为加之后就变成函数的调用//如果用匿名函数，每触发事件，都会调用不同的函数，而设置了命名函数，每触发事件，只用调用所命名的那个函数，减少访问服务器的次数//让当前li记录索引//设置标签的自定义属性li.setAttribute('index',i);}function liClick(){//处理序号高亮不变的问题//2.1 取消其它li高亮显示,让当前li高亮显示for (var i = 0;i<ol.children.length;i++){var li = ol.children[i];li.className = '';}//让当前高亮显示this.className = 'current';//2.2点击序号, 动画的方式切换到当前点击的图片的位置//var imgWidth = screen.offsetWidth;//获取自定义属性(获取图片索引)var liIndex = parseInt(this.getAttribute('index'));animate(ul,-liIndex*imgWidth);//全局变量index和li中的index保持一致index = liIndex;}//让序号1高亮显示(li)ol.children[0].className = 'current';//3.鼠标放到盒子上显示箭头box.onmouseenter = function(){arr.style.display = 'block';//清除定时器clearInterval(timerId);}box.onmouseleave = function(){arr.style.display = 'none';//重新开启定时器timerId = setInterval(function(){arrRight.click();},2000);}//4.实现上一张和下一张的功能//4.1先写下一张var index = 0;//第一张图片的索引arrRight.onclick = function(){//判断是否是克隆的第一张图片//若是需修改ul坐标 显示真正的第一张if(index == count){ul.style.left = '0px';index = 0;}//总共有5张图片,但是还有一张克隆的图片 所克隆的图片的索引是5//如果是最后一张,不能index++//4 < 5index++;if(index < count){//animate(ul,-index*imgWidth);//获取图片对应的序号,让序号点击ol.children[index].click();}else{//以动画的方式移动到克隆的第一张图片animate(ul,-index*imgWidth);//取消所有序号的高亮显示让第一个序号高亮for (var i = 0;i<ol.children.length;i++){var li = ol.children[i];li.className = '';}ol.children[0].className = 'current';}}//4.2点击上一张arrLeft.onclick = function(){//如果当前是第一张图片, 此时要偷偷的切换到最后一张图片的位置(即克隆的第一张图片)if(index == 0){index = count;ul.style.left = -index*imgWidth + 'px';}index--;ol.children[index].click();//if(index > 0){//index--;//animate(ul,-index*imgWidth);//ol.children[index].click();//}}//无缝滚动//获取ul中的第一个livar firstLi = ul.children[0];//克隆li cloneNode()  复制节点//参数 true 复制节点中的内容//     false 只是复制当前节点 不是复制里面的内容var cloneLi = firstLi.cloneNode(true);ul.appendChild(cloneLi);//5.自动切换图片var timerId = setInterval(function(){arrRight.click();},2000);

实现效果
不点击时自动跳转
鼠标在box内显示左右箭头

28.回到顶部

html部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>回到顶部</title><link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body><div id="wrap"><div id="top" class="header" data-reactid=".0.0"><div class="wrapper clearfix" data-reactid=".0.0.0"><a class="logo" href="/p/index.html" data-reactid=".0.0.0.0"></a><div class="search-box" data-reactid=".0.0.0.1"><input type="text" value="" data-reactid=".0.0.0.1.0"><div class="search-btn" data-reactid=".0.0.0.1.1"></div><div class="hot-words" data-reactid=".0.0.0.1.2"><a data-reactid=".0.0.0.1.2.$0">趣味测试</a><a data-reactid=".0.0.0.1.2.$1">魁拔</a><a data-reactid=".0.0.0.1.2.$2">迪丽热巴</a><adata-reactid=".0.0.0.1.2.$3">吴亦凡</a><a data-reactid=".0.0.0.1.2.$4">鹿晗</a></div></div><div class="user-wrapper" data-reactid=".0.0.0.2"><div class="login-wrap" data-reactid=".0.0.0.2.0"><a class="btn-login" href="javascript:void(0)" data-reactid=".0.0.0.2.0.0">登录</a></div></div><div class="links" data-reactid=".0.0.0.3"><div class="slide-down-container admin-links" data-reactid=".0.0.0.3.1"><div class="title" data-reactid=".0.0.0.3.1.0"><span data-reactid=".0.0.0.3.1.0.0"></span><span class="title-span" data-reactid=".0.0.0.3.1.0.1">部落管理</span><iclass="slide-down-icon" data-reactid=".0.0.0.3.1.0.2"></i></div><ul class="slide-down-content" data-reactid=".0.0.0.3.1.1"><li data-reactid=".0.0.0.3.1.1.$=10"><a target="_blank" href="/buluoadmin/home.html" data-reactid=".0.0.0.3.1.1.$=10.0">运营平台</a></li><lidata-reactid=".0.0.0.3.1.1.$=11"><a target="_blank" href="/apply.html" data-reactid=".0.0.0.3.1.1.$=11.0">创建部落</a></li></ul></div><div class="slide-down-container help-links" data-reactid=".0.0.0.3.2"><div class="title" data-reactid=".0.0.0.3.2.0"><span data-reactid=".0.0.0.3.2.0.0"></span><span class="title-span" data-reactid=".0.0.0.3.2.0.1">帮助</span><iclass="slide-down-icon" data-reactid=".0.0.0.3.2.0.2"></i></div><ul class="slide-down-content" data-reactid=".0.0.0.3.2.1"><li data-reactid=".0.0.0.3.2.1.$=10"><a target="_blank" href="/tribe.html" data-reactid=".0.0.0.3.2.1.$=10.0">部落简介</a></li><li data-reactid=".0.0.0.3.2.1.$=11"><a target="_blank" href="http://kf.qq.com/product/buluo.html" data-reactid=".0.0.0.3.2.1.$=11.0">帮助中心</a></li></ul></div></div></div></div><div class="cls" id="content"><img src="data:images/content.png" width="100%"></div>http://buluo.qq.com/p/detail.html?bid=17266&pid=9498777-1455945612&from=grp_sub_obj</div><div class="to-top" id="totop"></div><script type="text/javascript" src="js/common.js"></script><script type="text/javascript" src="js/index.js"></script>
</body>
</html>

css部分

* {margin: 0;padding: 0;
}
html {width: 100%;font-family: "Microsoft YaHei",-apple-system-font,"Helvetica Neue",Helvetica,STHeiTi,sans-serif;}
.header {position: fixed;z-index: 20;left: 0;top: 0;height: 90px;width: 100%;background-color: #fff;transition: height .3s;
}.header.fixed {height: 50px;box-shadow: 0 0 1px 0 rgba(0,0,0,.3),0 0 6px 2px rgba(0,0,0,.15);
}
.wrapper {width: 970px;margin: 0 auto;
}
.clearfix:after {display: table;clear: both;content: "";
}.header .logo {float: left;margin: 0;width: 180px;margin-top: 21px;height: 34px;background-image: url(http://s.url.cn/qqun/xiaoqu/buluo/p/js/images/big_logo.a9bf2527b09314270250235300104630.png);background-repeat: no-repeat;transition: all .3s;
}
a {text-decoration: none;color: #000;background-color: transparent;
}
.header .search-box {float: left;margin-left: 25px;height: 30px;margin-top: 24px;transition: margin .3s;
}
.header .user-wrapper {margin-top: 32px;
}
.header .user-wrapper {float: right;transition: margin .3s;
}
.header .links {margin-top: 32px;
}
.slide-down-container {font-size: 12px;position: relative;z-index: 100;float: left;margin-right: 20px;
}
.slide-down-container .title {position: relative;cursor: pointer;padding-bottom: 10px;
}
.header .slide-down-container.help-links .slide-down-content {left: -32px;
}
.slide-down-container .slide-down-content {position: absolute;font-size: 12px;display: none;top: 20px;width: 88px;padding: 10px 0;margin-top: 7px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;background-color: #fff;border: 1px solid #dbdadf;box-shadow: 0 2px 6px 2px rgba(0,0,0,.17);
}
ul {list-style: none;
}
.header .search-box input {float: left;padding: 0;height: 28px;line-height: 28px;width: 340px;border: 1px solid #dfdfdf;border-radius: 2px;border-right: 0;padding-left: 10px;font-size: 14px;
}
.header .search-box div.search-btn {float: left;height: 30px;width: 64px;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAAAM1BMVEUAAAD///+3leKCAAAAEXRSTlMA/qkqH/KX4uEFmYxNSH9tY+SUvpEAAABVSURBVAjXZY1ZDoAwCEQZti5a9f6nNaUxBn0/k8cEICL1iupKi2GY2AhTA0sThkXfwTFm+IwCCRXUGUALbcCnzbs9XYY+fxcbBeoFxa/wl/3vR/bzBrf8Ab4Yi5q3AAAAAElFTkSuQmCC) center no-repeat #2786e4;cursor: pointer;
}
.header .search-box .hot-words {clear: left;transition: opacity .3s;padding-top: 10px;font-size: 12px;
}
.header .search-box .hot-words a {margin-right: 18px;cursor: pointer;color: #868686;
}
.slide-down-container .title .title-span {max-width: 100px;display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
.slide-down-container .title span {position: relative;vertical-align: middle;
}
.slide-down-container .title {position: relative;cursor: pointer;padding-bottom: 10px;
}
.slide-down-container {font-size: 12px;position: relative;z-index: 100;float: left;margin-right: 20px;
}
body {background: #ecebf0 url(http://s.url.cn/qqun/xiaoqu/buluo/p/js/images/bg.019aa429f71b955278687d76ea4c0951.jpg) no-repeat center center fixed;
}
.slide-down-container .title .slide-down-icon {display: inline-block;margin-left: 5px;margin-top: 1px;width: 5px;height: 5px;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAGCAYAAAAVMmT4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowNTNmYWU4Mi01YzUwLWM5NDctYjFiNC0yNjBkNDNkZTNiMzgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDkzRjNDQUQ0MUEyMTFFNTg5OUNDM0EzRkU2MjVBMjgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDkzRjNDQUM0MUEyMTFFNTg5OUNDM0EzRkU2MjVBMjgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjA1M2ZhZTgyLTVjNTAtYzk0Ny1iMWI0LTI2MGQ0M2RlM2IzOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowNTNmYWU4Mi01YzUwLWM5NDctYjFiNC0yNjBkNDNkZTNiMzgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7rM0xpAAAAlElEQVR42mJkYGAIBuIbpaWlVxlwgO7ubjUgpc4MJH4AcdCxY8e+WFtbv8CiUBtIBQDxESagifeBjKVA7A6UMEdTaACkfIF4JVDdLSaQIJDxGEgtAmI7oAJbqEIzkAFAvARqIAMz0GqwKUD6C9Apt4BMbyANciPI+kVAhc9gNjEhWwuUeAOk5oEMAeL5QD6KHwACDACYkDOP6HW2qAAAAABJRU5ErkJggg==) center no-repeat;vertical-align: middle;
}
.login-wrap {font-size: 12px;margin-left: 4px;
}
.login-wrap .btn-login {display: inline-block;text-decoration: none;color: inherit;cursor: pointer;line-height: 18px;height: 18px;
}
.header .links {margin-top: 32px;
}
.header .links, .header .user-wrapper {float: right;transition: margin .3s;
}#wrap {width: 100%;
}
.cls {width: 70%;margin: 100px auto 0px auto;
}
.header.fixed .hot-words {opacity: 0;-ms-filter: "alpha(Opacity=0)";pointer-events: none;
}
.header.fixed .links, .header.fixed .user-wrapper {margin-top: 15px;
}
.header.fixed .logo {background-image: url(http://s.url.cn/qqun/xiaoqu/buluo/p/js/images/small_logo.e402407a1c2d949e81207e68ff99b556.png);width: 165px;height: 30px;margin-top: 10px;
}
.header.fixed .search-box {margin-top: 10px;
}.to-top {width: 50px;height: 50px;background-image: url(http://s.url.cn/qqun/xiaoqu/buluo/p/js/images/to_top.6a40e92f2a02f3945477ff9937f5cb20.png);background-repeat: no-repeat;background-position: 0 0;background-size: 50px 50px;cursor: pointer;display: none;position: fixed;bottom: 150px;left: 86%;
}

index.js部分

//获取元素
var Bodytop = my$('top');
//回到顶部的按钮
var totop = my$('totop');
//当拖动滚动条的时候执行
window.onscroll = function(){//1.当拖动滚动条的时候,当内容滚动出去10px的时候. //改变top的高度并且显示回到顶部的按钮//调用common.js中的getScroll()函数来获取滚动出去的距离var scrollTop = getScroll().scrollTop;if(scrollTop > 10){//改变topBodytop.className = 'header fixed';//显示回到顶部totop.style.display = 'block';}else{//改变topBodytop.className = 'header';//显示回到顶部totop.style.display = 'none';}//如何获得滚动的距离// document.body.scrollTop
}//2.当点击回到顶部按钮的时候,动画的方式回到最上面,使得滚动距离为0var timerId = null;totop.onclick = function(){if(timerId){clearInterval(timerId);timerId = null;}timerId = setInterval(function(){//步进var step = 5;//目标位置var target = 0;//获取当前位置var current = getScroll().scrollTop;if(current>target){step = -Math.abs(step);}//判断当前是否到达目标位置if(Math.abs(current-target)<=Math.abs(step)){clearInterval(timerId);document.body.scrollTop = target;//已默认单位为像素document.documentElement.scrollTop = target;return;}current+=step;document.body.scrollTop = target;//已默认单位为像素document.documentElement.scrollTop = target;},30);}

common.js部分

function my$(id) {return document.getElementById(id);
}// 处理浏览器兼容性
// 获取第一个子元素
function getFirstElementChild(element) {var node, nodes = element.childNodes, i = 0;while (node = nodes[i++]) {if (node.nodeType === 1) {return node;}}return null;
}// 处理浏览器兼容性
// 获取下一个兄弟元素function getNextElementSibling(element) {var el = element;while (el = el.nextSibling) {if (el.nodeType === 1) {return el;}}return null;}// 处理innerText和textContent的兼容性问题
// 设置标签之间的内容
function setInnerText(element, content) {// 判断当前浏览器是否支持 innerTextif (typeof element.innerText === 'string') {element.innerText = content;} else {element.textContent = content;}
}// 处理注册事件的兼容性问题
// eventName, 不带on，  click  mouseover  mouseout
function addEventListener(element, eventName, fn) {// 判断当前浏览器是否支持addEventListener 方法if (element.addEventListener) {element.addEventListener(eventName, fn);  // 第三个参数 默认是false} else if (element.attachEvent) {element.attachEvent('on' + eventName, fn);} else {// 相当于 element.onclick = fn;element['on' + eventName] = fn;}
}// 处理移除事件的兼容性处理
function removeEventListener(element, eventName, fn) {if (element.removeEventListener) {element.removeEventListener(eventName, fn);} else if (element.detachEvent) {element.detachEvent('on' + eventName, fn);} else {element['on' + eventName] = null;}
}// 获取页面滚动距离的浏览器兼容性问题
// 获取页面滚动出去的距离
function getScroll() {var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;return {scrollLeft: scrollLeft,scrollTop: scrollTop}
}// 获取鼠标在页面的位置，处理浏览器兼容性
function getPage(e) {var pageX = e.pageX || e.clientX + getScroll().scrollLeft;var pageY = e.pageY || e.clientY + getScroll().scrollTop;return {pageX: pageX,pageY: pageY}
}//格式化日期对象，返回yyyy-MM-dd HH:mm:ss的形式
function formatDate(date) {// 判断参数date是否是日期对象// instanceof  instance 实例(对象)   of 的// console.log(date instanceof Date);if (!(date instanceof Date)) {console.error('date不是日期对象')return;}var year = date.getFullYear(),month = date.getMonth() + 1,day = date.getDate(),hour = date.getHours(),minute = date.getMinutes(),second = date.getSeconds();month = month < 10 ? '0' + month : month;day = day < 10 ? '0' + day : day;hour = hour < 10 ? '0' + hour : hour;minute = minute < 10 ? '0' + minute : minute;second = second < 10 ? '0' + second : second;return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
}// 获取两个日期的时间差
function getInterval(start, end) {// 两个日期对象，相差的毫秒数var interval = end - start;// 求 相差的天数/小时数/分钟数/秒数var day, hour, minute, second;// 两个日期对象，相差的秒数// interval = interval / 1000;interval /= 1000;day = Math.round(interval / 60 / 60 / 24);hour = Math.round(interval / 60 / 60 % 24);minute = Math.round(interval / 60 % 60);second = Math.round(interval % 60);return {day: day,hour: hour,minute: minute,second: second}
}

实现效果

29.迷你微信聊天案例

html部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body><div id="container"><div class="header"><span style="float: right;">20:30</span> <span style="float: left;">小泽老师</span> </div><ul class="content"></ul><div class="footer"><div class="icon"> <img src="data:images/1.png" alt="" id="icon"> </div><input id="text" type="text" placeholder="说点什么吧..."> <span id="btn">发送</span> </div></div><script type="text/javascript" src="js/index.js"></script></body>
</html>

css部分

* {margin: 0;padding: 0;list-style: none;font-family: '微软雅黑'}#container {width: 450px;height: 600px;background: #eee;margin: 10px auto 0;position: relative;box-shadow: 0px 0px 16px #999;}.header {background: #000;height: 34px;color: #fff;height: 40px;line-height: 40px;font-size: 20px;padding: 0 10px;}.footer {width: 430px;height: 40px;background: #999;position: absolute;bottom: 0;padding: 10px;}.footer input {width: 300px;height: 38px;outline: none;font-size: 16px;text-indent: 10px;position: absolute;border-radius: 6px;right: 80px;}.footer span {display: inline-block;width: 62px;height: 38px;background: #ccc;font-weight: 900;line-height: 38px;cursor: pointer;text-align: center;position: absolute;right: 10px;top: 14px;border-radius: 6px;}.footer span:hover {color: #777;background: #ddd;}.icon {display: inline-block;background: red;width: 50px;height: 50px;border-radius: 30px;position: absolute;bottom: 3px;left: 10px;cursor: pointer;overflow: hidden;}img {width: 60px;height: 60px;border-radius: 8px;}.content {font-size: 20px;width: 435px;height: 662px;overflow: auto;padding: 5px;}.content li {margin-top: 10px;padding-left: 10px;width: 412px;display: block;clear: both;overflow: hidden;}.content li img {float: left;}.content li span {background: #7cfc00;padding: 10px;border-radius: 10px;float: left;margin: 6px 10px 0 10px;max-width: 310px;border: 1px solid #ccc;box-shadow: 0 0 3px #ccc;}.content li img.imgleft {float: left;}.content li img.imgright {float: right;}.content li span.spanleft {float: left;background: #fff;}.content li span.spanright {float: right;background: #7cfc00;}

js部分

//1.点击图片实现用户切换功能
//获取图片
//1.1默认两个用户,通过点击来回切换
var img = document.getElementById('icon');
var arr = ["images/1.png","images/2.png"];
var flag = 0;
img.onclick = function(){if (flag == 0) {img.src = arr[1];flag = 1;}else if(flag ==1 ){img.src = arr[0];flag = 0;}
}//2.点击发送按钮,把用户的聊天内容展示在聊天区域
//注册点击事件
var btn = document.getElementById('btn');
var num = -1;//统计聊天记录
btn.onclick = function(){//判断用户内容是否为空var text = document.getElementById('text').value;if(text == ''){alert('请输入聊天内容');}else{//把内容添加到区域内var content = document.getElementsByTagName('ul')[0];content.innerHTML += "<li><img src='"+arr[flag]+"' /><span>"+text+"</span></li>"}var imgs = content.getElementsByTagName('img');var span = content.getElementsByTagName('span');num++;//判断当前聊天的用户if(flag == 0){imgs[num].className = 'imgleft';span[num].className = 'spanleft';}else{imgs[num].className = 'imgright';span[num].className = 'spanright';}document.getElementById('text').value = '';
}
//text.value = '';
//2.1点击发送按钮,把聊天内容展示在聊天区域
//2.2设定聊天区域内不同的位置显示

实现效果

30.随机生成小色块

html部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>随机生成方块</title><link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body><div id="container"></div><script src="js/tools.js"></script><script src="js/box.js"></script><script src="js/main.js"></script><script>//console.log(tools.getRandom(1,10));//var parent = document.getElementById('container');//    var box1 = new Box(parent);//随机生成方块的坐标//box1.random();</script>
</body>
</html>

css部分：

#container{width: 800px;height: 600px;background-color: lightgray;position: relative;
}

box.js部分

function Box(parent,options){options = options || {};//表示  如果对方传过来是options对象,直接返回该对象,//如果没有返回该对象,此时变量的值是undefined,若是undefined,返回的布尔类型//是false,会返回空对象(防止对象出问题)//方块所具备的属性this.backgroundColor = options.backgroundColor || 'red';this.width = options.width || 20;this.height = options.height || 20;this.x = options.x || 0;this.y = options.y || 0;//创建对应的divthis.div = document.createElement('div');//将div设置属性,那么div就可以在init方法中被调用parent.appendChild(this.div);this.parent = parent;//设置div的样式this.init();
}//初始化div的样式
Box.prototype.init = function(){var div = this.div;div.style.backgroundColor = this.backgroundColor;div.style.height = this.height +'px';div.style.width = this.width +'px';div.style.left = this.x + 'px';div.style.top = this.y + 'px';//脱离文档流div.style.position = 'absolute';}//让box能够生成随机方块的位置
Box.prototype.random = function(){//父容器的宽度/方块的宽度,就能知道能放多少方块var x = Tools.getRandom(0,this.parent.offsetWidth/this.width - 1)*this.width;var y = Tools.getRandom(0,this.parent.offsetHeight/this.height - 1)*this.height;this.div.style.left = x + 'px';this.div.style.top = y + 'px';}

main.js

//生成10个方块 并随机生成颜色
var container = document.getElementById('container');//数组存储创建的方块
var array = [];
for(var i = 0;i<10;i++){var r = Tools.getRandom(0,255);var g = Tools.getRandom(0,255);var b = Tools.getRandom(0,255);var box = new Box(container,{backgroundColor:'rgb('+r+','+g+','+ b +')'});//把创建好的方块添加到数组中array.push(box);
}//设置随机位置,开启定时器
setInterval(randomBox,500);
//页面加载完成,先设置随机位置
randomBox();
function randomBox(){//随机生成方块的坐标for(var i = 0;i<array.length;i++) {var box = array[i];box.random();}
}

box.js

var Tools = {getRandom: function (min, max) {return Math.floor(Math.random() * (max - min + 1)) +  min;}
}

实现效果：

####31.使用闭包改字体
闭包：在一个作用域中访问另一个作用域的变量
代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>改字体</title>
</head>
<body>字体这么大<button id="btn1">按钮1</button><button id="btn2">按钮2</button><button id="btn3">按钮3</button>
<script type="text/javascript">var btn1 = document.getElementById('btn1');var btn2 = document.getElementById('btn2');var btn3 = document.getElementById('btn3');
//创建一个函数
function makeFun(size){return function(){document.body.style.fontSize = size+'px';}
}
btn1.onclick = makeFun(12);
btn2.onclick = makeFun(16);
btn3.onclick = makeFun(18);</script>
</body>
</html>

效果如下：

33.使用正则表达式进行表单验证

代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>正则表达式</title>
</head>
<body>QQ号：<input type="text" id="txtQQ"><span></span><br>邮箱：<input type="text" id="txtEMail"><span></span><br>手机：<input type="text" id="txtPhone"><span></span><br>生日：<input type="text" id="txtBirthday"><span></span><br>姓名：<input type="text" id="txtName"><span></span><br><script type="text/javascript">//验证邮编  ^[1-9]\d{5}$      ——100010//验证电话号码  ^[1-9]\d{10}$//验证日期    ^\d{4}-d{1,2}-d{1,2}$   ——2103-2-3//验证邮箱      \w+@\w+(\.\w+)     ——xxx@sina.com.cn     ——\w表示任意多数字字母下划线;()表示可以出现多次//                                  //验证QQaddCheck('txtQQ',/^\d{5,12}$/,'请输入正确的QQ格式');//验证邮箱addCheck('txtEMail',/^\w+@\W+(\>\W+)+$/);// 3 手机号addCheck('txtPhone', /^[1-9]\d{10}$/, '请输入正确的手机号码格式');// 4 验证日期addCheck('txtBirthday', /^\d{4}-\d{1,2}-\d{1,2}$/, '请输入正确的日期格式')// 5 验证姓名addCheck('txtName', /^[\u4e00-\u9fa5]{2,4}$/, '请输入2-4个汉字')//将文本框的验证封装成一个函数//第一个参数是元素的ID//第二个参数是正则表达式对象RegExp//第三个参数是提示的文本function addCheck(elementID,reg,tip){var element = document.getElementById(elementID);element.onblur = function(){var span = this.nextElementSibling;//下一个兄弟元素if (!reg.test(this.value)) {//若不匹配 文本框后面的span中给出相应的提示span.innerText = tip;span.style.color = 'red';}else{span.innerText = '';span.style.color = '';}}}</script>
</body>
</html>

jQuery学习

1.点击按钮，改变p标签内容

<!DOCTYPE html>
<html lang="en" class="">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script type="text/javascript" src="jquery-1.12.2.js"></script><input type="button" value="设置内容" id="btn"><p>1</p><p>12</p><p>134</p><p>154</p><script type="text/javascript">//页面加载事件$(function(){//获取点击按钮$('#btn').click(function(){//获取所有的p标签$('p').text('我们都是P标签');});});</script>
</body>
</html>

效果显示

2.下拉菜单

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>下拉菜单</title><script type="text/javascript" src="jquery-1.12.2.js"></script>
</head>
<body>
<div class="wrap"><ul><li><a href="javascript:void(0);">帅哥</a><ul><li><a href="javascript:void(0)">魏大勋</a><a href="javascript:void(0)">王大陆</a><a href="javascript:void(0)">陈伟霆</a></li><li></li><li></li></ul></li><li><a href="javascript:void(0);">美女</a><ul><li><a href="javascript:void(0)">谢娜</a><a href="javascript:void(0)">吴昕</a><a href="javascript:void(0)">欧阳娜娜</a></li><li></li><li></li></ul></li><li><a href="javascript:void(0);">实力派</a><ul><li><a href="javascript:void(0)">陈宝国</a><a href="javascript:void(0)">陈道明</a><a href="javascript:void(0)">宋丹丹</a></li><li></li><li></li></ul></li></ul>
</div>
<style type="text/css">* {margin: 0;padding: 0;}ul {list-style: none;}.wrap {width: 330px;height: 30px;margin: 100px auto 0;padding-left: 10px;background-image: url(images/bg.jpg);}.wrap li{background-image: url(images/libg.jpg);}.wrap > ul > li {float: left;margin-right: 10px;position: relative;}.wrap a {display: block;height: 30px;width: 100px;text-decoration: none;color: #000;line-height: 30px;text-align: center;}.wrap li ul {position: absolute;top: 30px;display: none;}</style>
<script type="text/javascript">//页面加载$(function(){//鼠标放在ul下的a元素上出现ul下面的三个li$('.wrap>ul>li').mouseover(function(){$(this).children('ul').show();});$('.wrap>ul>li').mouseout(function(){$(this).children('ul').hide();});});
</script>
</body>
</html>

显示效果

3.精品服装展示

代码如下：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;font-size: 12px;}ul {list-style: none;}a {text-decoration: none;}.wrapper {width: 298px;height: 248px;margin: 100px auto 0;border: 1px solid pink;overflow: hidden;}#left, #center, #right {float: left;}#left li, #right li {background: url(images/lili.jpg) repeat-x;}#left li a, #right li a {display: block;width: 48px;height: 27px;border-bottom: 1px solid pink;line-height: 27px;text-align: center;color: black;}#left li a:hover, #right li a:hover {background-image: url(images/abg.gif);}#center {border-left: 1px solid pink;border-right: 1px solid pink;}</style><script src="jquery-1.12.2.js"></script></head>
<body>
<div class="wrapper"><ul id="left"><li><a href="#">女靴</a></li><li><a href="#">雪地靴</a></li><li><a href="#">冬裙</a></li><li><a href="#">呢大衣</a></li><li><a href="#">毛衣</a></li><li><a href="#">棉服</a></li><li><a href="#">女裤</a></li><li><a href="#">羽绒服</a></li><li><a href="#">牛仔裤</a></li></ul><ul id="center"><li><a href="#"><img src="data:images/女靴.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/雪地靴.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/冬裙.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/呢大衣.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/毛衣.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/棉服.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/女裤.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/羽绒服.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/牛仔裤.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/女包.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/男包.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/登山鞋.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/皮带.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/围巾.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/皮衣.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/男毛衣.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/男棉服.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/男靴.jpg" width="200" height="250"/></a></li></ul><ul id="right"><li><a href="#">女包</a></li><li><a href="#">男包</a></li><li><a href="#">登山鞋</a></li><li><a href="#">皮带</a></li><li><a href="#">围巾</a></li><li><a href="#">皮衣</a></li><li><a href="#">男毛衣</a></li><li><a href="#">男棉服</a></li><li><a href="#">男靴</a></li></ul><p></p><span></span><span></span><p></p><span></span>
</div>
<script>$(function(){$('#left>li').mouseover(function(){var index = $(this).index();$('#center>li:eq('+index+')').show();$('#center>li:eq('+index+')').siblings('li').hide();//当前元素的所有兄弟元素});$('#right>li').mouseover(function(){var index = $(this).index()+9;$('#center>li:eq('+index+')').show();$('#center>li:eq('+index+')').siblings('li').hide();//当前元素的所有兄弟元素});});    </script>
</body>
</html>

显示效果

4.突出显示

代码如下

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}ul {list-style: none;}body {background: #000;}.wrap {margin: 100px auto 0;width: 630px;height: 394px;padding: 10px 0 0 10px;background: #000;overflow: hidden;border: 1px solid #fff;}.wrap li {float: left;margin: 0 10px 10px 0;}.wrap img {display: block;border: 0;}</style><script src="jquery-1.12.2.js"></script><script>$(function () {$(".wrap>ul>li").mouseover(function(){$(this).siblings("li").css("opacity",0.5);$(this).css("opacity",1)});$(".wrap").mouseout(function(){//.find针对当前的元素里面找以下其他的元素$(this).find("li").css("opacity",1)});});</script>
</head>
<body>
<div class="wrap"><ul><li><a href="#"><img src="data:images/01.jpg" alt=""/></a></li><li><a href="#"><img src="data:images/02.jpg" alt=""/></a></li><li><a href="#"><img src="data:images/03.jpg" alt=""/></a></li><li><a href="#"><img src="data:images/04.jpg" alt=""/></a></li><li><a href="#"><img src="data:images/05.jpg" alt=""/></a></li><li><a href="#"><img src="data:images/06.jpg" alt=""/></a></li></ul>
</div>
</body>
</html>

效果显示

5.手风琴案例

代码显示

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>ul {list-style: none}* {margin: 0;padding: 0;}div {width: 1150px;height: 400px;margin: 50px auto;border: 1px solid red;overflow: hidden;}div li {width: 240px;height: 400px;float: left;}div ul {width: 1300px;}</style><script src="jquery-1.12.2.js"></script><script>$(function(){$('#box>ul>li').mouseover(function(){//将当前li的所有兄弟元素li的宽度设置一下$(this).siblings('li').css("width","100px");$(this).css('width','800px');});$('#box>ul>li').mouseout(function(){//将当前li的所有兄弟元素li的宽度设置一下$(this).siblings('li').css("width","240px");$(this).css('width','240px');});});</script>
</head>
<body>
<div id="box"><ul><li><img src="data:images/1.jpg"/></li><li><img src="data:images/2.jpg"/></li><li><img src="data:images/3.jpg"/></li><li><img src="data:images/4.jpg"/></li><li><img src="data:images/5.jpg"/></li></ul>
</div>
</body>
</html>

效果显示

5.开关灯案例

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>开关灯</title>
</head>
<body><style type="text/css">.cls{background-color: black;}
</style><script type="text/javascript" src="jquery-1.12.2.js"></script><input id="btn" type="button" value="开关灯" /><script type="text/javascript">$(function(){$('#btn').click(function(){//判断当前是否是应用类样式if ($('body').hasClass('cls')) {//有应用该样式$('body').removeClass('cls');}else{$('body').addClass('cls');}})})</script>
</body>
</html>

简便方法写

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>开关灯</title>
</head>
<body><style type="text/css">.cls{background-color: black;}
</style><script type="text/javascript" src="jquery-1.12.2.js"></script><input id="btn" type="button" value="开关灯" /><script type="text/javascript">//换一种方法:toggleClass()——切换样式$(function(){$('#btn').click(function(){$('body').toggleClass('cls');})})</script>
</body>
</html>

实现效果

6.产品切换案例

代码如下

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}ul {list-style: none;}.wrapper {width: 1000px;height: 475px;margin: 0 auto;margin-top: 100px;}.tab {border: 1px solid #ddd;border-bottom: 0;height: 36px;width: 320px;}.tab li {position: relative;float: left;width: 80px;height: 34px;line-height: 34px;text-align: center;cursor: pointer;border-top: 4px solid #fff;}.tab span {position: absolute;right: 0;top: 10px;background: #ddd;width: 1px;height: 14px;overflow: hidden;}.products {width: 1002px;border: 1px solid #ddd;height: 476px;}.products .main {float: left;display: none;}.products .main.selected {display: block;}.tab li.active {border-color: red;border-bottom: 0;}</style><script src="jquery-1.12.2.js"></script><script>$(function () {//获取ul中的所有的li,调用鼠标进入的事件$('.tab>li').mouseover(function(){//移除当前的li的所有兄弟元素li的类样式$(this).siblings('li').removeClass('active');//让当前li添加类样式$(this).addClass('active');//获取当前的li的索引var index = $(this).index();//获取div中对应的索引的这个div,让这个div的所有的兄弟元素div全部移除selected类样式,让当前对应的div(索引对应)应用selected类样式$('.products>div:eq('+index+')').siblings('div').removeClass('selected');//当前对应的div添加类样式$('.products>div:eq('+index+')').addClass('selected')});});</script>
</head>
<body>
<div class="wrapper"><ul class="tab"><li class="tab-item active">国际大牌<span>◆</span></li><li class="tab-item">国妆名牌<span>◆</span></li><li class="tab-item">清洁用品<span>◆</span></li><li class="tab-item">男士精品</li></ul><div class="products"><div class="main selected"><a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a></div><div class="main"><a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a></div><div class="main"><a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a></div><div class="main"><a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a></div></div>
</div></body>
</html>

实现效果

7.链式编程案例1

获取列表中的每个li,当鼠标进入之后,当前的li有高亮显示,点击得时候可以让当前被点击的li字体变大，字体颜色改变，字体也改变

代码如下：

  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>链式编程</title></head><body><script type="text/javascript" src="jquery-1.12.2.js"></script><ul id="uu"><li>11</li><li>22</li><li>33</li><li>44</li><li>55</li><li>66</li></ul><script type="text/javascript">//获取列表中的每个li,当鼠标进入之后,当前的li有高亮显示,点击得时候可以让当前被点击的li字体变大 字体颜色改变 字体也改变$(function(){$('#uu>li').mouseover(function(){//$(this).css{("font-size",'20px'),('font-fanily',''),('color','red')};$(this).css('backgroundColor','red').siblings('li').css('backgroundColor','');});$('#uu>li').click(function(){$(this).css('fontSize','50px').css('color','green');});});</script></body></html>

实现效果

8.链式编程案例2

实现效果
点击按钮,改变按钮的value值,鼠标进入按钮中,按钮的宽高改变
鼠标离开的时候,按钮背景的颜色绿色
- 代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链式编程2</title>
</head>
<body><script type="text/javascript" src="jquery-1.12.2.js"></script><input type="button" value="显示效果" id="btn"><script type="text/javascript">//实现效果//点击按钮,改变按钮的value值,鼠标进入按钮中,按钮的宽 高改变//鼠标离开的时候,按钮背景的颜色绿色$(function(){$('#btn').click(function(){$(this).val('改变了');});$('#btn').mouseover(function(){$(this).css({'width':'150px','height':'50px'});});$('#btn').mouseout(function(){$(this).css('backgroundColor','green');});});</script>
</body>
</html>

实现效果

9.获取兄弟元素案例

实现功能：
鼠标经过的时候,背景颜色为红色
点击的时候,当前元素之前的所有元素均为黄色,后面的所有元素为绿色

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>ul {list-style-type: none;width: 200px;position: absolute;left: 500px;}ul li {margin-top: 10px;cursor: pointer;text-align: center;font-size: 20px;}.red{background-color: red;}.yellow{background-color: yellow;}.green{background-color: green;}</style><script src="jquery-1.12.2.js"></script><script>//鼠标经过的时候,背景颜色为红色//点击的时候,当前元素之前的所有元素均为黄色,后面的所有元素为绿色//获取ul中所有的li,有鼠标进入事件,鼠标离开事件,点击事件$(function(){//获取ul->li$('ul>li').mouseover(function(){$(this).addClass('red');}).mouseout(function(){$(this).removeClass('red');}).click(function(){$(this).prevAll('li').addClass('yellow');$(this).nextAll('li').addClass('green');});//当前元素前面的所有兄弟元素背景颜色为黄色//$(this).prevAll().css("backgroundColor","yellow");//当前元素后面的所有兄弟元素背景颜色为蓝色//$(this).nextAll().css("backgroundColor","blue");//链式编程代码//断链:对象调用方法,返回的不是当前的对象,再调用方法,调用不了,//解决断链--->恢复到断链之前的一个效果--修复断链//.end()方法恢复到断链之前的效果});</script>
</head>
<body>
<ul><li>青岛啤酒（TsingTao）</li><li>瓦伦丁（Wurenbacher）</li><li>雪花（SNOW）</li><li>奥丁格教士（Franziskaner）</li><li>科罗娜喜力柏龙（Paulaner）</li><li>嘉士伯Kaiserdom</li><li>罗斯福（Rochefort）</li><li>粉象（Delirium）</li><li>爱士堡（Eichbaum）</li><li>哈尔滨牌蓝带</li>
</ul></body>
</html>

实现效果

10.动画案例

点击按钮，然后图中图片每一秒消失一张，全部隐藏后，再以一秒的频率出现

代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{width: 400px;}img{width:90px ;height:90px;vertical-align: top;}</style><script src="jquery-1.12.2.js"></script><script>$(function(){$('#btn1').click(function(){//获取最后一张图片然后隐藏$('div>img').last('img').hide(1000,function(){//arguments.callee相当于递归(直接调用当前方法)$(this).prev().hide(800,arguments.callee);});});$('#btn2').click(function(){//获取最后一张图片然后隐藏$('div>img').first('img').show(1000,function(){//arguments.callee相当于递归(直接调用当前方法)$(this).next().show(800,arguments.callee);});});});</script></head>
<body>
<input type="button" value="隐藏动画" id="btn1"/>
<input type="button" value="显示动画" id="btn2"/>
<div><img src="data:images/1.jpg"/><img src="data:images/2.jpg"/><img src="data:images/3.jpg"/><img src="data:images/4.jpg"/>
</div>
</body>
</html>

11.全选和反选案例

代码如下

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>* {padding: 0;margin: 0;}.wrap {width: 300px;margin: 100px auto 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;}th,td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}th {background-color: #09c;font: bold 16px "微软雅黑";color: #fff;}td {font: 14px "微软雅黑";}tbody tr {background-color: #f0f0f0;}tbody tr:hover {cursor: pointer;background-color: #fafafa;}</style><script src="jquery-1.12.2.js"></script><script>//        $(function () {//            //为全选的复选框添加点击的方法//            $("#j_cbAll").click(function () {//                //当前的复选框选中//                //结果:true或者false//                var checked=$("#j_cbAll").prop("checked");//                $("#j_tb").find(":checkbox").prop("checked",checked);//            });//            //为tbody中所有的checkbox添加点击的方法//            $("#j_tb").find(":checkbox").click(function () {//                //获取所有的checkbox的个数//                var checkboxLength=$("#j_tb").find(":checkbox").length;//                //获取所有选中的checkbox的个数//                var checkedLength=$("#j_tb").find(":checked").length;//                //判断个数是否相等//                if(checkboxLength==checkedLength){//                    $("#j_cbAll").prop("checked",true);//                }else{//                    $("#j_cbAll").prop("checked",false);//                }//            });////        });</script><script>$(function () {//全选的复选框注册点击的事件$('#j_cbAll').click(function(){//获取该复选框的选中状态,为下面所有的复选框的选中状态设置var checked = $(this).prop('checked') ;//获取所有的复选框$('#j_tb').find(':checkbox').prop('checked',checked);});//获取所有的复选框$('#j_tb').click(function(){//获取所有选中的复选框的个数var length1 = $(this).find(':checkbox').length;var length2 = $(this).find(':checked').length;if (length1 == length2) {$('#j_cbAll').prop('checked',true);}else{$('#j_cbAll').prop('checked',false);}})//对比个数是否相同,如果相同则全选,否则反选});  </script>
</head><body>
<div class="wrap"><table><thead><tr><th><input type="checkbox" id="j_cbAll" /></th><th>课程名称</th><th>所属学院</th></tr></thead><tbody id="j_tb"><tr><td><input type="checkbox" /></td><td>JavaScript</td><td>前端与移动开发学院</td></tr><tr><td><input type="checkbox" /></td><td>css</td><td>前端与移动开发学院</td></tr><tr><td><input type="checkbox" /></td><td>html</td><td>前端与移动开发学院</td></tr><tr><td><input type="checkbox" /></td><td>jQuery</td><td>前端与移动开发学院</td></tr><!--<tr><td><input type="checkbox"/></td><td>HTML5</td><td>前端与移动开发学院</td></tr><tr><td><input type="checkbox"/></td><td>CSS3</td><td>前端与移动开发学院</td></tr>--></tbody></table>
</div>
</body></html>

12.固定导航栏案例

代码如下

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>防腾讯固定导航栏</title><style type="text/css">* {margin: 0;padding: 0;}.main {width: 1000px;margin: 0 auto;}/*.top {height: 171px;}.nav {height: 86px;}*/</style><script src="jquery-1.12.2.js"></script><script>$(function(){//滚动条事件是在浏览器中,因此顶级对象为window$(window).scroll(function(){//判断向上卷曲出去的距离是否大于或等于应用类样式top的div高度if ($('.top').height() <= $(document).scrollTop()) {$('.nav').css('position','fixed').css('top',0);$('.main').css('marginTop',$('.nav').height());}else{$('.nav').css('position','static');//static表示还原为原来未脱标时的状态$('.main').css('marginTop',0);}})})</script>
</head><body>
<div class="top"><img src="data:images/top.png" />
</div>
<div class="nav"><img src="data:images/nav.png" />
</div>
<div class="main"><img src="data:images/main.png" />
</div>
</body></html>

13.按键改变背景颜色

按下不同键盘上的按键, div对应不同的颜色

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>按键改变颜色</title>
</head>
<body><style type="text/css">div{widows: 200px;height: 100px;background-color: pink;}
</style><div id="dv"></div><script type="text/javascript" src="jquery-1.12.2.js"></script><script type="text/javascript">$(function(){$(document).keydown(function (e){var code = e.keyCode;switch(code){case 65:$('#dv').css('backgroundColor','red');break;case 66:$('#dv').css('backgroundColor','orange');break;case 67:$('#dv').css('backgroundColor','yellow');break;case 68:$('#dv').css('backgroundColor','green');break;case 69:$('#dv').css('backgroundColor','blue');break;case 70:$('#dv').css('backgroundColor','pink');break;break;case 70:$('#dv').css('backgroundColor','purple');break;}})})</script></body>
</html>

依次按下a b c d e f 之后

14.事件冒泡

什么是事件冒泡：
在元素中有元素，这些元素具有相同的事件，一旦最里面的事件被触发，外面的元素自然也被触发
例如：元素A中含有元素B，A和B都有点击事件，当B的点击事件被触发之后，A的点击事件也随之被触发

如下所示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>取消事件冒泡</title><style type="text/css">#dv1{width: 300px;height: 300px;background-color: red;}#dv2{width: 250px;height: 250px;background-color: green;}#dv3{width: 200px;height: 200px;background-color: blue;}</style>
</head>
<body><div id="dv1"><div id="dv2"><div id="dv3"></div></div></div><script type="text/javascript" src="jquery-1.12.2.js"></script><script type="text/javascript">$('#dv1').click(function(){alert('d1被点击');})$('#dv2').click(function(){alert('d2被点击');})$('#dv3').click(function(){alert('d3被点击');})</script>
</body>
</html>

如何取消事件冒泡
在每个事件最后加上 return false即可
或者e.stoPropagation();

return false——还可以取消浏览器的默认事件

15.五角星评分案例

这个案例虽然代码只有几行,但是逻辑超级好
效果如淘宝评价

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>五角星评分案例</title><style>* {padding: 0;margin: 0;}.comment {font-size: 40px;color: yellow;}.comment li {float: left;}ul {list-style: none;}</style><script src="jquery-1.12.2.js"></script><script>
//        $(function () {//            //获取所有的li绑定鼠标进入和鼠标离开和点击事件
//            $(".comment>li").mouseover(function () {//                $(this).text("★").prevAll("li").text("★").end().nextAll("li").text("☆");
//            }).mouseout(function () {//                $(this).text("☆").prevAll("li").text("☆");
//                //获取属性index为10的这个li和这个li前面所有的li
//                $(".comment>li[index=10]").text("★").prevAll("li").text("★");
//
//            }).click(function () {//                $(this).attr("index","10").siblings("li").removeAttr("index");
//            });
//        });//</script><script>$(function(){$('.comment>li').mouseover(function(){$(this).text('★');$(this).prevAll('li').text('★');});$('.comment>li').mouseout(function(){//寻找li$('.comment').find('li').text('☆');//    $(this).prevAll('li').text('☆');//    如果里面有index元素$('.comment>li[index=1]').text('★').prevAll("li").text("★");});$('.comment>li').click(function(){$(this).attr('index','1').siblings('li').removeAttr('index');});});</script>}
</head><body>
<ul class="comment"><li>☆</li><li>☆</li><li>☆</li><li>☆</li><li>☆</li>
</ul>
</body></html>

实现效果

JavaScript小案例程序保存（完整代码+效果展示）相关推荐

网易云音乐小程序案例分享附完整代码
todo: 添加音乐到收藏(最近)列表歌词滚动从一个 hello world 开始微信开发者工具生成目录如下: . |-- app.js |-- app.json |-- app.wxss | ...
HTML+js实现贪吃蛇小游戏（内含完整代码）
案例分析看图拆解游戏首先我们根据图片上的内容把这个游戏拆解成几个部分去单独看: 最外面的大盒子包裹着内容加边框限制蛇的活动范围,整个范围可以看成由许多小方格排列构成的,例如这样子的:: 两个按钮, ...
HTML+CSS+JavaScript小案例（注册页面表单验证轮播图跳转主页动态表格select联动）
案例:(表单验证) <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
Javascript小案例（一）：仿淘宝搜索框用户输入事件的实现
淘宝是我们经常用的一个网上购物平台,打开淘宝网首页,找到淘宝首页的搜索框,如下如所示: (截图日期:2017年6月18日) 大家可以看到,当页面一打开,搜索框中就可以看到灰色字体"少女高跟鞋 ...
javaScript小案例------js实现手风琴效果篇
原生js书写手风琴效果 js手风琴效果第一种方法手风琴需求 html和css: html: css: js animate.js index.js 第二种方法 js手风琴效果我用了两种方法来完成 ...
秒会pygame：究极无敌闪烁小球与碰壁反弹程序（完整代码）
目录单调小球升级小球完整代码单调小球前一篇文章中,我们写了一个小球的碰壁检测反弹的程序 import pgzrun import randomHEIGHT=400 WIDTH=600 x1= ...
跳一跳小外挂（附完整代码）
1实验环境操作系统:Windows10 编码语言:Python3.6 编译平台:Pycharm Python库:os.datetime.matplotlib.opencv-python.time 2 ...
html + css + javascript 写的程序员表白代码
效果展示个人服务器演示地址话不多说,代码伺候注意这里用到插件js jquery.min.js, jquery.fireworks.js , 流星雨组件 snow.js 雪花特效组件音乐部分我用 ...
JavaScript实现网页计时器(有完整代码)
文章目录一.如何实现倒计时的功能? 效果图项目思路二.完整代码一.如何实现倒计时的功能? 效果图项目思路先搭建好如下的框架.其中<input type="text" ...

JavaScript小案例程序保存（完整代码+效果展示）