美文网首页
06_JS输入事件、数组、Tab栏切换

06_JS输入事件、数组、Tab栏切换

作者: 对方不想理你并向你抛出一个异常 | 来源:发表于2017-09-10 14:29 被阅读0次

    判断用户输入事件

    • 正常浏览器 : oninput
    • IE6、7、8支持的 ：onpropertychange

    例：仿淘宝输入框

    <html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .search{
            width: 380px;
            margin: 100px auto;
            position: relative;
        }
        .search input{
            width: 350px;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
        }
        .search label{
            position: absolute;
            left: 6px;
            top: 6px;
            color: #999;
            height: 22px;
            line-height: 22px;
            cursor: text;
        }
        .search label i{
            float: left;
            width: 16px;
            height: 21px;
            background: url("images/search.png") no-repeat left;
            margin-right: 3px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            function $(id) {return document.getElementById(id);}
            //onpropertychange是为了兼容IE8以下的浏览器
            $("tb-search").oninput = $("tb-search").onpropertychange = function () {
                if(this.value == ""){
                    $("message").style.display = "block";
                }else{
                    $("message").style.display = "none";
                }
            }
        }
    </script>
</head>
<body>
    <div class="search">
        <input type="text" id="tb-search"/>
        <!--注意for属性的作用-->
        <label for="tb-search" id="message"><i></i>买顶帽子防晒</label>
    </div>
</body>
</html>

    数组 array

    数组是做什么用的？var num = 10; 变量可以用来存储东西 。一个变量里面只能一个值。我们130人，想把我们每个人的人名存储，要用变量需要 130变量。这个时候可以考虑 数组
    　　数组： 就是一个大变量， 它里面可以存储很多的值。

    声明数组

    var arr = [1,3,5,7,9];
    var arr = new Array(1,3,5);

    使用数组
    • 使用的方法: 数组名[索引值];
    • 索引号是从0开始的。
    数组的长度

    数组名.length;

    遍历数组
            var arr = [1,2,3,4,5];
        for(var i = 0;i<arr.length;i++){
            console.log(arr[i]);
        }

    优化写法

            var arr = [1,2,3,4,5];
        var len;
        for(var i = 0,len = arr.length;i<len;i++){
            console.log(arr[i]);
        }

    getElementsByTagName() 得到一个伪数组

    例：隔行变色

    <html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box{
            width: 500px;

        }
        ul,li{
            list-style: none;
        }
        li{
            height: 38px;
            line-height: 38px;
        }
        li span{
            margin: 5px;

        }
        .current{
            background-color: #aaa!important;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var lis = document.getElementsByTagName("li");
            var len;
            for(var i=0 ,len = lis.length;i<len;i++){
                if(i%2 == 0){
                    lis[i].style.backgroundColor = "#eee";
                }else{
                    lis[i].style.backgroundColor = "#fff";
                }
                lis[i].onmouseover = function () {
                    this.className = "current";
                }
                lis[i].onmouseout = function () {
                    this.className = "";
                }
            }
        }
    </script>
</head>
<body>
<div class="box">
    <ul>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
    </ul>
</div>
</body>

    例：全选和反选

    <html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        ul,li{
            list-style: none;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            function $(id){return document.getElementById(id);}
            var btns = $("top").getElementsByTagName("input");
            var checks = $("bottom").getElementsByTagName("input");
//            console.log(btns.length);
            btns[0].onclick = function () {
                for(var i=0;i<checks.length;i++){
                    checks[i].checked =true;
                }
            }
            btns[1].onclick = function () {
                for(var i=0;i<checks.length;i++){
                    checks[i].checked =false;
                }
            }
            btns[2].onclick = function () {
                for(var i=0;i<checks.length;i++){
                    checks[i].checked =!checks[i].checked;
                }
            }
        }
    </script>
</head>
<body>
    <div id="top">
        <input type="button" value="全选"/>
        <input type="button" value="取消"/>
        <input type="button" value="反选"/>
    </div>
    <div id="bottom">
        <ul>
            <li>选项: <input type="checkbox" name=""/></li>
            <li>选项: <input type="checkbox" name=""/></li>
            <li>选项: <input type="checkbox" name=""/></li>
            <li>选项: <input type="checkbox" name=""/></li>
            <li>选项: <input type="checkbox" name=""/></li>
            <li>选项: <input type="checkbox" name=""/></li>
            <li>选项: <input type="checkbox" name=""/></li>
            <li>选项: <input type="checkbox" name=""/></li>
            <li>选项: <input type="checkbox" name=""/></li>
            <li>选项: <input type="checkbox" name=""/></li>
            <li>选项: <input type="checkbox" name=""/></li>
            <li>选项: <input type="checkbox" name=""/></li>
            <li>选项: <input type="checkbox" name=""/></li>
            <li>选项: <input type="checkbox" name=""/></li>
            <li>选项: <input type="checkbox" name=""/></li>
            <li>选项: <input type="checkbox" name=""/></li>
        </ul>
    </div>
</body>
</html>

    js通过封装函数来优化

    
    <script type="text/javascript">
        window.onload = function () {
            function $(id){return document.getElementById(id);}
            var btns = $("top").getElementsByTagName("input");
            var checks = $("bottom").getElementsByTagName("input");
            function all(flag){
                for(var i=0;i<checks.length;i++){
                    checks[i].checked =flag;
                }
            }
            btns[0].onclick = function () {
                all(true);
            }
            btns[1].onclick = function () {
                all(false);
            }
            btns[2].onclick = function () {
                for(var i=0;i<checks.length;i++){
                    checks[i].checked =!checks[i].checked;
                }
            }
        }
    </script>

    排他思想

    排他思想：首先干掉所有人， 剩下自己额外设置

    例：

    <html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        input{
            border: 0 none;
            width: 80px;
            height: 26px;
            background-color: #ccc;
            margin-left: 12px;
            color: #333;
            font-size: 16px;
            font-family: "simsun";
            font-weight: 500;
        }
        .current{
            background: red;
            color: #fff;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var btns = document.getElementsByTagName("input");
            for(var i=0;i<btns.length ;i++){
                btns[i].onclick = function () {
                    //排他思想，先清除所有人的样式
                    for(var j=0;j<btns.length;j++){
                        btns[j].className = "";
                    }
                    this.className = "current";
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" value="排他思想" class="current"/>
    <input type="button" value="排他思想"/>
    <input type="button" value="排他思想"/>
    <input type="button" value="排他思想"/>
    <input type="button" value="排他思想"/>
    <input type="button" value="排他思想"/>
</body>
</html>
    通过自定义属性获取当前索引(基于上面的案例)
            window.onload = function(){
            var btns = document.getElementsByTagName("input");
            for(var i=0;i<btns.length ;i++){
                btns[i].index = i;//给每个button定义一个index属性
                btns[i].onclick = function () {
                    alert(this.index);
                    //排他思想，先清除所有人的样式
                    for(var j=0;j<btns.length;j++){
                        btns[j].className = "";
                    }
                    this.className = "current";
                }
            }
        }

    例：Tab栏切换

    <html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box{
            width: 400px;
            height: 425px;
        }
        .top input{
            margin: 0;
            padding: 0;
            outline-style: none;
            border: 0 none;
            width: 80px;
            height: 25px;
            background-color: #ccc;
            color: #333;
            font-size: 16px;
            font-family: "simsun";
            font-weight: 500;
        }
        .top .current{
            background: red;
            color: #fff;
        }
        .bottom div{
            width: 400px;
            height: 400px;
            background-color: red;
            display: none;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            function $(id) {return document.getElementById(id);}
            var btns = $("top").getElementsByTagName("input");
            var divs = $("bottom").getElementsByTagName("div");
            for(var i=0;i<btns.length;i++){
                btns[i].index = i;
                btns[i].onclick = function () {
                    for(var j = 0;j<btns.length;j++){
                        btns[j].className = "";
                        divs[j].style.display = "none";
                    }
                    this.className = "current";
                    divs[this.index].style.display = "block";
                }
            }
        }
    </script>
</head>
<body>
    <div class="box">
        <div class="top" id="top">
            <input type="button" value="首页" class="current"/><input type="button" value="新闻时事"/><input type="button" value="体育"/><input type="button" value="明星八卦"/><input type="button" value="城市服务"/>
        </div>
        <div class="bottom" id="bottom">
            <div class="div1" style="display: block;">首页</div>
            <div class="div2">新闻时事</div>
            <div class="div3">体育</div>
            <div class="div4">明星八卦</div>
            <div class="div5">城市服务</div>
        </div>
    </div>
</body>
</html>

    优化之后，通过函数封装，多个tab互不影响

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body,ul,li{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        .box{
            width: 500px;
            height: 430px;
            margin: 15px auto;
        }
        .tab-btn{
            width: 500px;
            height: 30px;
        }
        .tab-btn li{
            float: left;
            width: 100px;
            height: 30px;
            line-height: 30px;
            background-color: #ccc;
            color: #333;
            text-align: center;
        }
        .tab-btn .current{
            background-color: red;
            color:#fff;
        }
        .tab-con div{
            width: 500px;
            height: 400px;
            background-color: red;
            display: none;
        }
        .tab-con .show{
            display: block;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            function $(id){return document.getElementById(id);}
            function tab(id){
                var lis = $(id).getElementsByTagName("li");
                var cons = $(id).getElementsByClassName("tab-con")[0].getElementsByTagName("div");
                for(var i=0; i<lis.length; i++){
                    lis[i].index = i;
                    lis[i].onmouseover = function () {
                        for(var j=0; j<lis.length; j++){
                            lis[j].className = "";
                            cons[j].className = "";
                        }
                        this.className = "current";
                        cons[this.index].className = "show";
                    }
                }
            }
            tab("one");//第一个tab栏
            tab("two");//第二个tab栏
        }
    </script>
</head>
<body>
    <div class="box" id="one">
        <div class="tab-btn">
            <ul>
                <li class="current">首页</li>
                <li>新闻时事</li>
                <li>体育</li>
                <li>购物</li>
                <li>游戏</li>
            </ul>
        </div>
        <div class="tab-con">
            <div class="show">首页</div>
            <div>新闻时事</div>
            <div>体育</div>
            <div>购物</div>
            <div>游戏</div>
        </div>
    </div>
    <div class="box" id="two">
        <div class="tab-btn">
            <ul>
                <li class="current">首页</li>
                <li>新闻时事</li>
                <li>体育</li>
                <li>购物</li>
                <li>游戏</li>
            </ul>
        </div>
        <div class="tab-con">
            <div class="show">首页</div>
            <div>新闻时事</div>
            <div>体育</div>
            <div>购物</div>
            <div>游戏</div>
        </div>
    </div>
</body>
</html>

    相关文章

      网友评论

          本文标题：06_JS输入事件、数组、Tab栏切换

          本文链接：https://www.haomeiwen.com/subject/otvmfxtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|06_JS输入事件、数组、Tab栏切换|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！