前端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 ...
随机推荐
- webstorm 常见问题
1.webstorm(10.0.2)的端口号修改 https://blog.csdn.net/m0_38082783/article/details/71079274 2.导入主题 file –> ...
- [转]jQuery为控件添加水印文字
本文转自:http://www.cnblogs.com/gzh4455/archive/2011/09/29/2195418.html jQuery扩展: jquery.tinywatermark-3 ...
- (转)stty 命令说明及使用讲解
stty 命令说明及使用讲解 UNIX系统的命令很多,但是巧妙使用命令的方法更多.随着经验的积累和观察学习其他用户的实践,我们也可学会解决特殊问题的方法.这里谈谈自己使用UNIX系统中stty ...
- jQuery源代码学习笔记_工具函数_noop/error/now/trim
jQuery源代码学习笔记_工具函数_noop/error/now/trim jquery提供了一系列的工具函数,用于支持其运行,今天主要分析noop/error/now/trim这4个函数: 1.n ...
- 谷歌添加百度翻译提示Google已将百度翻译标记为恶意程序并阻止安装，怎么办
进入谷歌浏览器的设置, 显示高级设置——隐私设置下七个选项中的第四个选项(启用针对网上诱骗和恶意软件的防护功能)把勾去掉,然后将百度翻译的CRX拖动到chrome的安装插件页面, 修改chrome的限 ...
- Windows Server 2012 R2
Windows Server 2012 R2 历史上的Server有2003 server, 2008 server, 2012 server windows server 2012 r2对计算机的消 ...
- GOPS 2018全球运维大会上海站 参会感悟梳理
今天遇到很多优秀的讲师.业界的大伽,很开心 现在把get到的信息梳理一下:(1)想解决性能问题,一定要在缓存上下功夫:[nginx上有好多文章可以做,真是博大精深呢<深入理解Nginx:模块开发 ...
- 前台异步传过来的URL中获取token/获取string链接中的token
1.链接例子: string url = "http://domainName:port/1/2/3/4.htm?sysCode=1001020&token=QXJzemR3YXlW ...
- JAVA SE collection接口
collection接口:{Set,List,Queue} Set:无序集合,元素不可重复 List:有序集合,元素可重复 Queue:队列 Set{EnumSet ...
- Spring-cloud微服务 Eureka学习教程-单服务器配置之快速搭建EurekaServer、EurekaClient（基础）
以下实例代码下载地址:https://github.com/wades2/EurekaDemo Eureka是Spring Cloud Netflix的一个子模块,也是核心模块之一.用于云端服务发现, ...