zoukankan      html  css  js  c++  java
  • DOM+Javascript一些实例

    1、内容+遮罩层+悬浮对话框

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         .hide{
     8             display: none;
     9         }
    10         .c1{
    11             background: rgba(0,0,0,.5);
    12             position: fixed;
    13             top:0;
    14             left: 0;
    15             right: 0;
    16             bottom: 0;
    17         }
    18         .c2{
    19             background: white;
    20             width: 400px;
    21             height: 300px;
    22             position: fixed;
    23             top:50%;
    24             left: 50%;
    25             margin-top: -150px;
    26             margin-left: -200px;
    27         }
    28     </style>
    29 </head>
    30 <body>
    31     <input value="fuck me" type="button" onclick="show()">
    32 <div id="zhezhao" class="c1 hide"> </div>
    33 <div id="duihua" class="c2 hide">
    34     <p>用户:<input type="text" value=""></p>
    35     <p>密码:<input type="text" value=""></p>
    36     <input type="button" value="确定">
    37     <input type="button" value="取消" onclick="hide()">
    38 </div>
    39 
    40 <script>
    41     function show() {
    42             document.getElementById('zhezhao').classList.remove('hide');
    43 //        把遮罩层和对话框取消隐藏
    44             document.getElementById('duihua').classList.remove('hide');
    45     }
    46     function hide() {
    47         document.getElementById('zhezhao').classList.add('hide');
    48         //        把遮罩层和对话框隐藏
    49         document.getElementById('duihua').classList.add('hide');
    50     }
    51 </script>
    52 </body>
    53 </html>
    View Code

    点击后

    点击取消按钮恢复原样

    2、搜索框

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         .gg{
     8             color: #7d7d7d;
     9         }
    10         .bb{
    11             color: black;
    12         }
    13     </style>
    14 </head>
    15 <body>
    16     <input value="请输入内容" class="gg" onblur="Blur(this);" onfocus="Focus(this)">
    17 <script>
    18     function Blur(arg) {
    19 //        鼠标离开时
    20         var cc=arg.value;
    21         if(cc=='请输入内容'||cc.trim().length==0){
    22 //            如果内容是原始值或为空时 变成灰色 并且恢复原始值
    23             arg.value='请输入内容';
    24             arg.className='gg';
    25         }
    26     }
    27     function Focus(arg) {
    28         var cc=arg.value;
    29 //        鼠标进去时 改变成白色  如果为初始值就把值变成空
    30         arg.className='bb';
    31         if(arg.value=='请输入内容'){
    32             arg.value='';
    33         }
    34     }
    35 </script>
    36 </body>
    37 </html>
    View Code

    默认样式鼠标点进去

    输入几个字符鼠标再出来

    3、点击菜单出现相应的内容

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8    <style>
     9         ul{
    10             padding: 0;
    11             margin: 0;
    12         }
    13         .hide{
    14             display: none;
    15         }
    16         .menu{
    17             width: 200px;
    18             height: 500px;
    19             background-color: #2459a2;
    20             border: 2px solid #333;
    21         }
    22         .menu .title{
    23             background-color: brown;
    24             cursor: pointer;
    25         }
    26         .menu .content{
    27             background-color: white;
    28         }
    29     </style>
    30 
    31     <div class="menu">
    32         <div class="item">
    33             <div class="title" onclick="Show(this);">菜单一</div>
    34             <div class="content">
    35                 <ul>
    36                     <li>内容1</li>
    37                     <li>内容1</li>
    38                     <li>内容1</li>
    39                 </ul>
    40             </div>
    41         </div>
    42         <div class="item">
    43             <!--arg.下一个标签nex-->
    44             <div class="title" onclick="Show(this);">菜单二</div>
    45             <div class="content hide">
    46                 <ul>
    47                     <li>内容2</li>
    48                     <li>内容2</li>
    49                     <li>内容2</li>
    50                 </ul>
    51             </div>
    52         </div>
    53         <div class="item">
    54             <div class="title" onclick="Show(this);">菜单三</div>
    55             <div class="content hide">
    56                 <ul>
    57                     <li>内容3</li>
    58                     <li>内容3</li>
    59                     <li>内容3</li>
    60                 </ul>
    61             </div>
    62         </div>
    63         <div class="item">
    64             <div class="title" onclick="Show(this);">菜单四</div>
    65             <div class="content hide">
    66                 <ul>
    67                     <li>内容4</li>
    68                     <li>内容4</li>
    69                     <li>内容4</li>
    70                 </ul>
    71             </div>
    72         </div>
    73     </div>
    74 <script>
    75     function Show(arg) {
    76         var father=arg.parentElement;
    77                     console.log(father);
    78         var sons=father.parentElement.children;
    79 //        获取父标签的父标签下的所有子标签,也就是点击的标签的爸爸和爸爸的兄弟们 所有的item
    80         for(var i=0;i<sons.length;i++){
    81 
    82             var current_ele=sons[i];
    83             console.log(current_ele);
    84 //            给所有兄弟们添加上hide(隐藏)
    85             current_ele.children[1].classList.add('hide');
    86         }
    87 //        然后给当前点击的这个取消隐藏
    88         arg.nextElementSibling.classList.remove('hide');
    89     }
    90 </script>
    91 </body>
    92 </html>
    View Code

    点击菜单二

     4、隐藏菜单内容

     和第三个差不多,复杂了点,

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         ul{
     8             list-style: none;
     9             padding: 0;
    10             margin: 0;
    11         }
    12         ul li{
    13             float: left;
    14             background-color: #2459a2;
    15             color: white;
    16             padding: 8px 10px;
    17         }
    18         .clearfix:after{
    19             display: block;
    20             content: '.';
    21             height: 0;
    22             visibility: hidden;
    23             clear: both;
    24         }
    25         .hide{
    26             display: none;
    27         }
    28         .tab-menu .title{
    29             background-color: #dddddd;
    30         }
    31         .tab-menu .title .active{
    32             background-color: white;
    33             color: black;
    34         }
    35         .tab-menu .content{
    36             border: 1px solid #dddddd;
    37             min-height: 150px;
    38         }
    39     </style>
    40 
    41 </head>
    42 <body>
    43 <div class="tab-menu">
    44     <div class="title clearfix">
    45         <ul>
    46             <li target="1" class="active" onclick="show(this);">价格趋势</li>
    47             <li target="2" onclick="show(this);">市场分布</li>
    48             <li target="3" onclick="show(this);">其他</li>
    49         </ul>
    50     </div>
    51     <div id="content" class="content">
    52         <div con="1">content1</div>
    53         <div con="2" class="hide">content2</div>
    54         <div con="3"  class="hide">content3</div>
    55     </div>
    56     </div>
    57 <script>
    58     function show(arg) {
    59         borther=arg.parentElement.children;
    60 //        获取所有头部
    61         for(var i=0;i<borther.length;i++){
    62             borther[i].classList.remove('active');
    63 //            先去除掉所有头部的 active
    64         }
    65         var can=arg.getAttribute('target');
    66 //        获取点击头部的target的值 以便寻找对应的content
    67         arg.className='active';
    68 //        设置点击的头部class为active
    69         contens=document.getElementById('content').children;
    70 //        获取并遍历所有content
    71         for(var j=0;j<contens.length;j++){
    72             if(contens[j].getAttribute('con')==can){
    73 //                如果content的con属性的值和点击头部target的值一样 就去掉hide
    74                 contens[j].classList.remove('hide')
    75             }else{
    76 //                给其他的content加上hide隐藏
    77                 contens[j].classList.add('hide')
    78             }
    79         }
    80     }
    81 </script>
    82 </body>
    83 </html>
    View Code

            点击“市场分布”

    5、页面滚动条下拉后自动出现返回顶部按钮

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         .content{
     8             height: 2000px;
     9         }
    10         .gotop{
    11             position: fixed;
    12             right: 30px;
    13             bottom:30px;
    14             background: blue;
    15             width: 50px;
    16             height: 50px;
    17             color: white;
    18         }
    19         .hide{
    20             display: none;
    21         }
    22         .hover{
    23             position: absolute;
    24             top:0;
    25             left:0;
    26             right: 0;
    27             bottom: 0;
    28             background-color:green;
    29             visibility: hidden;
    30             color: white;
    31         }
    32         .gotop:hover .hover{
    33             visibility:visible;
    34         }
    35     </style>
    36 </head>
    37 <body onscroll="show();">
    38 <div class="content">Mr大龙</div>
    39 <div class="gotop hide">
    40     <div class="hover ">TOP</div><a>返回顶部</a></div>
    41 <script>
    42     function show() {
    43         if(document.body.scrollTop>50){
    44             //            显示出来放回顶部按钮
    45             document.getElementsByClassName('gotop')[0].classList.remove('hide')
    46         }else{
    47             //            如果小于50则隐藏
    48             document.getElementsByClassName('gotop')[0].classList.add('hide')
    49         }
    50     }
    51     function Gotop() {
    52         document.body.scrollTop=0;
    53 //        使滚动条到最顶端
    54     }
    55 </script>
    56 </body>
    57 </html>
    View Code

    下拉超过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>
    View Code

    默认打开页面

    插入一个标签

     7、克隆标签

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8 <h2 id="h1">Mr<span></span><a></a></h2>
     9 <div id="container">
    10     <div class="item">1</div>
    11     <div class="item">2</div>
    12 </div>
    13 <script>
    14     var h=document.getElementById('h1');
    15     var c=document.getElementById('container');
    16 //    获取标签
    17     var newH=h.cloneNode(true);
    18 //    克隆一个标签,如果cloneNode为true会同时克隆后代标签,为false只克隆该标签
    19     c.appendChild(newH);
    20 //    插入克隆的标签
    21 </script>
    22 </body>
    23 </html>
    View Code

    如图,上边的<h>标签是原生的,下边的是克隆后插入的

    8、 自动变换菜单

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4     <meta charset="UTF-8">
      5     <title>Title</title>
      6     <style>
      7         body{
      8             margin: 0;
      9             background-color: #dddddd;
     10         }
     11         .w{
     12             margin: 0 auto;
     13              980px;
     14         }
     15         .pg-header{
     16             background-color: black;
     17             color: white;
     18             height: 48px;
     19         }
     20         .pg-body .menu{
     21             position: absolute;
     22             left: 200px;
     23              180px;
     24             background-color: white;
     25             float: left;
     26         }
     27         .pg-body .menu .active{
     28             background-color: #425a66;
     29             color: white;
     30 
     31         }
     32         .pg-body .fixed{
     33             position: fixed;
     34             top: 10px;
     35         }
     36         .pg-body .content{
     37             position: absolute;
     38             left: 385px;
     39             right: 200px;
     40             background-color: white;
     41             float: left;
     42         }
     43         .pg-body .content .item{
     44             height: 900px;
     45         }
     46     </style>
     47 </head>
     48 <body onscroll="Hua();">
     49     <div class="pg-header">
     50         <div class="w">
     51 
     52         </div>
     53     </div>
     54     <div class="pg-body">
     55         <div id="menu" class="menu">
     56             <ul>
     57                 <li>第一章</li>
     58                 <li>第二章</li>
     59                 <li>第三章</li>
     60             </ul>
     61         </div>
     62         <div id="content" class="content">
     63             <div class="item">床前明月管</div>
     64             <div class="item">疑是地上霜</div>
     65             <div class="item" style="height: 100px">我是郭德纲</div>
     66         </div>
     67 
     68     </div>
     69 
     70 <script>
     71     function Hua() {
     72         var top = document.body.scrollTop;
     73         if (top > 48) {
     74 //            如果滚动条下滑超过48像素,就固定菜单栏
     75             menu = document.getElementById('menu');
     76             menu.classList.add('fixed')
     77         } else {
     78             menu.classList.remove('fixed')
     79         }
     80         var items = document.getElementById('content').children;
     81         for (var i = 0; i < items.length; i++) {
     82             var currentItem = items[i];
     83 //            获取所有内容
     84             var currentItemBodyTOP = currentItem.offsetTop + currentItem.offsetParent.offsetTop;
     85 //            自己距离伤一个定位标签的高度。这里指的也就是自己到'content'div距离+'content'div到窗口顶部的距离=自己距离文档顶端的距离
     86             var currentItemWindowTOP = currentItemBodyTOP - top;
     87 //           自己距离窗口顶端的距离-已滚动的高度=现在自己在窗口已显示出来的高度 
     88             var currentHeight = currentItem.offsetHeight;
     89 //            自身的高度,也就是div本身的高度
     90             var currentItemBottomTOP = currentHeight + currentItemBodyTOP;
     91 //            自身的高度+自己距离窗口顶端的距离=自己底部距离文档顶部的高度
     92             //                console.log(document.getElementById('content').offsetHeight,top,sheng);
     93             var sheng = document.getElementById('content').offsetHeight - top;
     94 //   如果文档高度-滚动条下拉高度-窗口高度剩下的小于5像素,也就是滚动条到底部,5是上下保留误差,就让最后一个菜单显示
     95             if (sheng - document.documentElement.clientHeight < 5) {
     96                 document.getElementsByClassName('active')[0].className='';
     97                 document.getElementById('menu').children[0].lastElementChild.className='active';
     98                 return
     99             } else {
    100 //                li[i].className='active';
    101 //                }
    102 //            console.log(currentItemWindowTOP,currentItemBottomTOP);
    103                 if (currentItemWindowTOP < 0 && currentItemBottomTOP > top) {
    104 //           如果自己在窗口显示的高度小于0 and 自己底部距离文档顶部的高度大于已滚动的高度 就改变对应的菜单栏
    105 //          也就是说自己还在窗口显示的时候
    106                     li = menu.getElementsByTagName('li');
    107 //                    获取所有的菜单
    108 //                console.log(li[i]);
    109                     for (var j = 0; j < li.length; j++) {
    110                         li[j].classList.remove('active');
    111 //                        把所有菜单的active去掉,
    112 //                    console.log(li[j])
    113                     }
    114 //                    然后给自己对应的菜单加上active,然后跳出循环,下边再循环没有必要
    115                     li[i].className = 'active';
    116                     break
    117                 }
    118             }
    119         }
    120     }
    121 </script>
    122 </body>
    123 </html>
    View Code

    滚动超过48px

    滚动超过第一个,到达第二个

    特殊情况,最后一个高度低,撑不起来一个窗口的高度,拉到底部,最后一个菜单改变

  • 相关阅读:
    flink(七) 电商用户行为分析(七)订单支付实时监控之订单超时、订单交易匹配
    flink(六) 电商用户行为分析(六)恶意登录监控之连续登陆超时
    flink(五) 电商用户行为分析(五)市场营销商业指标统计分析之市场推广统计、广告点击量统计、 黑名单过滤
    flink(四) 电商用户行为分析(四)实时流量统计(二)网站独立访客数(UV)
    flink(三) 电商用户行为分析(三)实时流量统计(一)热门页面浏览量、网站总浏览量
    flink(二) 电商用户行为分析(二)实时热门商品统计(计算最热门 Top N 商品)
    flink(一) 电商用户行为分析(一)项目整体介绍
    Cause: No supported Ethernet device found + Unknown symbol in module
    vfio_enable_intx
    dpdk disable 收发 interrupt + l3fwd-power
  • 原文地址:https://www.cnblogs.com/shenwenlong/p/5661853.html
Copyright © 2011-2022 走看看