1.弹出框点击关闭
（这个例子关键自己创建标签以及属性，不是太好想啊，而且作用相对来数也不是太大）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
}
#box{
100%;
height: 100%;
background: rgba(0,0,0,.3);
}
#content{
position: relative;
top: 150px;
400px;
height: 200px;
line-height: 200px;
text-align: center;
color: red;
background-color: #fff;
margin: auto;
}
#span1{
position: absolute;
background-color: red;
top: 0;
right: 0;
30px;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<button id="btn">弹出</button>
</body>
<script type="text/javascript">
//获取dom元素 1.获取事件源
var oBtn = document.getElementById('btn');
//创建弹出模态框的相关DOM对象
var oDiv = document.createElement('div');
var oP = document.createElement('p');
var oSpan = document.createElement('span');
// 设置属性
oDiv.id = 'box';
oP.id = 'content'
oP.innerHTML = '模态框成功弹出'
oSpan.innerHTML = 'X';
oSpan.id = 'span1'
// 追加元素
oDiv.appendChild(oP);
oP.appendChild(oSpan);
// 点击弹出按钮 弹出模态框
oBtn.onclick = function(){
//动态的添加到body中一个div
this.parentNode.insertBefore(oDiv,btn)
}
// 点击X 关闭模态框
oSpan.onclick = function(){
// 移除oDiv元素
oDiv.parentNode.removeChild(oDiv)
}
// 1.购物车
// 2.模态框
</script>
</html>
现在来看看反向从现有的进行操作，这个顺着看比上一个好理解一点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
}
.box{
100%;
height: 100%;
background: rgba(0,0,0,.3);
}
.content{
position: relative;
top: 150px;
400px;
height: 200px;
line-height: 200px;
text-align: center;
color: red;
background-color: #fff;
margin: auto;
}
.span1{
position: absolute;
background-color: red;
top: 0;
right: 0;
30px;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff;
}
div{
display: none;
}
p{
display: none;
}
span{
display: none;
}
</style>
</head>
<body>
<button id="btn">弹出</button>
<div class="box" id="div">
<p class="content" id="p">模拟态弹出
<span class="span1" id="x">x</span>
</p>
</div>
<script type="text/javascript">
var oClose = document.getElementById('x');
var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('div');
var oP = document.getElementById('p');
oBtn.onclick = function(){
oBtn.style.display = "none";
oDiv.style.display = "block";
oP.style.display = "block";
oClose.style.display = "block";
}
oClose.onclick = function(){
oBtn.style.display = "block";
oDiv.style.display = "none";
oP.style.display = "none";
oClose.style.display = "none";
}
</script>
</body>
</html>
2.鼠标放到输入框里面，自动弹出框下内容
（这里其实重点在于两个盒子紧靠后，如何让重合部位的线条被背景遮盖住，只要这个实现了，后面使用css就方便了）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
background-color: rgba(0,0,0,0.2);
position: relative;
margin: 0 auto;
height:400px;
600px;
}
.border{
200px;
height: 40px;
background-color: red;
position: absolute;
top: 60px;
left: 30px;
z-index: 10;
border:2px solid black;
}
.bottom{
300px;
height:50px;
position: absolute;
top: 100px;
left: 30px;
border:2px solid black;
z-index: 0;
display: none;
}
div.c{
border-bottom- 0px;
}
</style>
</head>
<body >
<div class="box">
<div class="border" id="myBorder">666</div>
<div class="bottom" id="myBottom"></div>
</div>
<script type="text/javascript">
var oBorder = document.getElementById("myBorder");
var oBottom = document.getElementById("myBottom");
oBorder.onmouseenter = function(){
oBottom.style.display = "block";
oBorder.className += " c";
}
oBorder.onmouseleave = function(){
oBottom.style.display = "none";
oBorder.className = "border";
}
</script>
</body>
</html>
效果：
鼠标放到事件上面，随着左右移动，事件发生改变，出现轮播效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
#tab{
480px;
margin: 20px auto;
border: 1px solid red;
}
ul{
100%;
overflow: hidden;
}
ul li{
float: left;
160px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #cccccc;
}
ul li a{
text-decoration: none;
color:black;
}
li.active{
background-color: red;
}
p{
display: none;
height: 200px;
text-align: center;
line-height: 200px;
background-color: red;
}
p.active{
display: block;
}
</style>
</head>
<body>
<div id="tab">
<ul>
<li class="active">
<a href="#">首页</a>
</li>
<li>
<a href="#">新闻</a>
</li>
<li>
<a href="#">图片</a>
</li>
</ul>
<p class="active">首页内容</p>
<p>新闻内容</p>
<p>图片内容</p>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
// //需求：鼠标放到上面的li上，li本身变色(添加类)，对应的p也显示出来(添加类);
//思路：1.点亮上面的盒子。 2.利用索引值显示下面的盒子。
var tabli = document.getElementsByTagName('li');
var tabContent = document.getElementsByTagName('p')
// js的一个坑
for(let i = 0; i < tabli.length; i++){
// 绑定索引值（新增一个自定义属性：index属性）
// tabli[i].index = i;
tabli[i].onclick = function(){
// 1.点亮上面的盒子。 2.利用索引值显示下面的盒子。(排他思想)
for(var j = 0; j < tabli.length; j++){
tabli[j].className = '';
tabContent[j].className = '';
}
this.className = 'active';
console.log(i);
tabContent[i].className = 'active';//【重要代码】
}
}
}
</script>
</html>
和上面类似的案例，京东轮播图，鼠标放上去，li本身变色，对应上p显示出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
/*一个480的大盒子*/
#tab{
480px;
/*距顶部10px，居中*/
margin:10px auto;
border: 1px solid red;
}
ul{
100%;
overflow: hidden;
}
ul li{
float: left;
160px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #ccc;
}
/*字体设置*/
ul li a{
text-decoration: none;
color: blue;
}
li.active{
background-color: red;
}
p{
/*对于下部进行隐藏，否则就同时显现了*/
display: none;
height: 200px;
text-align: center;
line-height: 200px;
background-color: red;
}
/*这里对下部在进行活动打开*/
p.active{
display: block;
}
</style>
</head>
<body>
<div id="tab">
<ul>
<!-- 首页显示 -->
<li class="active">
<a href="#">首页</a>
</li>
<li>
<a href="#">新闻</a>
</li>
<li>
<a href="#">图片</a>
</li>
</ul>
<p class="active">首页内容</p>
<p>新闻内容</p>
<p>图片内容</p>
</div>
<script type="text/javascript">
window.onload = function(){
var tabli = document.getElementsByTagName('li');
var tabContent = document.getElementsByTagName('p');
for(let i = 0; i< tabli.length; i++){
// 绑定索引值
tabli[i].onclick = function(){
// 点亮盒子
for(var j = 0; j<tabli.length; j++){
tabli[j].className = " ";
tabContent[j].className = " ";
}
this.className = 'active';
tabContent[i].className = 'active';
}
}
}
</script>
</body>
</html>
定时器的使用
js中定时器分为setTimeout（）和setInterval（）两种
setTimeOut():只在指定时间后执行一次
setInterval()：在指定时间周期循环执行
clearInterval(timer):将计时器停止，但是timer变量本身还存在
timer=null后，timer变量会被当做垃圾被系统回收，无法再次启动原来的timer
例：
做一个点击会向右移动的盒子
（整了老半天，没研究出来咋让它再移回去）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app" style=" 100px;height: 100px;border: 1px solid red;">框子</div>
<button id="move">移动</button>
<script type="text/javascript">
var oApp = document.getElementById('app');
var moveBtn = document.getElementById('move');
var count = 0;
var timer = null;
moveBtn.onclick = function(){
timer = setInterval(function(){
count+=3;
oApp.style.marginLeft = count + 'px';
},50);
}
</script>
</body>
</html>