js DOM 案例
模态框
<html>
<head>
<meta charset="UTF-8">
<title>模态框</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
} html,
body {
width: 100%;
height: 100%;
} #bg {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .3);
} #login {
width: 300px;
height: 300px;
border-radius: 3px;
background-color: #fff;
line-height: 300px;
text-align: center;
margin: 0 auto;
position: relative;
} #close {
position: absolute;
right: 0;
top: 0;
width: 20px;
height: 20px;
background-color: red;
line-height: 20px;
text-align: center;
color: green;
cursor: pointer;
}
</style>
</head> <body>
<button id="btn">登录</button>
<!-- 需求： 打开网页时，点击登录显示一个背景图，中心 弹出一个登录框，登录框 右上角有关闭按钮 点击关闭 关闭登录框
-->
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
} // 1.点击登录按钮 弹出登录框
// 背景
var oBg = document.createElement('div'); // 登录框
var oLogin = document.createElement('p'); // 关闭按钮
var oClose = document.createElement('span'); oBg.id = 'bg';
oLogin.id = 'login';
oClose.id = 'close'; oClose.innerText = 'X';
oLogin.innerHTML = '登录框成功弹出'; // 追加
oBg.appendChild(oLogin);
oLogin.appendChild(oClose); console.log($('btn'));
$('btn').onclick = function() { this.parentNode.appendChild(oBg);
this.style.display = ' none';
} oClose.onclick = function() {
oBg.parentNode.removeChild(oBg);
$('btn').style.display = 'inline-block'; }
</script>
</body>
</html>
留言板
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>留言板</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
} .close {
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
cursor: pointer;
background-color: rgba(0, 0, 0, .1);
margin-left: 20px;
}
</style>
</head> <body>
<h1>简易留言板</h1>
<div id="box">
<!--<ul> </ul>--> </div>
<textarea id="msg"></textarea>
<input type="button" id="btn" value="留言" />
<button onclick="sum()">统计</button>
</body>
<script type="text/javascript">
// 0 将ul标签添加到div#box标签中
var oUl = document.createElement('ul');
var oBox = document.getElementById('box');
oBox.appendChild(oUl); var oBtn = document.getElementById('btn');
var oMsg = document.getElementById('msg')
// 控制留言的总数量
var count = 0;
oBtn.onclick = function() { // 点击留言按钮事件操作
// 1.创建li标签
var oLi = document.createElement('li');
//2.设置内容
oLi.innerHTML = '留言: '+oMsg.value + "<span class='close'>X</span>" // 3.如果想在插入的第一个li获取的前面继续添加li标签
//3.1获取li标签
var olis = document.getElementsByTagName('li');
//3.2 如果是第一次添加的li标签，则直接添加到ul的后面
if(olis.length == 0) {
oUl.appendChild(oLi);
count++; } else {
// 3.3 如果不是第一次添加的li标签，则插入到第一个li标签的前面
oUl.insertBefore(oLi, olis[0]);
count++;
}
// 4.添加完成之后 清空textarea的值
oMsg.value = ''; // 5.点击X的时候删除当前的一条数据
//5.1先获取所有的X
var oSpans = document.getElementsByTagName('span'); // 5.2for循环 对所有的X添加点击事件
for(var i = 0; i < oSpans.length; i++) {
oSpans[i].onclick = function() {
// 5.3 移除当前的li标签
oUl.removeChild(this.parentNode)
count--;
}
} } function sum() {
alert('一共发布了' + count + '条留言'); }
</script> </html>
模拟hover选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
button{
margin: 10px;
width: 100px;
height: 40px;
cursor: pointer;
}
button.active{
background-color: green;
} </style>
</head>
<body>
<button class="active">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script type="text/javascript"> // 需求： 鼠标悬浮 哪个button上，该button变成绿色的背景（添加类 active） var oBtns = document.getElementsByTagName('button'); for(var i = 0; i < oBtns.length; i++){
oBtns[i].onmouseover = function(){ // 重要： 排他思想: 先把所有按钮的className设置为空，然后把（this）当前这个按钮的className设置active
for(var j = 0;j < oBtns.length; j++){
oBtns[j].className = '';
} this.className = 'active';
}
} for(var i = 0;i < oBtns.length; i++){
oBtns[i].onmouseout = function(){
this.className = '';
}
} </script> </body>
</html>
tab栏选项卡
<!DOCTYPE html>
<html lang="en"> <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;
} #tab ul li {
float: left;
width: 160px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #ccc;
} #tab ul li a {
color: black;
display: block;
width: 100%;
height: 100%;
text-decoration: none;
} #tab ul li.active {
background-color: red;
} #tab p {
display: none;
height: 200px;
text-align: center;
line-height: 200px;
background-color: red;
} #tab p.active {
display: block;
}
</style>
</head> <body>
<div id="tab">
<ul>
<li class="active">
<a href="javascript:void(0);">首页</a>
</li>
<li>
<a href="javascript:void(0);">新闻</a>
</li>
<li>
<a href="javascript:void(0);">图片</a>
</li>
</ul>
<p class="active">首页内容</p>
<p>新闻内容</p>
<p>图片</p>
</div>
<script type="text/javascript">
// 需求： 鼠标放在上面，li上 li本身变色（添加类） 对应下面p也显示出来（添加类）
// 思路： 1.点亮上面的盒子 2 利用索引值来显示下面的盒子 /*
// 变量提升
var a;
console.log(a);//undefined
a = 10;
console.log(a);
*/ var tabLi = document.getElementsByTagName('li');
var tabP = document.getElementsByTagName('p'); for(var i = 0; i < tabLi.length; i++) {
// 将 i保存到 li标签对象中
tabLi[i].index = i;
// for循环和点击事件 谁快 i 全局作用域（块级作用域） 3
tabLi[i].onclick = function() { for(var j = 0; j < tabLi.length; j++) {
tabLi[j].className = '';
tabP[j].className = '';
}
this.className = 'active';
// Cannot set property 'className' of undefined
console.log(i);
tabP[this.index].className = 'active';
}
}
</script>
</body> </html>
购物车案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 500px;
height: 400px;
margin: 100px auto;
background-color: rgba(255,255,255,0.4);
position: relative; }
.car{
width: 150px;
height: 30px;
background-color: #fff;
padding-left: 30px;
position: absolute;
left: 130px;
top: 3px;
z-index: 3;
border: 1px solid green; }
.shop{
width: 310px;
height: 70px;
background-color: #fff;
position: absolute;
top:33px;
left: 0;
display: none; }
div.c{ border-bottom-width: 0; }
div.t{
border: 1px solid green;
}
</style>
</head>
<body>
<div class="box">
<div class="car" id="myCar">我的购物车</div>
<div class="shop t" id="shop"></div>
</div>
<script type="text/javascript">
var myCar = document.getElementById('myCar');
var shop = document.getElementById('shop');
myCar.onmouseover = function(){
shop.style.display = 'block';
myCar.className +=' c';
}
myCar.onmouseout = function(){
shop.style.display = 'none';
myCar.removeAttribute('class');
myCar.className = 'car';
}
</script>
</body>
</html>
下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#box{
margin: 50px;
width: 200px;
border: 1px dashed #bbb;
}
#box ul{
width: 100%;
overflow: hidden;
height: 31px;
/*overflow: hidden;
height: 31px;*/
}
#box ul.show{
height: auto;
}
#box ul li{
list-style: none;
width: 100%;
height: 25px;
line-height: 25px;
background: #fff;
color: #000;
font-size: 12px;
font-weight: bold;
}
#box ul li.title{
cursor: pointer;
height: 30px;
background: pink;
line-height: 30px;
font-size: 14px;
color: #fff;
}
</style> </head>
<body>
<div id="box">
<ul class="show">
<li class="title">同事</li>
<li>佳能</li>
<li>which</li>
<li>林泷</li>
<li>rose</li>
</ul>
<ul>
<li class="title">好友</li>
<li>梨子</li>
<li>苹果</li>
</ul>
<ul>
<li class="title">学员</li>
<li>长风</li>
<li>沙通</li>
<li>徐薇</li>
<li>许云朋</li>
</ul>
</div>
<script src="js/jquery-3.2.1.js"></script>
<script type="text/javascript" >
/* jquery写法
* $(function(){
var oUl= $("ul");
var length = $("ul").length;
console.log(length);
$("ul").click(function(event){ $(this).addClass("show").siblings('ul').removeClass('show'); }) });*/
var oUl = document.getElementsByTagName("ul");
var length = oUl.length; var index = 0;
for(var i = 0 ; i < length ; i ++){
oUl[i].aa = i;
oUl[i].onclick = function () {
oUl[index].className = "";
index = this.aa;
oUl[index].className = "show";
}
} </script>
</body>
</html>
js DOM 案例的更多相关文章
- 货架工程项目之js dom实现项目工程进度图
笔者最近要负责有个项目工程网站的安装进度过程,实现的效果要求大概如下图所示 由于笔者没有参与到数据库的制作,得知他们这个项目设计工序的时候就一个开始日期的和完成日期,连整个项目的安装结束时间都没有简直 ...
- js DOM优化相关探索
我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的 ...
- js DOM的几个常用方法
<div id="div1">这是个测试</div> <p </p> <p </p> //js DOM的几个常用方法 / ...
- JS DOM 来控制HTML元素
JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- JS Dom节点操作demo!
通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...
- Js DOM 详解
DOM事件类 基本概念 DOM事件的级别 1.DOM0 element.onclick = function(){} 2.DOM2 element.addEventListener("cli ...
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- JS DOM对象控制HTML元素详解
JS DOM对象控制HTML元素详解 方法: getElementsByName() 获取name getElementsByTagName() 获取元素 getAttribute() 获取元素 ...
- js计算器案例
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...
随机推荐
- ajax ＋jsp＋iframe无刷新上传文件[转]
http://hi.baidu.com/zj360202/blog/item/f23e3711f929c774cb80c475.html ajax jsp 无刷新上传文件 2009-10-26 16: ...
- R入门（一）
简单的算术操作和向量运算 向量赋值:函数c( ),参数可以是一个或多个数,也可以是向量 赋值符号‘<-’ 向量运算:exp(),log(),sin(),tan(),sqrt(),max(),mi ...
- java 判断对象是否是某个类的类型两种方法
第一种: instanceof 运算符是用来在运行时指出对象是否是特定类的一个实例.instanceof通过返回一个布尔值来指出,这个对象是否是这个特定类或者是它的子类的一个实例. 用法: resul ...
- Win7 VS2015环境使用SDL2-2.0.4
之前在VS中使用SDL2,如果只链接SDL2.lib,会提示 error LNK2019: unresolved external symbol _main referenced in functio ...
- 解决设置select默认选中不生效的方法
$scope.storageTypeList = ['Glusterfs','NFS','Ceph']; 不生效的方法: <select class="form-control&quo ...
- error C4430: error 2141
c:\evan\workspace\1\1\netwowkippack.h(50) : error C2146: 语法错误 : 缺少“;”(在标识符“nSourPort”的前面) c:\evan\wo ...
- hadoop Hive 的建表 和导入导出及索引视图
1.hive 的导入导出 1.1 hive的常见数据导入方法 1.1.1 从本地系统中导入数据到hive表 1.创建student表 [ROW FORMAT DELIMITED]关键字,是用来设 ...
- 添加wifi adb
https://blog.csdn.net/ouyang_peng/article/details/50370786 首先弄懂怎么设置adb wifi无线调试的功能,如下所示. 1. 手机端开启adb ...
- 利用HttpURLConnection发送post请求上传多个文件
本文要用java.net.HttpURLConnection来实现多个文件上传 1. 研究 form 表单到底封装了什么样的信息发送到servlet. 假如我参数写的内容是hello word,然后二 ...
- Android之TextView灵活使用
Android之TextView灵活使用 在项目中有无遇到过这样一种程况,例如文字"王明今年10岁了", 但是数字10是从网络返回的数据, 而你又想把这个文字写在xml中, 过往我 ...