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 ...
随机推荐
- oracle 替换字符 replace
替换字符: select replace('xxyyzz','zz','') from dual >> xxyy 同时替换多个字符: select replace(replace('x ...
- spring+springMVC+mybatis+maven+mysql环境搭建(二)
上一篇整合了spring+mybatis,基本上还不是web工程,接下来接入springMVC,Let's go! 一.工程转换成Web工程 首先右击项目-->properties-->p ...
- SGU 271 Book Pile (双端队列)
题意:n,m,k,表示有一个长度为 n 的序列,有 m 个操作,操作有 2 种,第一种是 ADD 在前面添加一个串,第二种是把前 k 个进行翻转,问你最后的序列是什么样的. 析:很明显,如果直接模拟, ...
- BT1120时序，可以用于自测用
module bt1120_gen #( , , , , , )( input clk, input rst_p, // input [5:0] h_sync_pixcels, // input [5 ...
- 【慕课网实战】Spark Streaming实时流处理项目实战笔记七之铭文升级版
铭文一级: 第五章:实战环境搭建 Spark源码编译命令:./dev/make-distribution.sh \--name 2.6.0-cdh5.7.0 \--tgz \-Pyarn -Phado ...
- Linux学习（2）－ 正则表达式基础
Linux学习(2)- 正则表达式基础 一.基础正则表达式介绍与练习 学习内容 正则表达式特殊符号 [:alnum:]代表英文大小写字母及数字 [:alpha:]代表英文大小写字母 [:blank:] ...
- Linux远程批量工具mooon_ssh和mooon_upload使用示例
目录 目录 1 1. 前言 1 2. 批量执行命令工具:mooon_ssh 2 3. 批量上传文件工具:mooon_upload 2 4. 使用示例 3 4.1. 使用示例1:上传/etc/hosts ...
- php获取跳转后的真实链接
网站的跳转链接经常为本站链接加上一些参数来跳转,如何使用php获取跳转后的链接呢? php代码如下: <?php // echo get_redirect_url('http://www.osc ...
- MySQL性能优化之延迟关联
[背景] 某业务数据库load 报警异常,cpu usr 达到30-40 ,居高不下.使用工具查看数据库正在执行的sql ,排在前面的大部分是: SELECT id, cu_id, name, in ...
- STL容器（C11）--unordered_map用法
http://www.cplusplus.com/reference/unordered_map/unordered_map/