JS——效果实例：搜索框、表单值、自定义属性

一、关于内容

（一）搜索框

实现效果：框内默认文本，在搜索框被聚焦后消失，在取消聚焦后出现，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>searchBar</title>
    <style>
        .gg{
            color:gray;
        }
        .bb{
            color:black;
        }
    </style>

</head>
<body>
    <div style="background:#115;color:white;">
        <p>实现如下对话框效果：</p>
        <div>效果一：对话框静态时，内部显示“请输入内容”，灰色字体</div>
        <div>效果二：鼠标聚焦至对话框时，清除内部文本内容，字体变黑色</div>
        <div>效果三：鼠标离开对话框时，记录内部文本，并将文本重新设置为“请输入内容”，灰色字体</div>
    </div>
    <div style="margin:10px;background:#922;color:white;">
        <p>实现方式一：placeholder</p>
        <input type="text" placeholder="请输入内容">
        <p>较高级别浏览器，可以直接呈现如上效果，</p>
    </div>
    <div style="background:#816;color:white;">
        <p>实现方式二：代码</p>
        <input type="text" value="请输入内容" class="gg" onfocus="Focu(this);" onblur="Blur(this);">
        <p>下面script中是具体的实现方式</p>
    </div>


    <script>
        function Focu(ths){
            var current_value = ths.value;
            if(current_value == "请输入内容"){
                ths.value = "";
                ths.className = "bb";
            };
        };
        function Blur(ths){
            var current_value = ths.value;
            if(current_value == "请输入内容" || current_value.trim().length == 0){
                ths.value = "请输入内容";
                ths.className = "gg";
            };
        };
    </script>


</body>
</html>

View Code

（二）表单

1、实现效果：用代码操作复选框的选项，勾选或者删除，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>choiceList</title>
</head>
<body>
    <div>复选框</div>
    <div>实现效果：用代码控制复选框的选择和取消</div>
    <div>
        <ul id="t1">
            <li><input type="checkbox" value="1">篮球</li>
            <li><input type="checkbox" value="2">足球</li>
            <li><input type="checkbox" value="3">羽毛球</li>
        </ul>
        <ul id="t2">
            <li><input type="checkbox" value="11">乒乓球</li>
            <li><input type="checkbox" value="22">排球</li>
            <li><input type="checkbox" value="33">桌球</li>
        </ul>
    </div>

    <script>
    //用代码控制复选框的勾选和取消
        var ele = document.getElementById("t1");
        var ele_input = ele.getElementsByTagName("input");
        ele_input[1].checked = true;
        //ele_input[1].checked = false;


    </script>
</body>
</html>

View Code

2、实现效果：text、password、radio、textarea，通过代码提取当前值，并赋新值，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>choiceList</title>
</head>
<body>
    <div>除复选框外的其他表单</div>
    <div>
        <input id="user" type="text" value="用户名" />
        <input id="psw" type="password" value="密码" />
        <textarea id="text_area">说点什么吧。。。</textarea>
        <hr>
        <div id="danxuan">
            <div><input type="radio" name="单选" value="1">男</div>
            <div><input type="radio" name="单选" value="2">女</div>
            <div><input type="radio" name="单选" value="3">不男不女</div>
        </div>
        <hr>
    </div>

    <script>
/*
    //单选框
        var current_node = document.getElementById("danxuan");
        var nodes = current_node.getElementsByTagName("input");

        //赋值，设置默认值
        var danxuan_value = 3;
        nodes[2].checked = true;

        //取值
        for(var i=0;i<nodes.length;i++){
            if(nodes[i].checked == true){
                danxuan_value = nodes[i].value;
                break;
            };
        };
        console.log(danxuan_value);

    //text\password 单标签，通过属性value进行取值、赋值、以及默认值设置，
        var u = document.getElementById("user");
        var p = document.getElementById("psw");
        console.log(u.value);
        console.log(p.value);
        u.value = "name";
        p.value = "keys";

    //textarea 双标签，标签中显示的内容就是值，可以通过value、inner进行取值、赋值，
        var t = document.getElementById("text_area");
        console.log(t.value);

        //通过value赋值，inner不变化
        t.value = "value这里是多行文本输入。。。";
        console.log(t.innerText);   //空
        console.log(t.innerHTML);   //说点什么吧。。。

        //通过inner赋值,value也同样变化
        t.innerText = "inner这里是多行文本输入。。。";
        console.log(t.value);        //inner这里是多行文本输入。。。
        console.log(t.innerHTML);    //inner这里是多行文本输入。。。*/
    </script>
</body>
</html>

View Code

3、实现效果：全选、取消、反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>quanxuan</title>
</head>
<body>
    <input type="button" value="全选" onclick="ChoiceAll();">
    <input type="button" value="取消" onclick="ChoiceNone();">
    <input type="button" value="反选" ondblclick="ChoiceElse();">
    <table>
        <thead>
            <tr>
                <td>序号</td>
                <td>用户名</td>
                <td>年龄</td>
            </tr>
        </thead>
        <tbody id="cbody">
            <tr>
                <td><input class="c1" type="checkbox" value="1"></td>
                <td>lucy</td>
                <td>6</td>
            </tr>
            <tr>
                <td><input class="c1" type="checkbox" value="2"></td>
                <td>lucy</td>
                <td>6</td>
            </tr>
            <tr>
                <td><input  class="c1" type="checkbox" value="3"></td>
                <td>lucy</td>
                <td>6</td>
            </tr>
            <tr>
                <td><input  class="c1" type="checkbox" value="4"></td>
                <td>lucy</td>
                <td>6</td>
            </tr>
        </tbody>
    </table>

    <script>
        function ChoiceAll(){
            var all_nodes = document.getElementById("cbody").getElementsByClassName("c1");
            for(var i=0;i<all_nodes.length;i++){
                var current_node = all_nodes[i];
                current_node.checked = true;
            }
        }
        function ChoiceNone(){
            var all_nodes = document.getElementById("cbody").getElementsByClassName("c1");
            for(var i=0;i<all_nodes.length;i++){
                var current_node = all_nodes[i];
                current_node.checked = false;
            }
        }
        function ChoiceElse(){
            var all_nodes = document.getElementById("cbody").getElementsByClassName("c1");
            for(var i=0;i<all_nodes.length;i++){
                var current_node = all_nodes[i];
                if(current_node.checked){
                    current_node.checked = false;
                }else{
                    current_node.checked = true;
                };
            };
        };

    </script>
</body>
</html>

View Code

4、实现效果：下拉选框通过value取值、赋值，通过selectedIndex选取索引，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xialakuagn</title>
</head>
<body>
    <select id="sel">
        <option value="11">上海</option>
        <option value="22">北京</option>
        <option value="33" selected="selected">合肥</option>
        <option value="44">武汉</option>
    </select>


    <script>
        var sel = document.getElementById("sel");
        //通过value直接取值和赋值
        console.log(sel.value);
        sel.value = "22";
        //通过selectedIndex获取索引
        console.log(sel.selectedIndex);
        sel.selectedIndex = 3;
        console.log(sel.value);
    </script>
</body>
</html>

View Code

二、自定义属性

属性可以进行自定义，常不含有指定样式、用作属性选择器，

1、attributes 获取全部属性；2、getAttribute 获取指定属性的值；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>shuxign</title>
</head>
<body>
    <input type="button" value="点我啊" onclick="Foo();">
    <div id="we">
        <div class="c1">123</div>
        <div class="c3" alex="lucy">123</div>
        <div class="c1" alex="lucy">123</div>
        <div class="c2" alex="lucy">123</div>
        <div class="c1">123</div>
    </div>

    <script>
        function Foo(){
            var nodes = document.getElementById("we");
            var ch = nodes.children;
            for(var i=0;i<ch.length;i++){
                var current_node = ch[i];
                if( current_node.getAttribute("alex") == "lucy"){
                    console.log(current_node);
                    current_node.innerText = 456;
                }else{
                    current_node.setAttribute("alex","dongxuew");
                    console.log(current_node.attributes);

                };
            };
        };
    </script>

</body>
</html>

View Code

3、setAttribute 自定义属性或更改现有属性的值，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>shuxign</title>
    <style>
        .rr{color:red;}
        .bb{color:blue;}
    </style>
</head>
<body>
    <div class="rr" onclick="Foo(this);">点我变色</div>

    <script>
        function Foo(ths){
            ths.setAttribute("class","bb");
        };
    </script>

</body>
</html>

View Code

使用自定义属性，实现tab菜单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>caidan2</title>
    <style>
        .hide{
            display:none;
        }
        .ww{
            margin-top:0;
            border-top:1px solid red;
            border-bottom:1px solid white;
            background-color:white;
        }
        .menu{
            width:400px;
            min-height:300px;
            border:1px solid gray;
        }
        .menu .title{
            height:50px;
            background:gray;
            color:pink;
            font-size:20px;
            line-height:48px;
            margin-top:-1px;
        }
        .menu .title .ff{
            float:left;
            padding:0 30px;
        }

    </style>
</head>
<body>
    <div class="menu">
        <div class="title">
            <div class="ff ww" clk="h1" onclick="Foo(this);">目录</div>
            <div class="ff" clk="h2" onclick="Foo(this);">间接</div>
            <div class="ff" clk="h3" onclick="Foo(this);">哈哈</div>
        </div>
        <div class="content">
            <div clk="h1" >content1</div>
            <div clk="h2" class="hide">content2</div>
            <div clk="h3" class="hide">content3</div>
        </div>
    </div>

    <script>
        function Foo(ths){
            //目录跳转
            var brother = ths.parentElement.children;
            for(var i=0;i<brother.length;i++){
                var current_node = brother[i];
                if(current_node == ths){
                    current_node.classList.add("ww");
                }else{
                    current_node.classList.remove("ww");
                };
            };
            //内容跳转
            var att = ths.getAttribute("clk");
            var cont = document.getElementsByClassName("content");
            var nodes = cont[0].children;
            for(var j=0;j<nodes.length;j++){
                var current_node = nodes[j];
                if(current_node.getAttribute("clk")==att){
                    current_node.classList.remove("hide");
                }else{
                    current_node.classList.add("hide");
                };
            };
        };
    </script>

</body>
</html>

View Code

上面使用div实现，但div本身无语义，使用ul实现菜单更好，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>caidan</title>
    <style>
        ul{
            list-style:none;
            margin:0;
            padding:0;
            margin-top:-1px;
        }
        .hide{
            display:none;
        }
        .clearfix:after{
            content:".";
            clear:both;
            height:0;
            display:block;
            visibility:hidden;
        }
        .ff{
            float:left;
        }
        .ww{
            background:white;
            border-top:1px solid pink;
        }
        .menu{
            width:400px;
            min-height:300px;
            border:1px solid gray;
        }
         .menu-title{
            background:gray;
         }
        .menu-title li{
            margin:0;
            padding:10px;
        }

    </style>
</head>
<body>
    <div class="menu">
        <div class="menu-title clearfix">
            <ul>
                <li class="ff ww" clk="h1" onclick="Foo(this);">目录</li>
                <li class="ff" clk="h2" onclick="Foo(this);">间接</li>
                <li class="ff" clk="h3" onclick="Foo(this);">哈哈</li>
            </ul>
        </div>
        <div class="menu-content">
            <div clk="h1" >content1</div>
            <div clk="h2" class="hide">content2</div>
            <div clk="h3" class="hide">content3</div>
        </div>
    </div>

    <script>
        function Foo(ths){
            //目录跳转
            var brother = ths.parentElement.children;
            for(var i=0;i<brother.length;i++){
                var current_node = brother[i];
                if(current_node == ths){
                    current_node.classList.add("ww");
                }else{
                    current_node.classList.remove("ww");
                };
            };
            //内容跳转
            var att = ths.getAttribute("clk");
            var cont = document.getElementsByClassName("menu-content");
            var nodes = cont[0].children;
            for(var j=0;j<nodes.length;j++){
                var current_node = nodes[j];
                if(current_node.getAttribute("clk")==att){
                    current_node.classList.remove("hide");
                }else{
                    current_node.classList.add("hide");
                };
            };
        };
    </script>

</body>
</html>

View Code

三、style内属性

通过JS对style内属性进行设置和调整时，需要注意的是：类似于background-color需写成backgroundColor，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>charubiaoqian</title>
</head>
<body>
    <div style="color:red;background-color:gray;" onclick="Foo(this);">style级操作：通过代码控制style内属性</div>

    <script>
        function Foo(ths){
            if(ths.style.color=="red"){
                ths.style.color = "blue";
                ths.style.backgroundColor = "yellow";
            }else{
                ths.style.color = "red";
                ths.style.backgroundColor = "gray";
            };
        };

    </script>
</body>
</html>

View Code

发表于 2017-08-15 10:19 笨笨是个名字阅读(460) 评论(0) 收藏举报

刷新页面返回顶部

JS——效果实例：搜索框、表单值、自定义属性

公告

导航