JS学习之DOM案例二

包括如下一些案例：留言板效果，页签分页效果，输入框隐性提示，获取最新时间和广告自动关闭效果。

1>留言板效果

JS学习之DOM案例二

思路：首先有个输入框，提交按钮，这些html搞定，当输入框输入内容，点击提交的时候，这时会触发一些事件：

取到文本框的内容（value属性的值），把内容插入到文本框前面（通过js创建dom元素，文本insertHTML或者

insertText方式插入），并且展示，

    <style type="text/css">
        #area1{
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <h1>1111</h1>

    <div id="box">

    </div>
    <textarea id="area1"></textarea>
    <button id="btn1">提交</button>
    <button id="btn2">统计</button>

</body>
    <script type="text/javascript">

        count = 0;
        var box = document.getElementById('box');   //取div dom对象
        var area = document.getElementById('area1');
        var ul = document.createElement('ul');  //创建ul对象
        box.appendChild(ul);    //div增加子节点ul

        var submit = document.getElementById('btn1');   //取提交按钮dom对象
        submit.onclick=function(){

            var li = document.createElement('li');  // 点击事件，新增li标签
            var lis=document.getElementsByTagName('li');
            if(lis.length==0){
                ul.appendChild(li); //  若当前页面没li，直接新增子节点li
                count++;
            }else{
                ul.insertBefore(li, lis[0]);    //若当前页面有，就插在第一个节点（从上往下）前面
                count++;
            }
            li.innerHTML = area.value + '<span>&nbsp;&nbsp;&nbsp;&nbsp;X</span>';   //节点li的文本，输入框内容及一个X
            area.value = '';    // 清空文本框
            };
        var del_record = document.getElementsByTagName('span'); //取到X的span标签，增加点击触发删除事件

        for (i = 0; i < del_record.length; i++) {
            del_record[i].onclick = function () {   //遍历span标签，每个点击事件都是删除自身的父节点（对应的li）
                ul.removeChild(this.parentNode);
                count--;
            }
        }

        var sum = document.getElementById('btn2');  //统计按钮，变量基于各操作自增或自减

        sum.onclick = function(){
            alert(count)
            }

    </script>

2>页签分页效果

JS学习之DOM案例二

    <style type="text/css">
      *{
         padding: 0;
         margin: 0;
      }
      ul{list-style: none;}
      #tab{
         width: 480px;
         margin: 20px auto;
         border: 1px solid black;
      }
      ul li{
         float: left;
         width: 160px;
         height: 60px;
         line-height: 60px;
         text-align: center;
         background-color: #cccccc;
      }

      ul li a{
         text-decoration: none;
         color:black;
      }
      li.active{
         background-color: #FFFFFF;
      }
      p{
         display: none;
         height: 200px;
         text-align: center;
         line-height: 200px;
         background-color: #FFFFFF;
      }
      p.active{
         display: block;

      }
      
   </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>
</body>
<script type="text/javascript">
   
   var tabli = document.getElementsByTagName('li');
   var tabContent = document.getElementsByTagName('p');

       for(i=0; i<tabli.length;i++){
           tabli[i].index  = i;
           tabli[i].onclick = function(){
               for(var j=0; j<tabli.length;j++){
                   tabli[j].className='';
                   tabContent[j].className=''

           }
               this.className='active';
               console.log(this.index);
               tabContent[this.index].className = 'active'
           }
       }

3>搜索框中的提示效果

3.1>效果如下

JS学习之DOM案例二

其实这个可以用两种方式实现，一种是HTML 标签自带的placeholder属性，轻松搞定，还有就是可以

通过js实现，思路：输入框上面增加一层文字，然后通过display的值来控制其是否显示，代码如下

    <style>
        *{margin: 0;padding: 0;}
        div{
            position: relative;
        }
        input{
            margin-top: 20px;
            margin-left: 20px;
            display: block;
            width: 300px;
            height: 30px;
        }
        p{
            position: absolute;
            top: 6px;
            left: 25px;
            font-size: 15px;
            color: #969696;
            display: block;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="text" class="text1" id="input1">   <!--第一个输入框通过js实现方式 -->
        <input type="text" class="text2" placeholder="请输入姓名">   <!--第二个输入框html实现 -->
        <p id="p1">请输入姓名</p>
    </div>
</body>
    <script type="text/javascript">

        var input1 = document.getElementById('input1'); //先获取到要操作的dom
        var p1 = document.getElementById('p1');

        input1.oninput = function () {  //oninput是输入事件，类似onclick点击事件，这里在oninput上写函数
            if(this.value==''){
                p1.style.display = 'block';  //判断当没有输入时，p1显示
            }else{
                p1.style.display = 'none';   //有内容输入时，p1隐藏
            }
        }

    </script>

4>获取最新的时间

JS学习之DOM案例二

  <script type="text/javascript">

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);

      //函数，传入一个值，若小于10，显示0n，否则直接显示n，比如5秒显示成 05
function num(n){
   if (n<10) {
      return "0"+ n;
   }
   return n
}

  </script>

5>自动关闭广告

经常访问网页，左下角还是哪会有这类广告/游戏弹窗，过几秒后自动关闭，通过定时器实现，

JS学习之DOM案例二

    <style>
        div{
            width: 200px;
            height: 400px;
            background-color: #149fde;
            line-height: 400px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="box1">
        这里是广告栏
    </div>

</body>
    <script type="text/javascript">

        window.onload  = function() {
            var box1 = document.getElementById('box1');
            setTimeout(function () {
                        box1.style.display = 'none'
                    }, 5000
            )
        }

注意上面的 window.onload方法

window.onload：加载事件在页面内容加载完成之后立即执行相应的函数

为何这个单次执行的定时器要放在onload事件下，因为要确保页面加载完成，再出发这个setTimeout定时器。

JS学习之DOM案例二

相关推荐