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用户输入 操 ...
随机推荐
- [算法] 快速排序 Quick Sort
快速排序(Quick Sort)使用分治法策略. 它的基本思想是:选择一个基准数,通过一趟排序将要排序的数据分割成独立的两部分:其中一部分的所有数据都比另外一部分的所有数据都要小.然后,再按此方法对这 ...
- JavaEE5 Tutorial_Servlet
Web资源:web组件,静态web文件如图片 Web程序:可发布的Web资源集合 Web程序根目录下有个web-inf文件夹,如果只有jsp和静态资源,里面可以没有web.xml 根目录下可以直接 ...
- leetcode@ [336] Palindrome Pairs (HashMap)
https://leetcode.com/problems/palindrome-pairs/ Given a list of unique words. Find all pairs of dist ...
- Codeforces Round #372 (Div. 1) B. Complete The Graph （枚举+最短路）
题目就是给你一个图,图中部分边没有赋权值,要求你把无权的边赋值,使得s->t的最短路为l. 卡了几周的题了,最后还是经群主大大指点……做出来的…… 思路就是跑最短路,然后改权值为最短路和L的差值 ...
- UVALive 7276 Wooden Signs （DP）
Wooden Signs 题目链接: http://acm.hust.edu.cn/vjudge/contest/127406#problem/E Description http://7xjob4. ...
- uc/os学习入门：在32位pc机上搭建编译环境
由于学习ucos的入门资料中所使用的编译器大多都是Borland c ++ 3.1或者Borland c++4.5,为了降低学习的难度最好所用的编译器与书本上的一致.由于4.5版本稍高,所以最终决定用 ...
- hud 1166 敌兵布阵
http://acm.hdu.edu.cn/showproblem.php?pid=1166 敌兵布阵 Time Limit: 2000/1000 MS (Java/Others) Memory ...
- JAVA 反射应用：properties2Object
MixAll.java import java.lang.reflect.Method; import java.util.Properties; public class MixAll { /** ...
- Spring Data JPA教程, 第八部分:Adding Functionality to a Repository （未翻译）
The previous part of my tutorial described how you can paginate query results with Spring Data JPA. ...
- ajax 源生，jquery封装 例子 相同哈哈
http://hi.baidu.com/7636553/item/bbcf5fc93c8c950aac092f22 ajax使用回调函数的例子(原生代码和jquery代码) 一. ajax代码存在的问 ...