JS中Dom操作的常用案例实现
Posted 江湖乄夜雨
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS中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++; } 前端开发中最常用的JS代码片段