DOM+Javascript一些实例
1、内容+遮罩层+悬浮对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.c1{
background: rgba(0,0,0,.5);
position: fixed;
top:0;
left: 0;
right: 0;
bottom: 0;
}
.c2{
background: white;
width: 400px;
height: 300px;
position: fixed;
top:50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
}
</style>
</head>
<body>
<input value="fuck me" type="button" onclick="show()">
<div id="zhezhao" class="c1 hide"> </div>
<div id="duihua" class="c2 hide">
<p>用户：<input type="text" value=""></p>
<p>密码：<input type="text" value=""></p>
<input type="button" value="确定">
<input type="button" value="取消" onclick="hide()">
</div> <script>
function show() {
document.getElementById('zhezhao').classList.remove('hide');
// 把遮罩层和对话框取消隐藏
document.getElementById('duihua').classList.remove('hide');
}
function hide() {
document.getElementById('zhezhao').classList.add('hide');
// 把遮罩层和对话框隐藏
document.getElementById('duihua').classList.add('hide');
}
</script>
</body>
</html>
点击后
点击取消按钮恢复原样
2、搜索框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.gg{
color: #7d7d7d;
}
.bb{
color: black;
}
</style>
</head>
<body>
<input value="请输入内容" class="gg" onblur="Blur(this);" onfocus="Focus(this)">
<script>
function Blur(arg) {
// 鼠标离开时
var cc=arg.value;
if(cc=='请输入内容'||cc.trim().length==0){
// 如果内容是原始值或为空时 变成灰色 并且恢复原始值
arg.value='请输入内容';
arg.className='gg';
}
}
function Focus(arg) {
var cc=arg.value;
// 鼠标进去时 改变成白色 如果为初始值就把值变成空
arg.className='bb';
if(arg.value=='请输入内容'){
arg.value='';
}
}
</script>
</body>
</html>
默认样式
鼠标点进去
输入几个字符
鼠标再出来
3、点击菜单出现相应的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
ul{
padding: 0;
margin: 0;
}
.hide{
display: none;
}
.menu{
width: 200px;
height: 500px;
background-color: #2459a2;
border: 2px solid #333;
}
.menu .title{
background-color: brown;
cursor: pointer;
}
.menu .content{
background-color: white;
}
</style> <div class="menu">
<div class="item">
<div class="title" onclick="Show(this);">菜单一</div>
<div class="content">
<ul>
<li>内容1</li>
<li>内容1</li>
<li>内容1</li>
</ul>
</div>
</div>
<div class="item">
<!--arg.下一个标签nex-->
<div class="title" onclick="Show(this);">菜单二</div>
<div class="content hide">
<ul>
<li>内容2</li>
<li>内容2</li>
<li>内容2</li>
</ul>
</div>
</div>
<div class="item">
<div class="title" onclick="Show(this);">菜单三</div>
<div class="content hide">
<ul>
<li>内容3</li>
<li>内容3</li>
<li>内容3</li>
</ul>
</div>
</div>
<div class="item">
<div class="title" onclick="Show(this);">菜单四</div>
<div class="content hide">
<ul>
<li>内容4</li>
<li>内容4</li>
<li>内容4</li>
</ul>
</div>
</div>
</div>
<script>
function Show(arg) {
var father=arg.parentElement;
console.log(father);
var sons=father.parentElement.children;
// 获取父标签的父标签下的所有子标签，也就是点击的标签的爸爸和爸爸的兄弟们 所有的item
for(var i=0;i<sons.length;i++){ var current_ele=sons[i];
console.log(current_ele);
// 给所有兄弟们添加上hide（隐藏）
current_ele.children[1].classList.add('hide');
}
// 然后给当前点击的这个取消隐藏
arg.nextElementSibling.classList.remove('hide');
}
</script>
</body>
</html>
点击菜单二
4、隐藏菜单内容
和第三个差不多，复杂了点，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
list-style: none;
padding: 0;
margin: 0;
}
ul li{
float: left;
background-color: #2459a2;
color: white;
padding: 8px 10px;
}
.clearfix:after{
display: block;
content: '.';
height: 0;
visibility: hidden;
clear: both;
}
.hide{
display: none;
}
.tab-menu .title{
background-color: #dddddd;
}
.tab-menu .title .active{
background-color: white;
color: black;
}
.tab-menu .content{
border: 1px solid #dddddd;
min-height: 150px;
}
</style> </head>
<body>
<div class="tab-menu">
<div class="title clearfix">
<ul>
<li target="1" class="active" onclick="show(this);">价格趋势</li>
<li target="2" onclick="show(this);">市场分布</li>
<li target="3" onclick="show(this);">其他</li>
</ul>
</div>
<div id="content" class="content">
<div con="1">content1</div>
<div con="2" class="hide">content2</div>
<div con="3" class="hide">content3</div>
</div>
</div>
<script>
function show(arg) {
borther=arg.parentElement.children;
// 获取所有头部
for(var i=0;i<borther.length;i++){
borther[i].classList.remove('active');
// 先去除掉所有头部的 active
}
var can=arg.getAttribute('target');
// 获取点击头部的target的值 以便寻找对应的content
arg.className='active';
// 设置点击的头部class为active
contens=document.getElementById('content').children;
// 获取并遍历所有content
for(var j=0;j<contens.length;j++){
if(contens[j].getAttribute('con')==can){
// 如果content的con属性的值和点击头部target的值一样 就去掉hide
contens[j].classList.remove('hide')
}else{
// 给其他的content加上hide隐藏
contens[j].classList.add('hide')
}
}
}
</script>
</body>
</html>
点击“市场分布”
5、页面滚动条下拉后自动出现返回顶部按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
height: 2000px;
}
.gotop{
position: fixed;
right: 30px;
bottom:30px;
background: blue;
width: 50px;
height: 50px;
color: white;
}
.hide{
display: none;
}
.hover{
position: absolute;
top:0;
left:0;
right: 0;
bottom: 0;
background-color:green;
visibility: hidden;
color: white;
}
.gotop:hover .hover{
visibility:visible;
}
</style>
</head>
<body onscroll="show();">
<div class="content">Mr大龙</div>
<div class="gotop hide">
<div class="hover ">TOP</div><a>返回顶部</a></div>
<script>
function show() {
if(document.body.scrollTop>50){
// 显示出来放回顶部按钮
document.getElementsByClassName('gotop')[0].classList.remove('hide')
}else{
// 如果小于50则隐藏
document.getElementsByClassName('gotop')[0].classList.add('hide')
}
}
function Gotop() {
document.body.scrollTop=0;
// 使滚动条到最顶端
}
</script>
</body>
</html>
下拉超过50像素之后 出现返回顶部按钮
鼠标移动上去变绿色TOP，点击就会返回顶部
6、插入标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="text">
<input type="button" value="提交" onclick="add(this);">
<ul id="ii">
<li>dalong</li>
<li>shenwenlong</li>
<li>wenlong</li>
</ul>
<script>
function add(arg) {
cc=arg.previousElementSibling.value;
// 获取驶入的值，并清空输入框，方便下次输入
arg.previousElementSibling.value='';
var commentList=document.getElementById('ii');
// 找到相对于哪个标签插入
tag=document.createElement('li');
// 创建一个标签（对象），标签里的文本是输入框的值
tag.innerText=cc;
// 又创建了一个标签
aa=document.createElement('a');
aa.href='http://www.cnblogs.com/shenwenlong/';
aa.innerText='Mr大龙';
// 如果非自闭和标签，我们可以继续插入一个标签
tag.appendChild(aa);
// commentList.appendChild(tag);
// 插入标签在第一个子标签之后
commentList.insertBefore(tag,commentList.children[1]);
}
</script>
</div>
</body>
</html>
默认打开页面
插入一个标签
7、克隆标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2 id="h1">Mr<span>大</span><a>龙</a></h2>
<div id="container">
<div class="item">1</div>
<div class="item">2</div>
</div>
<script>
var h=document.getElementById('h1');
var c=document.getElementById('container');
// 获取标签
var newH=h.cloneNode(true);
// 克隆一个标签，如果cloneNode为true会同时克隆后代标签，为false只克隆该标签
c.appendChild(newH);
// 插入克隆的标签
</script>
</body>
</html>
如图，上边的<h>标签是原生的，下边的是克隆后插入的
8、 自动变换菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: ;
background-color: #dddddd;
}
.w{
margin: auto;
width: 980px;
}
.pg-header{
background-color: black;
color: white;
height: 48px;
}
.pg-body .menu{
position: absolute;
left: 200px;
width: 180px;
background-color: white;
float: left;
}
.pg-body .menu .active{
background-color: #425a66;
color: white; }
.pg-body .fixed{
position: fixed;
top: 10px;
}
.pg-body .content{
position: absolute;
left: 385px;
right: 200px;
background-color: white;
float: left;
}
.pg-body .content .item{
height: 900px;
}
</style>
</head>
<body onscroll="Hua();">
<div class="pg-header">
<div class="w"> </div>
</div>
<div class="pg-body">
<div id="menu" class="menu">
<ul>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</ul>
</div>
<div id="content" class="content">
<div class="item">床前明月管</div>
<div class="item">疑是地上霜</div>
<div class="item" style="height: 100px">我是郭德纲</div>
</div> </div> <script>
function Hua() {
var top = document.body.scrollTop;
if (top > ) {
// 如果滚动条下滑超过48像素，就固定菜单栏
menu = document.getElementById('menu');
menu.classList.add('fixed')
} else {
menu.classList.remove('fixed')
}
var items = document.getElementById('content').children;
for (var i = ; i < items.length; i++) {
var currentItem = items[i];
// 获取所有内容
var currentItemBodyTOP = currentItem.offsetTop + currentItem.offsetParent.offsetTop;
// 自己距离伤一个定位标签的高度。这里指的也就是自己到'content'div距离+'content'div到窗口顶部的距离=自己距离文档顶端的距离
var currentItemWindowTOP = currentItemBodyTOP - top;
// 自己距离窗口顶端的距离-已滚动的高度=现在自己在窗口已显示出来的高度
var currentHeight = currentItem.offsetHeight;
// 自身的高度，也就是div本身的高度
var currentItemBottomTOP = currentHeight + currentItemBodyTOP;
// 自身的高度+自己距离窗口顶端的距离=自己底部距离文档顶部的高度
// console.log(document.getElementById('content').offsetHeight,top,sheng);
var sheng = document.getElementById('content').offsetHeight - top;
// 如果文档高度-滚动条下拉高度-窗口高度剩下的小于5像素，也就是滚动条到底部，5是上下保留误差，就让最后一个菜单显示
if (sheng - document.documentElement.clientHeight < ) {
document.getElementsByClassName('active')[].className='';
document.getElementById('menu').children[].lastElementChild.className='active';
return
} else {
// li[i].className='active';
// }
// console.log(currentItemWindowTOP,currentItemBottomTOP);
if (currentItemWindowTOP < && currentItemBottomTOP > top) {
// 如果自己在窗口显示的高度小于0 and 自己底部距离文档顶部的高度大于已滚动的高度 就改变对应的菜单栏
// 也就是说自己还在窗口显示的时候
li = menu.getElementsByTagName('li');
// 获取所有的菜单
// console.log(li[i]);
for (var j = ; j < li.length; j++) {
li[j].classList.remove('active');
// 把所有菜单的active去掉，
// console.log(li[j])
}
// 然后给自己对应的菜单加上active，然后跳出循环，下边再循环没有必要
li[i].className = 'active';
break
}
}
}
}
</script>
</body>
</html>
滚动超过48px
滚动超过第一个，到达第二个
特殊情况，最后一个高度低，撑不起来一个窗口的高度，拉到底部，最后一个菜单改变
DOM+Javascript一些实例的更多相关文章
- JavaScript 小实例 - 表单输入内容检测，对页面的增删改
JavaScript 小实例 - 表单输入内容检测,对页面的增删改 效果体验地址:https://xpwi.github.io/js/JavaScript01/jsForm.html 功能: 1.向页 ...
- js的dom测试及实例代码
js的dom测试及实例代码 一.总结 一句话总结: 1.需要记得 创建 标签和创建文本节点都是document的活:document.createTextNode("Rockets的姚明&q ...
- 10种JavaScript特效实例让你的网站更吸引人
我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变得更容易些);使用能工作于现有的JavaScript框架下的提前预 ...
- python 解析XML python模块xml.dom解析xml实例代码
分享下python中使用模块xml.dom解析xml文件的实例代码,学习下python解析xml文件的方法. 原文转自:http://www.jbxue.com/article/16587.html ...
- JavaScript小实例：拖拽应用（二）
经常在网站别人的网站的注册页中看到一个拖拽验证的效果,就是它的验证码刚开始不出来,而是有一个拖拽的条,你必须将这个拖拽条拖到底,验证码才出来,说了感觉跟没说一样,你还是不理解,好吧,我给个图你看看: ...
- javascript小实例，拖拽应用（一）
前面我们将了一下拖拽的基本思想,理论是有了,那实践呢,可以运用到什么地方呢?下面就给大家带来一个用拖拽思想写的一个小实例,供大家参考,大致效果看下图: 就是这样一个简单的一个拖拽条,你可以把它理解为滚 ...
- JavaScript图形实例：线段构图
在“JavaScript图形实例:四瓣花型图案”和“JavaScript图形实例:蝴蝶结图案”中,我们绘制图形时,主要采用的方法是先根据给定的曲线参数方程计算出两点坐标,然后将两点用线段连接起来,线段 ...
- JavaScript动画实例：李萨如曲线
在“JavaScript图形实例:阿基米德螺线”和“JavaScript图形实例:曲线方程”中,我们学习了利用曲线的方程绘制曲线的方法.如果想看看曲线是怎样绘制出来的,怎么办呢?编写简单的动画,就可以 ...
- dom&JavaScript&Jquery
目录 dom&JavaScript&Jquery 建节点 添加节点 删除节点: 替换节点: 属性节点 获取值操作 class的操作 指定CSS操作 操作节点 获取input用户输入 操 ...
随机推荐
- bzoj 3997 [TJOI2015]组合数学（DP）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3997 [题意] 给定一个nm的长方形,每次只能使经过格子权值减1,每次只能向右向下,问 ...
- Linux下gcc和g++编译helloworld
linux C(hello world) 1.使用vi/vim进行编写代码并保存为hello_world.c.如下: 1 2 3 4 5 6 /* This is my first C program ...
- Junit3.8
使用Junit的最佳实践:新建一个名为test的source folder,用于存放测试类源代码目标类与测试类应该位于同一个包下面,这样测试类中就不必导入源代码所在的包,因为他们位于同一个包下面 测试 ...
- http协议中的Content-Type
今天对http协议中的Content-Type有所理解了 它的主要功给我的感觉,还是在前台(客户端)给服务器传输数据时,描述这个数据的格式. 比如,我只传一个表单数据,但这个表单中只有文本,没有其它的 ...
- Hadoop port to Jxta P2P Framework
https://www.java.net/forum/topic/jxta/jxta-community-forum/hadoop-port-jxta-p2p-framework —————————— ...
- Linux下文件的压缩与打包
一.Linux下常见的文件压缩命令: 在Linux的环境中,压缩文件的扩展名大多是:『*.tar, *.tar.gz, *.tgz, *.gz, *.Z, *.bz2』,为什么会有这样的扩展名呢? 这 ...
- codeforces 624A Save Luke（水题）
A. Save Luke time limit per test 1 second memory limit per test 256 megabytes input standard input o ...
- 使用truss、strace或ltrace诊断软件的“疑难杂症”
简介 进程无法启动,软件运行速度突然变慢,程序的"Segment Fault"等等都是让每个Unix系统用户头痛的问题,本文通过三个实际案例演示如何使用truss.strace和l ...
- Mysql创建、删除用户
1.新建用户 //登录MYSQL@>mysql -u root -p@>密码//创建用户mysql> insert into mysql.user(Host,User,Passwor ...
- jeecms支持的freemaker标签大全
<@e.form id="jvForm" action="o_add.do"> <@e.text label="字段名" ...