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用户输入 操 ...
随机推荐
- JAVA与图形界面开发（Applet应用程序、AWT库、Swing）
Applet 1)简单说,Applet就是嵌入到网页中的小程序,Java代码. 2)编写Applet程序,要继承JApplet类,并根据自己需要覆写相关方法(init.start.stop.destr ...
- Orchard源码分析（1）：插件式的支持——模块和主题
在Orchard,模块和主题都是可以插拔式的,在源码处理时,用类型(参考:DefaultExtensionTypes)区分,都没太大的本质区别,以下都称做模块. 插件的支持,实现分以下几步: 搜集模块 ...
- 基于easyui的验证扩展
基于easyui的验证扩展 ##前言 自己做项目也有好几年的时间了,一直没有时间整理自己的代码,趁春节比较闲,把自己以前的代码整理了一篇.这是基于easyui1.2.6的一些验证扩展,2012年就开始 ...
- Node.js中的事件
var util = require("util"); //导入util模块 var events = require("events"); //导入event ...
- linux 系统常用命令
临时性的完全关闭防火墙,可以不重启机器: #/etc/init.d/iptables status ##查看防火墙状态 #/etc/init.d/iptable stop ...
- jvm所占空间的配置
http://www.cnblogs.com/mingforyou/archive/2012/03/03/2378143.html
- curl命令的基本用法
我们知道在linux环境下,可以调用curl下载网页. 但curl有些高级的应用,只需要几行命令行,可能比你写多行php.python.C++的程序要快些. 下面从问题驱动的角度来谈谈curl的用法 ...
- SQLite的37个核心函数
转载:http://www.feiesoft.com/00012/ abs(X) abs(X)返回 X 的绝对值. Abs(X) returns NULL if X is NULL. Abs(X) r ...
- 关于在Eclipse中使用正则表达式替换的一点记录（使用正则表达式的分组）
今天在工作中遇到了点替换的麻烦事,由于数据类进行了变动,具体情况是这样的,需要将下面的代码: player.skillData[i].name 替换为: player.skillData.getSki ...
- MongoDB学习笔记(一) MongoDB介绍及安装
转自:http://database.51cto.com/art/201103/247882.htm http://baike.baidu.com/link?url=b6B3dVSCnQauCX-Ep ...