前端JavaScript之DOM使用案例
1.弹出框点击关闭
（这个例子关键自己创建标签以及属性，不是太好想啊，而且作用相对来数也不是太大）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
}
#box{
width: 100%;
height: 100%;
background: rgba(0,0,0,.3);
}
#content{
position: relative;
top: 150px;
width: 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;
width: 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{
width: 100%;
height: 100%;
background: rgba(0,0,0,.3); }
.content{
position: relative;
top: 150px;
width: 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;
width: 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;
width: 600px;
}
.border{
width: 200px;
height: 40px;
background-color: red;
position: absolute;
top: 60px;
left: 30px;
z-index: 10;
border:2px solid black; }
.bottom{
width: 300px;
height:50px;
position: absolute;
top: 100px;
left: 30px;
border:2px solid black;
z-index: 0;
display: none;
}
div.c{
border-bottom-width: 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{
width: 480px;
margin: 20px auto;
border: 1px solid red;
}
ul{
width: 100%;
overflow: hidden;
}
ul li{
float: left;
width: 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{
width: 480px;
/*距顶部10px，居中*/
margin:10px auto;
border: 1px solid red;
}
ul{
width: 100%;
overflow: hidden;
}
ul li{
float: left;
width: 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="width: 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>
前端JavaScript之DOM使用案例的更多相关文章
- 前端JavaScript之DOM事件操作
DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. 1.DOM(Document Object Moduel):文档对象模型 定义了访问和操作HTML文档的标准法,把HT ...
- 前端 JavaScript BOM & DOM
内容目录: 1. BOM 2. DOM BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行"对话". DOM (D ...
- web前端----JavaScript的DOM(三)
一.JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如 for(var i = 0;i<ele.length;i++){} 第二种:for (var i in l ...
- web前端----JavaScript的DOM（二）
前面在DOM一中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作 创建节点:var ele_a = document.createElement('a');添加节点:ele_p ...
- web前端----JavaScript的DOM（一）
一.什么是HTML DOM HTML Document Object Model(文档对象模型) HTML DOM 定义了访问和操作HTML文档的标准方法 HTML DOM 把 HTML 文档呈现 ...
- 前端JavaScript之DOM节点操作
1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...
- 前端JavaScript(3）-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息
小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...
- Python之路day13 web 前端（JavaScript，DOM操作）
参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容 ...
- 前端开发之JavaScript HTML DOM理论篇一
主要内容: 1.DOM简介 2.DOM 节点 3.DOM 方法和属性 4.DOM 访问和修改 一.DOM简介 1.什么是 DOM? DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTM ...
随机推荐
- 性能测试工具Jmeter05-badboy检查点与参数化
检查点设置 选择要检查的文字,然后在Tools->Add Assertion for Selection里添加断言,在进行回放 参数化 在请求搜索关机键字的部分进行参数化 选中搜索关键字- ...
- 摄像机模型 (Camera Model)
摄像机通过成像透镜将三维场景投影到摄像机二维像平面上,这个投影可用成像变换描述,即摄像机成像模型.摄像机成像模型有不同描述方式,本节首先介绍机器视觉中的常用坐标系,然后介绍摄像机的线性模型和非线性模型 ...
- ubuntu 16.04 安装genymotion
以ubuntu 16.04 64bit 系统为例: 1. 下载 通过https://www.genymotion.com/download/ 下载自己操作系统版本的可执行文件( ...
- Winform窗体“空闲事件”
Application.Idle += Application_Idle; void Application_Idle(object sender, EventArgs e){ } 当应用程序完成处理 ...
- extjs 6
因为最近公司要写一个项目前台所以开始学习extjs前端框架,希望一起共勉. 那么我们的教程就从 Hello World 讲起. helloWorld.js Ext.onReady(function ...
- FastReport Site授权联合推广计划 彻底保障商业化开发，还送iPhone 5s
上月慧都与报表控件开发商Fastreport联合推出的优惠活动,获得中国开发者的巨大反响.本月慧都再次发力,与Fast Reports, Inc.联合推出FastReport Site授权推广计划.活 ...
- .Net CIL
MachineCode->Assembly->CIL(.Net) or SpecialMachineCode(JVM)->Pogramming code CIL Instructio ...
- Sleep 和 Wait 关于锁释放的区别
sleep和wait的区别是一个老生常谈的问题.Sleep 是 Thread类的方法, wait是Object类的方法.但是关键的区别是对锁的操作问题. 当我们调用sleep的时候,线程进入休眠,但是 ...
- Objectbox Box的getAll() 函数返回emptylist() 未判断导致崩溃
最近使用了Objectbox作为新项目的数据库后台,Greendao开发团队新力作,但是Objectbox算是比较新的一个东西,现在资料也不多. 今天跟大家分享一个关于Box类的getAll()函数的 ...
- 正交矩阵、正规矩阵和酉矩阵（转自Ramble Over The Cloud~）
网址:http://blog.csdn.net/alec1987/article/details/7414450 在数学中,正规矩阵 是与自己的共轭转置交换的复系数方块矩阵,也就是说, 满足 其中 是 ...