Dom操作的常用案例实现
本文介绍几个Dom操作的几个常用的案例。虽然现在各种web框架层出不穷，也很方便。但是了解最基本的实现方法对我们开发还是有很大的帮助的：
1.图片滚动案例
1.1 效果如下：
1.2 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.wrap{
width:300px;
height:335px;
border:3px solid #b0b0b0;
position: relative;
overflow: hidden;
margin:100px auto;
} img{
position: absolute;
top: 0;
left:22px;
} /*两个span一个在div的左一个在div的右*/
.wrap .left{
height:100%;
width:150px;
position: absolute;
left:0;
} .wrap .right{
height:100%;
width:150px;
position: absolute;
right:0; } </style> </head>
<body>
<div class="wrap" id="box">
<img src="2.jpg" id="naruto">
<span class="left" id="pic_left"></span>
<span class="right" id="pic_right"></span>
</div> <script> var left = document.getElementById('pic_left');
var right = document.getElementById('pic_right');
var img = document.getElementById('naruto'); var count = 0;
var time = null; //鼠标移入的时候动作
left.onmouseover = function () {
time = setInterval(function () {
count -= 2;
count >= -100 ? img.style.left = count + 'px':clearInterval(time);
},30) }; right.onmouseover = function () {
time = setInterval(function () {
count += 2;
count < 0 ? img.style.left = count + 'px':clearInterval(time);
},30) } </script> </body>
</html>
图片滚动
2.选项卡案例
2.1 效果如下：
2.2 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{padding:0;margin:0;} ul{list-style:none;} #tab{
width:480px;
margin-top:55px;
margin-left:auto;
margin-right:auto;
border:2px red solid;
} /*ul下的li的属性*/
ul li{
float: left;
width:160px;
height:60px;
line-height: 60px;
text-align: center;
background-color:grey;
} /*ul下的li里的a的属性*/
ul li a{
text-decoration: none;
color:black;
} /*li的active属性*/
li.active{
background-color: aqua;
} p{
display:none;
height:200px;
text-align: center;
line-height:200px;
background-color: #2b84da;
} p.active{
display:block;
font-size:36px;
} </style> </head>
<body> <div id="tab">
<ul>
<li class="active"><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">图片</a></li>
</ul> <p class="active">首页内容</p>
<p>新闻内容</p>
<p>图片内容</p>
</div> <script>
var tab_li = document.getElementsByTagName('li');
var tab_content = document.getElementsByTagName('p'); for(var i=0;i<tab_li.length;i++){
//保存变量i的临时值
tab_li[i].index = i;
tab_li[i].onclick = function () {
for(var j=0;j<tab_li.length;j++){
tab_li[j].className = '';
tab_content[j].className = '';
}
this.className = 'active';
tab_content[this.index].className = 'active';
}
} </script> </body>
</html>
3.简易留言板
3.1 效果如下：
3.2 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易留言板</title>
<style>
a{
cursor: pointer;
} a:hover{
color:red;
background-color: orange;
}
</style> </head> <body>
<div>
<p>
<h2>简易留言板</h2>
</p>
</div> <!--留言显示的div-->
<div id="box">
</div>
<!--操作区-->
<div>
<textarea id="msg" style="height: 69px;"></textarea>
<input id="words" type="button" value="留言" />
<input id="count" type="button" value="统计" onclick="counter();" />
</div> <script>
//取值
var msg = document.getElementById('msg'); //开始时在显示区创建新的ul
var ul = document.createElement('ul');
var box = document.getElementById('box');
box.appendChild(ul); //点击留言的操作
var words = document.getElementById('words');
//全局变量count
count = 0;
//点击留言的事件~~~~~~~~~~~~~~~~~~~~~~~
words.onclick = function () {
//找到textarea的值
message = msg.value;
// 新建一个li
var li = document.createElement('li');
////往li里添加内容——注意这里是innerHTML！！！
li.innerHTML = msg.value + '<span> <a>X</a></span>'; //判断后加入到ul
var lis = document.getElementsByTagName('li');
if (lis.length === 0) {
ul.appendChild(li);
count++;
}
else {
ul.insertBefore(li, lis[0]);
count++;
}
//输入完毕后将textarea的值设置成空
msg.value = ''; //点击X对a标签进行操作~~~注意要写在“留言”的onclick事件里！
var spans = document.getElementsByTagName('span');
for(var i=0;i<spans.length;i++){
spans[i].onclick = function () {
//this代表spans[i]
ul.removeChild(this.parentNode);
count--;
}
}
}; //计数的函数
function counter() {
alert('一共发布了'+count+'条留言~');
} </script> </body>
</html>
4.点击有惊喜
4.1 效果如下：
4.2 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击有惊喜</title>
<style>
.pla{
background-color: #4331ff;
height:333px;
width:333px;
margin-top: 55px;
margin-left: 40%;
text-align: center;
line-height: 333px;
font-size:33px;
color:white;
}
</style> </head>
<body> <div class="pla">
点击有惊喜！
</div> <script>
var obj = document.getElementsByClassName('pla')[0];
console.log(obj);
var a = 0;
obj.onclick = function () {
a++;
if(a%4===1){
this.style.background = 'green';
this.innerText = '请继续~';
this.style.color = 'black';
}
else if(a%4===2){
this.style.background = 'orange';
this.innerText = '惊喜马上来！';
this.style.color = 'white';
}
else if(a%4===3){
this.style.background = 'white';
this.innerText = '哈哈！逗你玩儿呢！';
this.style.color = 'black';
}
else{
this.style.background = '#4331ff';
this.innerText = '点击有惊喜!';
this.style.color = 'white';
} } </script>
</body> </html>
5.匀速运动
5.1 效果如下：
5.2 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/**{*/
/*padding:0;*/
/*margin:0;*/
/*}*/ .box{
width:100px;
height:100px;
background-color: #2b84da;
position:absolute;
left:0; } </style> </head>
<body>
<input id="btn" type="button" value="动起来" />
<br><br>
<div id="box1" class="box" ></div> <script>
var btn = document.getElementById('btn');
var box = document.getElementById('box1'); var count = 0;
var time = null; btn.onclick = function () {
time = setInterval(function () {
count += 10;
if(count>200){
clearInterval(time);
box.style.display = 'none';
}
//移动靠改变left的值
box.style.left = count + 'px'; },100)
} </script> </body>
</html>
6. 5秒后关闭广告
6.1 效果如下：
6.2 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{padding: 0;margin:0;} img{
height:266px;
width:256px;
position: fixed;
left:0;
top:0;
} ul{
list-style-type:none;
}
</style> </head>
<body> <img src="1.png" id="img">
<ul>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
<li>把标准养成习惯，让习惯符合标准</li>
</ul> <script>
window.onload = function () {
var img = document.getElementById('img'); setTimeout(function () {
img.style.display = 'none';
},3000); } </script> </body>
</html>
7.左侧菜单
7.1 效果如下：
7.2 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> .hide{
display:none;
} .item .header{
height:35px;
background:grey;
color: orange;
line-height: 35px;
} </style> </head>
<body>
<div style="height:48px"></div> <div style="width: 300px;">
<div class="item">
<div id="i1" class="header" onclick="ChangeMenu('i1')">菜单一</div>
<div class="content">
<div>内容一</div>
<div>内容二</div>
<div>内容三</div>
</div>
</div>
<div class="item">
<div id="i2" class="header" onclick="ChangeMenu('i2')">菜单2</div>
<div class="content hide">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
</div>
<div class="item">
<div id="i3" class="header" onclick="ChangeMenu('i3')">菜单3</div>
<div class="content hide">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
</div>
</div> <script>
function ChangeMenu(nid) {
var current_header = document.getElementById(nid);
var item_list = current_header.parentElement.parentElement.children;
for(var i=0;i<item_list.length;i++){
current_item = item_list[i];
current_item.children[1].classList.add('hide');
}
//当前的兄弟的下一个div去掉hide
current_header.nextElementSibling.classList.remove('hide');
} </script> </body>
</html>
8. 全选反选取消操作的Dom实现
8.1 效果如下：
8.2 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body style="margin: 0 auto">
<div >
<input type="button" value="添加" >
<input type="button" value="全选" onclick="selectall()">
<input type="button" value="反选" onclick="non_select()">
<input type="button" value="取消" onclick="cancle()">
<table>
<thead>
<tr>
<th>选择</th>
<th>主机名</th>
<th>端口</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>190</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.2</td>
<td>191</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.3</td>
<td>192</td>
</tr>
</tbody>
</table>
</div> <script>
function selectall() {
var tbody = document.getElementById("tb");
//获取所有的tr
var tr_list = tbody.children;
for (var i=0;i<tr_list.length;i++){
//循环所有tr找到当前tr
var current_tr = tr_list[i];
//找到tr的第一个孩子的第一个孩子，就是checkbox的input
var checkbox = current_tr.children[0].children[0];
checkbox.checked = true;
} } function cancle() {
var tbody = document.getElementById("tb");
var tr_list = tbody.children;
for (var i = 0; i < tr_list.length; i++) {
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0];
checkbox.checked = false;
}
} function non_select() {
var tbody = document.getElementById("tb");
var tr_list = tbody.children;
for(var i=0;i<tr_list.length;i++){
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0];
if(checkbox.checked){
checkbox.checked = false;
}
else {
checkbox.checked = true;
}
} } </script> </body>
</html>
9.模态对话框——这个用的比较多
9.1 效果如下：
9.2 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> .hide{
display: none;
} .c1{
position: fixed;
left:0;
top:0;
right:0;
bottom:0;
background-color: grey;
opacity:0.7;
z-index: 9;
} .c2{
width:500px;
height:400px;
background-color: white;
position: fixed;
left:50%;
top:50%;
margin-left: -250px;
margin-top: -200px;
z-index: 10;
} </style> </head>
<body style="margin: 0 auto">
<div >
<input type="button" value="添加" onclick="show()">
<table>
<thead>
<tr>
<th>选择</th>
<th>主机名</th>
<th>端口</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>190</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.2</td>
<td>191</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.3</td>
<td>192</td>
</tr> </tbody> </table> </div> <!--第二层的遮罩层开始-->
<div id="i1" class="c1 hide"></div>
<!--第二层的遮罩层结束-->
<!--弹出框开始-->
<div id="i2" class="c2 hide">
<p><input type="text"></p>
<p><input type="text"></p>
<p>
<input type="button" value="确定">
<input type="button" value="取消" onclick="hide()"> </p>
</div>
<!--弹出框结束--> <script>
function show() {
document.getElementById("i1").classList.remove('hide');
document.getElementById("i2").classList.remove('hide'); } function hide() {
document.getElementById("i1").classList.add('hide');
document.getElementById("i2").classList.add('hide');
} </script> </body>
</html>
10.Dom获取当前时间
10.1 效果如下：
10.2 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script> setInterval(function () { var date = new Date();
var y = date.getFullYear();
var m = date.getMonth();
var d = date.getDate();
var h = date.getHours();
var min = date.getMinutes();
var s = date.getSeconds();
document.body.innerHTML = '今天是'+ y +'年' + num(m+1)+ '月' + num(d) + '日' + num(h) + ':' + num(min) + ':' + num(s);
},1000); function num(n) {
if(n<10){
return '0' + n;
}
else {
return n;
}
} </script> </body>
</html>
11.输入框案例
11.1 效果如下：
11.2 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/**{padding:0;margin:0;}*/
.w_div{
border:2px orange solid;width:388px;
position: relative;
} #msg{
position: absolute;
left:0;
top:72px;
color:grey;
} </style> </head>
<body>
<div style="border: 2px red solid;width:388px;">
<br>
<label>placeholder方法效果:</label>
<input style="height: 33px;width:196px;" type="text" placeholder="请输入内容~ aa">
<br><br>
</div>
<br><br> <div class="w_div" >
<br>
<label>label与input利用position方法:</label>
<br><br>
<input style="height:33px;width:196px" type="text" id="text" />
<lable for="txt" id="msg">输入~~ aa</lable>
<br><br>
</div> <script>
var text = document.getElementById('text');
var msg = document.getElementById('msg');
//检测用户输入表单的时候
text.oninput = function () {
if(this.value === ''){
msg.style.display = 'block';
}
else
{
msg.style.display = 'none';
}
} </script> </body>
</html>
12.联动框
12.1 效果如下：
12.2 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>联动</title>
</head>
<body>
<select name="" id="province">
<option value="">请选择省份</option>
</select> <select name="" id="city">
<option value="">请选择城市</option>
</select> <script>
data = {"内蒙古":["包头市","呼和浩特市","乌海市","临河市"],"四川省":["成都市","绵阳市"],"河北省":["邯郸市","邢台市"]}; p = document.getElementById('province');
c = document.getElementById('city'); for(var i in data){
optionP = document.createElement('option');
optionP.innerHTML = i;
p.appendChild(optionP);
} p.onchange = function(){
//先清空city的option
c.innerHTML = '';
current_pro = this.value;
//获取省份的option的value的值也可以这么做：
//this.options：所有的option标签；this.selectedIndex：当前选择的标签的索引
//var current_pro = (this.options[this.selectedIndex]).innerText;
city_lst = data[current_pro];
// console.log(city_lst);
//遍历city_lst，重铸city的option
for(var i=0;i<city_lst.length;i++){
optionC = document.createElement('option');
optionC.innerHTML = city_lst[i];
c.appendChild(optionC)
}
} </script>
</body>
</html>
13.计时器
13.1效果如下：
13.2 代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计时器</title>
</head>
<body>
<input type="text" id="time" style="width: 233px;">
<input type="button" id="start" value="start">
<input type="button" id="stop" value="stop"> <script>
text_obj = document.getElementById('time');
start_obj = document.getElementById('start');
stop_obj = document.getElementById('stop'); //设置一个全局变量，接收setInterval计时器对象，方便后面将它clear掉
var s;
//格式化显示格式
function num(n) {
if(n<10){
return '0' + n;
}
else {
return n;
}
}
//开始
start_obj.onclick = function(){
s = setInterval(function () { var date = new Date();
var y = date.getFullYear();
var m = date.getMonth();//0--11,所以实际月份得加1
var d = date.getDate();
var h = date.getHours();
var min = date.getMinutes();
var s = date.getSeconds();
text_obj.value = '今天是'+ y +'年' + num(m+1)+ '月' + num(d) + '日' + num(h) + ':' + num(min) + ':' + num(s);
},1000);
};
//停止
stop_obj.onclick = function(){
clearInterval(s);
} </script>
</body>
</html>
14.文字动态变化
14.1 效果如下：
14.2 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1" style="background-color: aqua">欢迎欢迎莅临指导</div> <script>
function func1() { //根据id获取指定标签的内容，定义局部变量接收
var tag = document.getElementById("i1");
//获取标签内部的字符串
var content = tag.innerText; var f = content.charAt(0);
var l = content.substring(1,content.length); var new_content = l+f;
tag.innerText = new_content; } setInterval('func1()',500) </script> </body>
</html>
Dom操作的常用案例实现的更多相关文章
- python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
- 前端JavaScript(3）-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息
小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...
- python 全栈开发，Day54(关于DOM操作的相关案例，JS中的面向对象，定时器，BOM，client、offset、scroll系列)
04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...
- 认识JQuery，JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作，常用的方法
(一)认识JQuery JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法 JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...
- WebApis中DOM操作的基本案例
1.1. 排他操作 1.1.1 排他思想 如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法: 所有元素全部清除样式(干掉其他人) 给当前元素设置样式 (留下我自己) 注意 ...
- 12-关于DOM操作的相关案例
1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...
- 关于DOM操作的相关案例
1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...
- 12 DOM操作的相关案例
1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...
- JQuery之DOM操作及常用函数
属性操作 attr(name)获取属性值 var imgSrc = $("img").attr("src") attr(name,value)设置属性值 $(& ...
随机推荐
- python argv传递参数
test.pyimport sysprint(sys.argv) python test.py arg1 arg2 arg3 打印["test.py","arg1&quo ...
- 【java编程】Java魔法类：Unsafe应用解析
转载来源:https://tech.meituan.com/2019/02/14/talk-about-java-magic-class-unsafe.html 前言 Unsafe是位于sun.mis ...
- Centos7——selinux配置
临时关闭selinux setenforce 0 永久关闭selinux vi /etc/selinux/config 修改enforcing为disabled 情景一: httpd修改网站文件目录的 ...
- Connecting Elixir Nodes with libcluster, locally and on Kubernetes
转自:https://www.poeticoding.com/connecting-elixir-nodes-with-libcluster-locally-and-on-kubernetes/ Tr ...
- PHP 统计一维数组value同样的元素的个数num，并将其转化为下标为数字，值是value和num的二维数组
近期做一个项目.从数据库查询某个字段得到一个数组key是数字值是channel的一维数组$res,现须要将这个数组变成键是数字值是channel和num(num为同样channel的数量,默觉得0). ...
- S老师 破坏神学习
代码质量不高 就不整理了 发上来留个纪念 表示自己写过了 数据库:MySQL,服务端:PhotonServer 视频:https://pan.baidu.com/s/1i4ROaRr 客户端:http ...
- DevExpress使用方法GridControl总结
1.隐藏最上面的GroupPanel gridView1.OptionsView.ShowGroupPanel=false; 2.得到当前选定记录某字段的值 sValue=Table.Rows[gri ...
- KiCad 如何在原理图添加元件时看到 PCB 封装？
KiCad 如何在原理图添加元件时看到 PCB 封装? 这个功能默认是关闭,评估关闭的原因是因为 PCB 封装很大,而且在前期也没必要详细知道 PCB 封装. 但是有时修改可以看到 PCB 封装会方便 ...
- gitlab 可以上传代码，但是 不能 上传 tag 问题
原因是 puttygen 生成的 公私钥不能用, 换 git 私钥后 ( 默认不能导入到 pageant ),再用 puttygen 转一次就可以了.
- maven 内置变量
${basedir} 项目根目录 ${project.build.directory} 构建目录,缺省为target ${project.build.outputDirectory} 构建过程输出目录 ...