1.模态框案例

需求：

打开网页时有一个普通的按钮，点击当前按钮显示一个背景图，中心并弹出一个弹出框，点击X的时候会关闭当前的模态框

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             *{
  8.                 padding: 0;
  9.                 margin: 0;
  10.             }
  11.             html,body{
  12.                 height: 100%;
  13.             }
  14.             #box{
  15.                 width: 100%;
  16.                 height: 100%;
  17.                 background: rgba(0,0,0,.3);
  18.             }
  19.             #content{
  20.                 position: relative;
  21.                 top: 150px;
  22.                 width: 400px;
  23.                 height: 200px;
  24.                 line-height: 200px;
  25.                 text-align: center;
  26.                 color: red;
  27.                 background-color: #fff;
  28.                 margin: auto;
  29.             }
  30.             #span1{
  31.                 position: absolute;
  32.                 background-color: red;
  33.                 top: 0;
  34.                 right: 0;
  35.                 width: 30px;
  36.                 height: 30px;
  37.                 line-height: 30px;
  38.                 text-align: center;
  39.                 color: #fff;
  40.  
  41.             }
  42.         </style>
  43.     </head>
  44.     <body>
  45.         <button id="btn">弹出</button>
  46.     </body>
  47.     <script type="text/javascript">
  48.         //获取dom元素 1.获取事件源
  49.         var oBtn = document.getElementById('btn');
  50.         //创建弹出模态框的相关DOM对象
  51.         var oDiv = document.createElement('div');
  52.         var oP = document.createElement('p');
  53.         var oSpan = document.createElement('span');
  54.  
  55.         // 设置属性
  56.         oDiv.id = 'box';
  57.         oP.id = 'content'
  58.         oP.innerHTML = '模态框成功弹出'
  59.         oSpan.innerHTML = 'X';
  60.         oSpan.id = 'span1'
  61.  
  62.         // 追加元素
  63.         oDiv.appendChild(oP);
  64.         oP.appendChild(oSpan);
  65.  
  66.         // 点击弹出按钮 弹出模态框
  67.         oBtn.onclick = function(){
  68.             //动态的添加到body中一个div
  69.             this.parentNode.insertBefore(oDiv,oBtn)
  70.  
  71.         }
  72.         // 点击X 关闭模态框
  73.         oSpan.onclick = function(){
  74.             // 移除oDiv元素
  75.             oDiv.parentNode.removeChild(oDiv)
  76.         }   
  77.  
  78.     </script>
  79. </html>

2.简易留言板

需求：

当在textarea中输入内容，点击留言按钮，会添加到浏览器中

图如下：

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>留言板</title>
  6.         <style type="text/css">
  7.             *{
  8.                 padding: 0;
  9.                 margin: 0;
  10.             }
  11.             .close{
  12.                 display: inline-block;
  13.                 width: 20px;
  14.                 height: 20px;
  15.                 line-height: 20px;
  16.                 text-align: center;
  17.                 cursor: pointer;
  18.                 background-color: rgba(0,0,0,.1);
  19.                 margin-left: 20px;
  20.             }
  21.         </style>
  22.     </head>
  23.     <body>
  24.         <h1>简易留言板</h1>
  25.         <div id="box">
  26.             <!--<ul>
  27.  
  28.             </ul>-->
  29.  
  30.         </div>
  31.         <textarea id="msg"></textarea>
  32.         <input type="button" id="btn" value="留言"/>
  33.         <button onclick="sum()">统计</button>
  34.     </body>
  35.     <script type="text/javascript">
  36.  
  37.         // 0 将ul标签添加到div#box标签中
  38.         var oUl = document.createElement('ul');
  39.         var oBox = document.getElementById('box');
  40.         oBox.appendChild(oUl);
  41.  
  42.         var oBtn = document.getElementById('btn');
  43.         var oMsg = document.getElementById('msg')
  44.         // 控制留言的总数量
  45.         var count = 0;
  46.         oBtn.onclick = function(){
  47.  
  48.             // 点击留言按钮事件操作
  49.             // 1.创建li标签
  50.             var oLi = document.createElement('li');
  51.             //2.设置内容
  52.             oLi.innerHTML = oMsg.value + "<span class='close'>X</span>"
  53.  
  54.             // 3.如果想在插入的第一个li获取的前面继续添加li标签
  55.             //3.1获取li标签
  56.             var olis = document.getElementsByTagName('li');
  57.              //3.2 如果是第一次添加的li标签，则直接添加到ul的后面
  58.             if(olis.length == 0){
  59.                 oUl.appendChild(oLi);
  60.                 count++;
  61.  
  62.             }else{
  63.                 // 3.3 如果不是第一次添加的li标签，则插入到第一个li标签的前面
  64.                 oUl.insertBefore(oLi,olis[0]);
  65.                 count++;
  66.             }
  67.             // 4.添加完成之后 清空textarea的值
  68.             oMsg.value = '';
  69.  
  70.             // 5.点击X的时候删除当前的一条数据
  71.             //5.1先获取所有的X
  72.             var oSpans = document.getElementsByTagName('span');
  73.  
  74.             // 5.2for循环 对所有的X添加点击事件
  75.             for(var i = 0; i< oSpans.length; i++){
  76.                 oSpans[i].onclick  = function(){
  77.                     // 5.3 移除当前的li标签
  78.                     oUl.removeChild(this.parentNode)
  79.                     count--;
  80.                 }
  81.             }
  82.  
  83.         }
  84.  
  85.         function sum(){
  86.             alert('一共发布了'+count+'条留言');
  87.  
  88.         }
  89.     </script>
  90. </html>

3.使用js模拟选择器中hover

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         button {
  8.             margin: 10px;
  9.             width: 100px;
  10.             height: 40px;
  11.             cursor: pointer;
  12.         }
  13.         .current {
  14.             background-color: red;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19. <button>按钮1</button>
  20. <button>按钮2</button>
  21. <button>按钮3</button>
  22. <button>按钮4</button>
  23. <button>按钮5</button>
  24.  
  25. <script>
  26.     //需求：鼠标放到哪个button上，改button变成黄色背景（添加类）
  27.  
  28.     var btnArr = document.getElementsByTagName("button");
  29.     //绑定事件
  30.     for(var i=0;i<btnArr.length;i++){   //要为每一个按钮绑定事件，所以用到了for循环
  31.         btnArr[i].onmouseover = function () {
  32.             //【重要】排他思想：先把所有按钮的className设置为空，然后把我（this）这个按钮的className设置为current
  33.             //排他思想和for循环连用
  34.             for(var j=0;j<btnArr.length;j++){
  35.                 btnArr[j].className = "";
  36.             }
  37.             this.className = "current";  //【重要】核心代码
  38.         }
  39.     }
  40.  
  41.     //鼠标离开current时，还原背景色
  42.     for(var i=0;i<btnArr.length;i++){   //要为每一个按钮绑定事件，所以用到了for循环
  43.         btnArr[i].onmouseout = function () { //鼠标离开任何一个按钮时，就把按钮的背景色还原
  44.             this.className = "";
  45.         }
  46.     }
  47.  
  48. </script>
  49.  
  50. </body>
  51.  
  52. </html>

代码解释：

鼠标悬停时，current栏变色，这里用到了排他思想：先把所有按钮的className设置为空，然后把我(this)这个按钮的className设置为current，就可以达到变色的效果。核心代码是：

  1.             //排他思想：先把所有按钮的className设置为空，然后把我（this）这个按钮的className设置为current
  2.             //排他思想和for循环连用
  3.             for(var j=0;j<btnArr.length;j++){
  4.                 btnArr[j].className = "";
  5.             }
  6.             this.className = "current";

4.tab栏选项卡

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             *{
  8.                 padding: 0;
  9.                 margin: 0;
  10.             }
  11.             ul{
  12.                 list-style: none;
  13.             }
  14.             #tab{
  15.                 width: 480px;
  16.                 margin: 20px auto;
  17.                 border: 1px solid red;
  18.             }
  19.             ul{
  20.                 width: 100%;
  21.                 overflow: hidden;
  22.             }
  23.             ul li{
  24.                 float: left;
  25.                 width: 160px;
  26.                 height: 60px;
  27.                 line-height: 60px;
  28.                 text-align: center;
  29.                 background-color: #cccccc;
  30.             }
  31.  
  32.             ul li a{
  33.                 text-decoration: none;
  34.                 color:black;
  35.             }
  36.             li.active{
  37.                 background-color: red;
  38.             }
  39.             p{
  40.                 display: none;
  41.                 height: 200px;
  42.                 text-align: center;
  43.                 line-height: 200px;
  44.                 background-color: red;
  45.             }
  46.             p.active{
  47.                 display: block;
  48.  
  49.             }
  50.  
  51.         </style>
  52.     </head>
  53.     <body>
  54.         <div id="tab">
  55.             <ul>
  56.                 <li class="active">
  57.                     <a href="#">首页</a>
  58.                 </li>
  59.                 <li>
  60.                     <a href="#">新闻</a>
  61.                 </li>
  62.                 <li>
  63.                     <a href="#">图片</a>
  64.                 </li>
  65.             </ul>
  66.             <p class="active">首页内容</p>
  67.             <p>新闻内容</p>
  68.             <p>图片内容</p>
  69.  
  70.         </div>
  71.     </body>
  72.     <script type="text/javascript">
  73.         window.onload = function(){
  74.             // //需求：鼠标放到上面的li上，li本身变色(添加类)，对应的p也显示出来(添加类);
  75.                     //思路：1.点亮上面的盒子。   2.利用索引值显示下面的盒子。
  76.  
  77.             var tabli = document.getElementsByTagName('li');
  78.             var tabContent = document.getElementsByTagName('p')
  79.  
  80.             for(var i = 0; i < tabli.length; i++){
  81.                 // 绑定索引值（新增一个自定义属性：index属性）
  82.                 tabli[i].index  = i;
  83.                 tabli[i].onclick = function(){
  84.  
  85.                     // 1.点亮上面的盒子。   2.利用索引值显示下面的盒子。(排他思想)
  86.                     for(var j = 0; j < tabli.length; j++){
  87.                         tabli[j].className = '';
  88.                         tabContent[j].className = '';
  89.                     }
  90.                     this.className = 'active'
  91.  
  92.                     tabContent[this.index].className = 'active';//【重要代码】
  93.                 }
  94.         }
  95.         }
  96.  
  97.     </script>
  98. </html>

5、购物车案例

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         *{
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  11.         .box{
  12.             width: 500px;
  13.             height: 400px;
  14.             margin: 100px auto;
  15.             background-color: rgba(255,255,255,0.4);
  16.             position: relative;
  17.  
  18.         }
  19.         .car{
  20.             width: 150px;
  21.             height: 30px;
  22.             background-color: #fff;
  23.             padding-left: 30px;
  24.             position: absolute;
  25.             left: 130px;
  26.             top: 3px;
  27.             z-index: 3;
  28.             border: 1px solid green;
  29.  
  30.         }
  31.         .shop{
  32.             width: 310px;
  33.             height: 70px;
  34.             background-color: #fff;
  35.             position: absolute;
  36.             top:33px;
  37.             left: 0;
  38.             display: none;
  39.  
  40.         }
  41.         div.c{
  42.  
  43.             border-bottom-width: 0;
  44.  
  45.         }
  46.         div.t{
  47.             border:  1px solid green;
  48.         }
  49.     </style>
  50. </head>
  51. <body>
  52.     <div class="box">
  53.         <div class="car" id="myCar">我的购物车</div>
  54.         <div class="shop t" id="shop"></div>
  55.     </div>
  56.     <script type="text/javascript">
  57.         var myCar =  document.getElementById('myCar');
  58.         var shop  = document.getElementById('shop');
  59.         myCar.onmouseover = function(){
  60.             shop.style.display = 'block';
  61.             myCar.className +=' c';
  62.         }
  63.         myCar.onmouseout = function(){
  64.             shop.style.display = 'none';
  65.             myCar.removeAttribute('class');
  66.             myCar.className = 'car';
  67.         }
  68.     </script>
  69. </body>
  70. </html>

关于DOM操作的相关案例的更多相关文章

  1. python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  2. 前端JavaScript(3）-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息

    小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...

  3. python 全栈开发，Day54(关于DOM操作的相关案例，JS中的面向对象，定时器，BOM，client、offset、scroll系列)

    04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...

  4. 12-关于DOM操作的相关案例

    1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...

  5. 12 DOM操作的相关案例

    1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...

  6. Dom操作的常用案例实现

    本文介绍几个Dom操作的几个常用的案例.虽然现在各种web框架层出不穷,也很方便.但是了解最基本的实现方法对我们开发还是有很大的帮助的: 1.图片滚动案例 1.1  效果如下: 1.2  代码如下: ...

  7. WebApis中DOM操作的基本案例

    1.1. 排他操作 1.1.1 排他思想 如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法: 所有元素全部清除样式(干掉其他人) 给当前元素设置样式 (留下我自己) 注意 ...

  8. 前端 ----关于DOM的操作的相关实例

    关于DOM操作的相关案例   1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE ...

  9. 12-DOM相关案例

    12-关于DOM操作的相关案例   1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCT ...

随机推荐

  1. Java 数组中寻找最大子数组

    程序设计思想: 依次将数组划分开,先判断一个元素的单个数组大小,接下来两个,依次上升,最后将所得结果进行比较赋值,输出最大结果. 1 package ketangTest; //张生辉,康治家 201 ...

  2. 将登录代码模块化，然后用add address接口来调用它，success！

    登录模块,单独写成mylogin()方法,保存为modeltry119.py,然后接口的文件只写接口, 在post请求时,引用mylogin()返回的cookies就好了. requests.post ...

  3. fillder抓取APP数据之小程序

    1.下载fillder ,fillder官网:https://www.telerik.com/fiddler 2.安装好后设置fillder: 工具—>选项,打开设置面板.选择HTTPS选项卡. ...

  4. 洛谷月赛2018.8 T1题解(U28036 Nagisa loves Tomoya)

    [题解] 我们设原来的数组为a1,a2,a3..., 那么一次操作之后的数组变为a1+a2,a2+a3,a3+a4..., 两次操作之后数组变为a1+2a2+a3,a2+2a3+a4,a3+2a4+a ...

  5. 在此计算机中仅有部分visual studio2010产品已升级到SP1,只有全部升级,产品才能正常运行

    先说废话: 本人机子刚装系统Win10 专业版 1709 开始安装vs2010的时候中途报错了,有一个什么驱动不兼容,被我给关闭了,继续安装完,然后找不到vs的启动快捷方式,开始里面没有,于是我开始修 ...

  6. 天猫双11红包前端jQuery

    [01]   浏览器支持:IE10+和其他现代浏览器.   效果图:       步骤:   HTML部分:   <div class="opacity" style=&qu ...

  7. 【Codeforces 501C】Misha and Forest

    [链接] 我是链接,点我呀:) [题意] 给你一棵树 但是每个节点只告诉你出度个数 以及所有和它相连的点的异或和. 让你还原这棵树 [题解] 叶子节点的话,他所有节点的异或和就是它那唯一的一个爸爸 因 ...

  8. 洛谷 P3063 [USACO12DEC]牛奶的路由Milk Routing

    P3063 [USACO12DEC]牛奶的路由Milk Routing 题目背景 征求翻译.如果你能提供翻译或者题意简述,请直接发讨论,感谢你的贡献. 题目描述 Farmer John's farm ...

  9. HDFS2.0之简单总结

    新特性 NameNode支持HA 命名空间支持分区(Federation) 支持ViewFS 支持目录快照 支持权限ACL 支持缓存指定的文件 QJM实现名字节点HA (图片来源互联网) 命名空间分区 ...

  10. ubuntu 网络监控 nethogs

    ***网络监控ubuntu自带的 netstat -an 查看当前网络状况 sudo netstat -anp 查看当前网络状况带对应进程号 traceroute 追踪路由 ***我比较喜欢用Neth ...