JavaScript小样式

最新推荐文章于 2024-07-18 11:48:33 发布

笙箫语陌

最新推荐文章于 2024-07-18 11:48:33 发布

阅读量197

点赞数 1

分类专栏： java_web 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_57437175/article/details/127710548

版权

java_web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. 全选练习

1.1 实现功能

对多选框的操作：全选，全不选，反选，提交

1.2 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选练习</title>
    <script type="text/javascript">
        window.onload = function () {
            /*全选按钮*/
            var checkedAllBtn = document.getElementById("checkedAllBtn");
            checkedAllBtn.onclick = function () {
                //获取四个多选框
                var items = document.getElementsByName("items");

                //遍历多选框
                for(var i = 0;i < items.length;i++){
                    //选中多选框
                    items[i].checked = true;
                }

                checkedAllBox.checked=true;

            };

            /*全不选*/
            var checkedNoBtn = document.getElementById("checkedNoBtn");
            checkedNoBtn.onclick = function () {
               // alert("进来了");
                //1. 获取多选框
                var items = document.getElementsByName("items");

                //2. 遍历多选框
                for(var i = 0;i < items.length;i++){
                    //选中多选框
                    items[i].checked = false;
                }

                checkedAllBox.checked=false;
            };

            /*反选*/
            var checkedEevBtn = document.getElementById("checkedEevBtn");
            checkedEevBtn.onclick = function () {
                //1. 获取多选框
                var items = document.getElementsByName("items");
                checkedAllBox.checked=true;
                //2. 遍历多选框
                for(var i = 0;i < items.length;i++){
                    //选中多选框
                    items[i].checked = !items[i].checked;

                    if(!items[i].checked){
                        checkedAllBox.checked=false;

                    }
                }


                //反选的时候也需要判断4个多选框是否都选中

            };

            /*选中提交按钮后，打印*/
            var sendBtn = document.getElementById("sendBtn");
            sendBtn.onclick = function () {

                //1. 获取多选框
                var items = document.getElementsByName("items");

                //2. 遍历多选框
                for(var i = 0;i < items.length;i++){
                    //选中多选框
                    if(items[i].checked){
                        alert(items[i].value);
                    }
                }
            };

            /*全选/全不选*/
            var checkedAllBox = document.getElementById("checkedAllBox");
            checkedAllBox.onclick = function () {
                //设置多选框的选中状态
                //1. 获取多选框
                var items = document.getElementsByName("items");

                //2. 遍历多选框
                for(var i = 0;i < items.length;i++){
                    //选中多选框

                        items[i].checked = checkedAllBox.checked;

                }

                //将
            };
            /**
             * 如果四个多选框都选中，则checkedAllBox也应该选中
             * 如果四个多选框都没有选中，则checkedAllBox也不应该选中
             * 为四个多选框，分别绑定单击响应函数
             */
            var items = document.getElementsByName("items");
            for(var i = 0;i < items.length;i++){
                items[i].onclick = function(){
                    checkedAllBox.checked=true;

                    for(var j = 0;j < items.length;j++){
                        if(!items[j].checked){
                            checkedAllBox.checked=false;
                            break;
                        }
                    }
                }
            }

        };
    </script>
</head>
<body>
    <form method="post" action="">
        你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全部选

        <br/>
        <input type="checkbox" name="items" value="足球"/>足球
        <input type="checkbox" name="items" value="篮球"/>篮球
        <input type="checkbox" name="items" value="羽毛球"/>羽毛球
        <input type="checkbox" name="items" value="乒乓球"/>乒乓球
        <br/>

        <input type="button" id="checkedAllBtn" value="全 选"/>
        <input type="button" id="checkedNoBtn" value="全不选"/>
        <input type="button" id="checkedEevBtn" value="反选"/>
        <input type="button" id="sendBtn" value="提交"/>
    </form>
</body>
</html>

2. 添加删除标签

2.1 实现功能

可以实现对员工的添加和删除操作

2lh

2.2 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">


        window.onload = function(){

            function delA(){
                /**
                 * 点击超链接之后，删除员工信息
                 */

                    //获取所有的超链接
              //  var allA = document.getElementsByTagName("a");


                //为每一个超链接绑定单击响应函数
                /*for(var i = 0;i < allA.length;i++){
                    allA[i].onclick = function () {*/
                        //点击超链接之后，需要删除超链接所在的那一行
                        //这里我们点击那个超链接this就是谁
                        //获取当前tr
                        var tr = this.parentNode.parentNode;
                        //var name = tr.getElementsByTagName("td")[0].innerHTML;

                        var name = tr.children[0].innerHTML;
                        //删除 之前弹出提示框
                        /**
                         *  confirm("确认删除嘛？");
                         *  需要一个字符串作为参数，该字符串将会作为提示文字实现出来
                         *  如果用户点击确认则返回true，如果用户点击取消则返回false
                         */
                        if( confirm("确认删除"+name+"嘛？")) {
                            //删除tr
                            tr.parentNode.removeChild(tr);
                            /**
                             * 点击超链接之后，超链接会跳转页面，这是查链接的默认行为
                             * 但是此时我们不希望出现默认行为
                             * 取消默认行为；可以通过在响应函数的最后return false;来取消默认行为
                             */
                        }
                        return false;
                    /*};
                }*/
            }


            var allA = document.getElementsByTagName("a");

            for(var i = 0;i < allA.length;i++){
                allA[i].onclick = delA;
                //alert("竟来了");
            }
            /**
             * 添加员工的功能
             * - 点击按钮后，将员工的信息，添加到表格中
             */
            var addEmpButton = document.getElementById("addEmpButton");

            addEmpButton.onclick = function(){
               //获取用户填写的员工信息
                //获取员工的名字
                var name = document.getElementById("empName").value;
                var email = document.getElementById("email").value;
                var salary = document.getElementById("salary").value;
                //alert(name + " " + email + " " + salary);

                /**
                 <tr>
                 <td>Sum</td>
                 <td>Sum@Sum.com</td>
                 <td>5000</td>
                 <td><a href="deleteEmp?id=003">Delete</a></td>
                 </tr>
                */

                //创建一个tr
                var tr = document.createElement("tr");

                //设置tr中的内容
                tr.innerHTML="<td>"+name+"</td>" +
                    "<td>"+email+"</td>"+
                    "<td>"+salary+"</td>"+
                    "<td><a href='javascript:;'>Delete</a> </td>";
                //获取刚刚添加的a元素，并且为其绑定单击响应函数
                var a= tr.getElementsByTagName("a")[0];
                a.onclick = delA;

                //获取table
                var employeeTable = document.getElementById("employeeTable");
                //获取tbody
                var tbody = employeeTable.getElementsByTagName("tbody")[0];
                //alert(tbody);
                //将tr添加到table中
                //tbody.appendChild(tr);

                /**
                 * 不是用这种方式因为会影响性能
                 * @type {string}
                 */
                tbody.appendChild(tr);
                /*tbody.innerHTML += "<tr>"+
                    "<td>"+name+"</td>" +
                    "<td>"+email+"</td>"+
                    "<td>"+salary+"</td>"+
                    "<td><a href='javascript:;'>Delete</a> </td>"
                    +"</tr>";
                var a = tbody.getElementsByTagName("a");
                a.onclick = delA;*/
            }
            //未提交按钮绑定单击响应函数

        };
    </script>
</head>
<body>
<table id="employeeTable">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>&nbsp;</th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>tom@tom.com</td>
        <td>5000</td>
        <td><a href="deleteEmp?id=001">Delete</a></td>
    </tr>
    <tr>
        <td>Sam</td>
        <td>Sam@Sam.com</td>
        <td>5000</td>
        <td><a href="deleteEmp?id=002">Delete</a></td>
    </tr>
    <tr>
        <td>Sum</td>
        <td>Sum@Sum.com</td>
        <td>5000</td>
        <td><a href="deleteEmp?id=003">Delete</a></td>
    </tr>

</table>

<div id="formDiv">
    <h4>添加新员工</h4>
    <table>
        <tr>
            <td class="word">name:</td>
            <td class="inp">
                <input type="text" name="empName" id="empName"/>
            </td>
        </tr>
        <tr>
            <td class="word">email:</td>
            <td class="inp">
                <input type="text" name="email" id="email"/>
            </td>
        </tr>
        <tr>
            <td class="word">salary:</td>
            <td class="inp">
                <input type="text" name="salary" id="salary"/>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button id="addEmpButton">
                    Submit
                </button>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

3. 图片的播放

3.1 实现的功能

可以在网页中一张一张的显示已经上传的图片

3lh

3.2 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }

        #outer{
            width:700px;
            hight:700px;
            margin: 50px auto;
            padding:10px;
            background-color: bisque;
            /*设置文本居中*/
            text-align: center;
        }
    </style>

    <script type="text/javascript">



        window.onload =  function () {


            /*点击按钮切换图片*/

            /*获取两个按钮*/
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");
            var imgArr = ["../img/1.jpg","../img/2.jpg","../img/3.jpg","../img/4.jpg","../img/5.jpg","../img/6.jpg"];
            var img = document.getElementsByTagName("img")[0];
            var index = 0;

            //设置提示文字
            var info = document.getElementById("info");
            info.innerHTML = "一共6张图片，当前第"+(index+1)+"张";
            prev.onclick = function () {
                index--;
                if(index < 0){
                    index = imgArr.length - 1;
                }
                img.src=imgArr[index];

                //当点击按钮之后重新设置消息
                info.innerHTML = "一共6张图片，当前第"+(index+1)+"张";
            };

            next.onclick = function () {

                index++;
                if(index > imgArr.length -1){
                    index = 0;
                }
                img.src=imgArr[index];

                info.innerHTML = "一共6张图片，当前第"+(index+1)+"张";
            };

        };
    </script>
</head>
<body>
    <div id="outer">
        <p id="info">一共五张图片，当前第1张</p>

        <img src="../img/1.jpg" alt="美图" style="width: 500px;height: 400px"/><br/>

        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    </div>
</body>
</html>

4. 捕捉鼠标的坐标

4.1 功能

4lh

4.2 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #areaDiv{
            width:400px;
            height:200px;
            background-color: aqua;
        }
        #showMsg{
            width:400px;
            height:100px;
            border-style: groove;
            border-color: yellow;
        }
    </style>
    <script>
        window.onload = function(){
          /*
          当鼠标在areaDiv中移动的时候，在showMsg中来显示鼠标的坐标
           */
            var areaDiv = document.getElementById("areaDiv");
            var showMsg = document.getElementById("showMsg");

            /**
             * onmousemove 该事件将会在鼠标移动的时候触发
             * - 当事件的响应函数触发的时候，浏览器每次都会将一个事件对象作为实参传递进响应函数
             *    在事件对象中封装了事件相关的一切信息，比如：鼠标阿坐标，键盘那个键被暗笑，鼠标的滚动方向...
             *
             */
            areaDiv.onmousemove = function(e){

                 //在showMsg中显示坐标
                /**
                 * clientX  和clientY可以获取鼠标的水平和垂直坐标
                 * @type {number}
                 */
                var x = e.clientX;
                var y = e.clientY;

                var shwoMag = document.getElementById("showMsg");
                shwoMag.innerText = "x = " + x + ",y= " + y;
            };
        };
    </script>

</head>
<body>
    <div id="areaDiv"></div>
    <div id="showMsg"></div>
</body>
</html>

5. 滚动条相关事件

5.1 功能

当垂直表单项滚动到低时候，表单项可以使用

5lh

5.2 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #info{
            width:900px;
            height:300px;
            background-color: yellow;
            overflow: auto;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            /**
             * 当垂直表单项滚动到低时候，表单项可以使用
             * onscroll
             * - 该事件会在滚动条滚动的时候触发
             */
            //获取id为info的p元素
            var info = document.getElementById("info");
            //获取表单项
            var inputs = document.getElementsByTagName("input");


            //绑定滚动事件
            info.onscroll = function(){
             //检查滚动条是否滚动到底了
                //parseInt(this.scrollHeight - this.clientHeigh) <= parseInt(this.scrollTop)
                if(parseInt(this.scrollHeight - this.scrollTop) == parseInt(this.clientHeight)){
                    //滚动条滚动到低使表单项可用
                    /*
                    disabled属性客用设置某个元素是否禁使用
                    如果设置为true则元素禁使用
                    如果设置为false则元素禁可用
                     */
                    inputs[0].disabled = false;
                    inputs[1].disabled = false;
                }
            };
        };
    </script>
</head>
<body>
        <h3>欢迎注册</h3>
        <p id="info">
            读<br/>
            读<br/>
            读<br/>
            读<br/>
            读<br/>
            读<br/>
            读<br/>
            读<br/>
            读<br/>
            读<br/>
            读<br/>
            读<br/>
            读<br/>
            读<br/>
            读<br/>
            读<br/>
            读<br/>
        </p>
        <!--如果为表单项添加 disabled="disabled"则表单项是不可以使用的状态-->
        <input type="checkbox" disabled="disabled"/>我一直想要的需要
        <input type="submit" value="注册" disabled="disabled"/>
</body>
</html>

6. 添加超链接

6.1 功能

点击按钮，添加超链接

6lh

6.2 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function(){
            //点击按钮，添加超链接
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function(){
                //创建一个li
                var li = document.createElement("li");
                li.innerHTML = "<a href='javascript:;' class=\"link\">新建的超链接</a>";
                //讲li添加到ul中
                var ul = document.getElementById("ul");
                ul.appendChild(li);
            }
          /*
              为每一个超链接绑定单击响应函数
              这里为每一个超链接都绑定了一个点击响应函数，这种操作比较麻烦，
              而且这些操作只能为已又的超链接设置事件，而新添加的超链接必须重新绑定

              所以这种方式不推荐使用

              为ul绑定单击响应函数
           */
          //获取所有的a
            var ul = document.getElementById("ul");
            ul.onclick = function(ev){
                //如果触发事件的元素是期望的元素，则执行
                /*
                    event中的target表示的是触发事件的对象

                */
                if(ev.target.className == "link"){
                    alert("ul");
                }
            }
            /*var allA = document.getElementsByTagName("a");
            for(var i = 0;i <allA.length;i++){
                allA[i].onclick = function(){
                    //alert("你");
                };
            }*/
        };
    </script>
</head>
<body>
    <button id="btn01">添加超链接</button>
    <ul id="ul">
        <li><a href="javascript:;" class="link">超链接1</a></li>
        <li><a href="javascript:;" class="link">超链接2</a></li>
        <li><a href="javascript:;" class="link">超链接3</a></li>
    </ul>
</body>
</html>

7. 拖拽

7.1 功能

实现div的拖拽功能

7lh

7.2 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #box1{
            width:200px;
            height:200px;
            background-color: aqua;
            position: absolute;
        }
        #box2{
            width:100px;
            height:100px;
            background-color: red;
            position: absolute;

            left:200px;
            top: 200px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            /*
                拖拽box1
                - 拖拽的流程
                    1. 当鼠标在被拖拽的元素按下的时候，开始拖拽onmousedown
                    2. 当鼠标移动的时候，被拖拽的元素跟着鼠标移动onmousemove
                    3. 当鼠标松开时候，被拖拽的元素固定在当前位置onmouseup
             */
            //获取box1
            var box1 = document.getElementById("box1");
            box1.onmousedown = function (event) {
                //div的偏移量鼠标.clientX - 元素.offsetLeft
                //div的偏移量鼠标.clientY - 元素.offsetTop
                var ol = event.clientX - box1.offsetLeft;
                var ot = event.clientY - box1.offsetTop;



               //为document来绑定onmousemove
                //这个事件一定是在点击之后执行的
                document.onmousemove = function (event) {


                    //当鼠标移动的时候拖拽对象
                   var left = event.clientX - ol;
                   var top = event.clientY - ot;

                   //修改box1的位置
                    box1.style.left = left +"px";
                    box1.style.top = top + "px";
                };

                //当鼠标松开时候，被拖拽元素被固定在当前位置
                //注意点1：要注意的是：给document绑定事件，而不是给box1绑定事件
                //不然的话，这个事件会在box2上面点击的时候，失效
                document.onmouseup = function () {
                    //取消onmousemove事件
                    document.onmousemove = null;

                    //取消document.onmousemove事件
                    /*注意点2：所以要将onmouseup得设置为null
                    * 这里有个知识点没讲清，在mousedown事件里嵌套mouseup事件的话,
                    * 等于说按下鼠标之后document就直接绑定了onmouseup事件,
                    * 这个事件可以看作是document的一个常驻状态了
                    * */
                    //alert("鼠标松开了");
                    document.onmouseup = null;
                };

                /*
                    注意3：鼠标一直和元素的左上角重叠，而我们希望点呢，就在呢！
                    解决方案：要莫挪鼠标，要莫挪div
                    但是鼠标只能是用户控制的，我们最好不要控制，我们所能控制的是元素的位置
                 */
                /*
                    注意4： 当你在火狐 ctrl+A的时候，会出现一个bug
                    当我们在拖拽内容时候，浏览器会默认去搜索引擎中搜索内容，这样的话会导致拖拽出现bug
                    这个是浏览器提供的默认行为
                    如果不希望发生这个行为，则可以通过return false;来取消默认行为
                    但是IE8不起作用
                 */
                return false;
            }

        }
    </script>
</head>
<body>
    我还是
    <div id="box1"></div>

    <div id="box2"></div>

</body>
</html>

8. 鼠标控制块的移动

8.1 功能

通过鼠标中的上下左右键来控制块的移动

8lh

8.2 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #box1{
            width:100px;
            height:100px;
            background-color: red;
            position: absolute;
        }
    </style>
    <script type="text/javascript">
        //是div可以根据不同的方向键向不同的方向移动
        window.onload = function () {
            //为document按下键盘绑定事件
            document.onkeydown = function (event) {
                var speed = 10;
                if(event.ctrlKey){
                    speed=50;
                }
                //var box1 = document.getElementById("box1");
                //37 左  38上  39右 40下
                switch (event.keyCode) {
                    case 37:
                        box1.style.left = box1.offsetLeft - speed + "px";
                        break;//left值减少
                    case 38:
                        box1.style.top = box1.offsetTop - speed + "px";
                        break;
                    case 39:
                        box1.style.left = box1.offsetLeft + speed + "px";
                        break;
                    case 40:
                        box1.style.top = box1.offsetTop + speed + "px";
                        break;
                }
            };
        };
    </script>
</head>
<body>
    <div id="box1"></div>
</body>
</html>

9. 定时器的使用

9.1 功能

是用定时器，对一个块进行移动，增添动画效果

9lh

9.2 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin:0;
            padding: 0;
        }
        #box1{
            width:100px;
            height:100px;
            background-color: red;
            position: absolute;
            left: 0;
        }

        #box2{
            width:100px;
            height:100px;
            background-color: yellow;
            position: absolute;
            top:200px;
        }

    </style>
    <script type="text/javascript" src="../js/tools.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            //获取box1
            var box1 = document.getElementById("box1");
            //定义一个变量用来保存定时器的标识
            /**
             * 目前定时器的标识由我们的timer来保存，所有正在执行的定时器，都在这个变量中来保存
             *
             */
            //var timer;
            //获取btn01
            var btn01 = document.getElementById("btn01");
            //点击按钮之后，使得box1向右移动，left值增大
            btn01.onclick = function () {
                //关闭上一个定时器
                clearInterval(box1.timer);
                move(box1,"left",800,10);
            };

            //获取btn02
            var btn02 = document.getElementById("btn02");
            btn02.onclick = function () {
                clearInterval(box1.timer);
                move(box1,"left",0,10);
            };


            //获取btn03
            var btn03 = document.getElementById("btn03");
            var box2 = document.getElementById("box2");
            btn03.onclick = function () {
                clearInterval(box2.timer);
                move(box2,"left",800,10);
            };

            var btn04 = document.getElementById("btn04");
            btn04.onclick = function () {
                //clearInterval(box2.timer);
                move(box2,"width",800,10,function () {
                    move(box2,"height",400,10,function(){
                        move(box2,"top",0,10,function(){
                            move(box2,"width",10,10,function () {

                            });
                        });
                    });
                });
            };

        };
    </script>
</head>
<body>
<button id="btn01">点击按钮之后，box1向右移动</button>
<button id="btn02">点击按钮之后，box1向左移动</button>
<button id="btn03">点击按钮之后，box2向右移动</button>
<button id="btn04">测试</button>

<br/><br/>
<div id="box1"></div>
<div id="box2"></div>

<div style="width: 0;height: 1000px;border-left:1px black solid;position: absolute;left:800px;"></div>
</body>
</html>

10. 定时调用

10.1 功能

实现数字的自增显示

10lh

10.2 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            //获取count
            var count = document.getElementById("count");
            //使count中的内容自动切换
            /**
             * JS的程序的执行速度是十分的快的
             *
             * 如果希望一段程序可以每间隔一段时间执行一次，可以使用定时调用
             */
            /*for(var i = 0;i < 10;i++){
                count.innerHTML = i;

                alert("hello");
            }*/
            /**
             * setInterval()
             *  - 定时器
             *  - 可以讲一个函数每隔一段时间来执行一次
             *  - 参数：
             *      1. 回调函数，该函数会每隔一段时间被调用一次
             *      2. 间隔时间
             *      3.
             *  - 返回值
             *      返回一个B=Number类型的值
             */
            var num = 1;
            var timer = setInterval(function(){
                if(num==11){
                    clearInterval(timer);
                }
                count.innerHTML = num++;
            },1000);
            /**
             * clearInterval()
             *  - 可以用来关闭定时器，方法中需要一个定时器的表示来作为参数，讲关闭表示对应的定时器
             */
        };
    </script>
</head>
<body>
        <h1 id="count">1</h1>
</body>
</html>

11 轮翻图

11.1 功能

正如你所见轮翻图
实现图片的自由播放，以及链接点击

11lh

11.2 代码

/**
 * 定义一个函数，用来获取指定元素的当前的样式
 */
function getStyle(obj,name) {

    return getComputedStyle(obj,null)[name];
};

//尝试创建一个可以执行简单动画的函数
/**
 *参数：
 *      - obj :
 *      - attr : 表示要执行动画的样式，比如：left top width height
 *      - target : 执行动画的目标位置
 *      - speed 标识移动的速度;正数标识向右移动；负数标识向左移动
 *      - callback 将会在动画执行完毕以后执行
 */
function move(obj,attr,target,speed,callback) {

    //关闭上一个定时器
    clearInterval(obj.timer);
    //获取元素目前的位置
    //判断speed的正负值
    //如果是0---800 则speed为正数
    //如果是800---0 则speed为负数
    var current = parseInt(getStyle(obj,attr));
    if(current > target){
        //测试速度应该为负值
        speed = -speed;
    }
    //开启一个定时器，来一个动画效果
    //向执行动画的timer属性中添加一个定时器，用来保存他自己的定时器的标识
    obj.timer =  setInterval(function () {
        //获取box1的原来的left值
        var oldVale = parseInt(getStyle(obj,attr));
        //在旧值的基础上增加
        var newValue = oldVale +speed;

        //当元素移动到800像素时候，使得其定制执行动画
        //从800向0移动
        //当想左移动的时候，需要判断newValue是否小于target
        //当想右移动的时候，需要判断newValue是否小于target
        if(newValue < target && speed < 0 || newValue > target && speed > 0){
            newValue =target;
        }
        //将新值设置给box1
        obj.style[attr] = newValue + "px";
        if(newValue === target){
            //到达目标
            clearInterval(obj.timer);
            //如果我传回到函数了你再执行

            callback() && callback();
        }

    },30);
};

/**
 * 定义一个函数用来想一个元素种添加指定的class属性值
 * 参数：
 * obj : 标识要添加class属性的元素
 * cn  : 表示要添加的class值
 */
function addClass(obj,cn) {
    //检查obj中是否有cn
    if(!hasClass(obj,cn)){
        obj.className += " "+cn;
    }

}

/**
 * 判断一个元素种是否含有指定的class值
 * obj : 判断的元素
 * cn : class属性值
 * 如果有该class则返回true
 * 没有则返回false
 */
function hasClass(obj,cn){
    //判断obj种有没有cn  class
    var reg = new RegExp("\\b"+cn+"\\b");
    return reg.test(obj.className);
};

/**
 * 删除一个元素中指定的class属性
 */
function remove(obj,cn) {
    //创建一个正则表达式
    var reg = new RegExp("\\b" + cn +"\\b");

    //删除class
    obj.className = obj.className.replace(reg,"");
};

/**
 *该删除可以用于替换一个类，
 * 如果元素中有该类，则删除，如果没有这个类，则添加
 */
function toggleClass(obj,cn) {
    //判断obj中是否含有cn
    if(hasClass(obj,cn)){
        //有则删除
        remove(obj,cn);
    }else{
        //没有则添加
        addClass(obj,cn);
    }
};

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }

        /**
        设置outer的样式
         */
        #outer{
            /*设置宽和高*/
            width: 570px;
            height: 400px;
            /*区中*/
            margin: 50px auto;
            /*设置背景颜色*/
            background-color: greenyellow;
            /*设置padding*/
            padding: 10px 0;
            /*开启相对定位*/
            position: relative;
            /*裁剪溢出的内容*/
            overflow: hidden;
        }
        /*设置imgList*/
        #imgList{
            /*去除项目符号*/
            list-style: none;
            /*设置ul的宽度*/
            /*width: 3420px;*/
            /*开启绝对定位*/
            position: absolute;
            /*设置偏移量*/
            /*每向左移动570个像素就会显示一张图片*/
            left:0px;

        }
        /*设置图片中的li*/
        #imgList li{
            /*设置浮动*/
            float: left;
            /*设置左右外边距*/
            margin: 0 10px;
        }
        /*设置导航按钮*/
        #navDiv{
            /*开启绝对定位*/
            position: absolute;
            /*设置位置*/
            bottom: 25px;
            /*设置left值*/
            /*
                outer宽度是一个570
                navDiv宽度是 25 * 6 = 150
                    570 - 150 = 420
                    420 /2 = 210
            */
            /*left :210px;*/
        }
        #navDiv a{
            /*设置超链接浮动*/
            float: left;
            /*设置超链接的宽高*/
            width: 15px;
            height: 15px;
            /*设置背景颜色*/
            background-color: red;
            /*左右外边距*/
            margin: 0 5px;
            /*设置透明*/
            opacity: 0.5;
        }

        /*设置鼠标移入的效果*/
        #navDiv a:hover{
            background-color: black;
        }
    </style>
    <script type="text/javascript" src="../js/tools.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            //设置imgList宽度
            //获取imgList
            var imgList = document.getElementById("imgList");
            //获取页面中所有的img标签
            var imgArr = document.getElementsByTagName("img");
            //设置imgList的宽度
            imgList.style.width = 570 * imgArr.length + "px";

            /*设置导航按钮居中*/
            //获取imgDiv
            var navDiv = document.getElementById("navDiv");
            //获取outer
            var outer = document.getElementById("outer");
            //设置navDiv  left的值
            navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";

            //默认显示图片的索引
            var index = 0;
            //获取所有的a
            var allA = document.getElementsByTagName("a");

            /*设置默认选中的效果*/
            allA[index].style.backgroundColor = "black";
            /**
             * 点击超链接切换到指定的图片
             *  点击第一个超链接显示第一个图片...
             */
            //为所有的超链接绑定单击响应函数
            for(var i = 0;i < allA.length;i++){
                //给每一个超链接添加num属性
                allA[i].num = i;
                //为超链接绑定单击响应函数
                allA[i].onclick = function (){
                    //关闭自动切换的定时器
                    clearInterval(timer);
                  //切换图片
                    //获取点击超链接的索引,将其设置给index
                    index = this.num;
                    //切换图片
                    /**
                     * 第一张  0  0
                     * 第二张  1  -570
                     * 第三张  2  -1140
                     */
                    imgList.style.left = -570 * index + "px";
                    //setA();
                    //修改正在选中的a
                    //allA[index].style.backgroundColor = "black";
                    //设置选中的a
                    //使用move()函数来设置选中的a
                    move(imgList,"left",-570*index,20,function () {
                        //动画执行完毕开启自动切换
                        autoChange();
                    });
                    setA();
                };
            }

            //自动切换图片
            //开启自动切换
            autoChange();
            //创建一个方法用来设置选中的a
            function setA (){
                //判断当前索引是否是第一张图片
                if(index >= imgArr.length - 1){
                    //则将index设置为0
                    index = 0;
                    //此时显示的是最后一张图片，而最后一张图片和第一张图片是一样的
                    //通过css,将最后一张切换为第一张
                    imgList.style.left = "0px";
                }
                //遍历所有的a，并将背景颜色设置为红色
                for(var i = 0;i < allA.length;i++){
                    /*这里设置的是内联样式，会将css中设置的样式覆盖掉，调式hover失去效果*/
                    allA[i].style.backgroundColor = "";
                }
                //设置选中的a为黑色
                allA[index].style.backgroundColor = "black";
            }
            //定义一个自动切换定时器的标识
            var timer;
            //创建一个函数来开启自动切换图片
            function autoChange(){
                //开启一个定时器，用于定时切换
                timer = setInterval(function () {
                    //使得索引自增
                    index++;
                    //判断index值
                    index = index % imgArr.length;
                    //执行动画来切换图片
                    move(imgList,"left",-570*index,20,function () {
                        //修改导航点
                        setA();
                    });
                },2000);
            }
        };
    </script>
</head>
<body>
    <!--创建一个外部的div，作为一个大的容器-->
    <div id="outer">
        <!--创建一个ul，用于放置图片-->
        <ul id="imgList">
            <li><img style="height: 400px;width: 550px" src="../img/1.jpg"/></li>
            <li><img style="height: 400px;width: 550px" src="../img/2.jpg"/></li>
            <li><img style="height: 400px;width: 550px" src="../img/3.jpg"/></li>
            <li><img style="height: 400px;width: 550px" src="../img/4.jpg"/></li>
            <li><img style="height: 400px;width: 550px" src="../img/5.jpg"/></li>
            <li><img style="height: 400px;width: 550px" src="../img/6.jpg"/></li>
            <li><img style="height: 400px;width: 550px" src="../img/1.jpg"/></li>
        </ul>
        <!--创建导航按钮-->
        <div id="navDiv">
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </div>
</body>
</html>

12. 二级菜单

12.1 功能

实现菜单功能

12lh

12.2 代码

@charset "utf-8";

/* sdmenu */

div.sdmenu {
	width: 150px;
	margin: 0 auto;
	font-family: Arial, sans-serif;
	font-size: 12px;
	padding-bottom: 10px;
	background: url(bottom.gif) no-repeat right bottom;
	color: #fff;
}

div.sdmenu div {
	background: url(title.gif) repeat-x;
	overflow: hidden;
}

div.sdmenu div:first-child {
	background: url(toptitle.gif) no-repeat;
}

div.sdmenu div.collapsed {
	height: 25px;
}

div.sdmenu div span {
	display: block;
	height: 15px;
	line-height: 15px;
	overflow: hidden;
	padding: 5px 25px;
	font-weight: bold;
	color: white;
	background: url(expanded.gif) no-repeat 10px center;
	cursor: pointer;
	border-bottom: 1px solid #ddd;
}

div.sdmenu div.collapsed span {
	background-image: url(collapsed.gif);
}

div.sdmenu div a {
	padding: 5px 10px;
	background: #eee;
	display: block;
	border-bottom: 1px solid #ddd;
	color: #066;
}

div.sdmenu div a.current {
	background: #ccc;
}

div.sdmenu div a:hover {
	background: #066 url(linkarrow.gif) no-repeat right center;
	color: #fff;
	text-decoration: none;
}

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>二级菜单</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			
			a,img {
				border: 0;
				text-decoration: none;
			}
			
			body {
				font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
			}
		</style>

		<link rel="stylesheet" type="text/css" href="css/sdmenu.css" />
		
		<script type="text/javascript" src="../js/tools.js"></script>

		<script type="text/javascript">
			window.onload = function () {
				/**
				 * 每一个彩电都是一个div
				 * 	当div具有collapsed类时候，div就是折叠的状态
				 * 	当div没有collapsed类的时候,div就是展开的状态
				 */
				/**
				 * 点击菜单来切换菜单的显示效果
				 * 点击相应函数应该绑定给span
				 */
				//获取所有的class为menuSpan的元素
				var menuSpan = document.getElementsByClassName("menuSpan");

				//定义一个变量，来保存当前打开的菜单
				var openDiv = menuSpan[0].parentNode;
				//给span绑定单击响应函数
				for(var i = 0;i < menuSpan.length;i++){
					menuSpan[i].onclick = function () {
						//this代表当前点击的span
						//获取当前span的父元素
						var parentDiv = this.parentNode;

						//切换菜单的显示状态
						toggleMenu(parentDiv);

						//判断openDiv和parentDiv是否相同
						if(openDiv != parentDiv && !hasClass(openDiv,"collapsed")){
							//打开菜单以后，应该关闭之前打开的菜单
							//为了可以同一处力动画的效果，将addClass该为toggleClass
							//此处toggleClass不需要有移除的功能

							toggleMenu(openDiv);
						}
						//修改openDiv为当前打开的菜单
						openDiv = parentDiv;
					};
				}

				/**
				 * 用来切换菜单的折叠和显示状态
				 * @param obj
				 */
				function toggleMenu(obj){
					//在切换类之前，获取元素的高度
					var begin = obj.offsetHeight;

					//关闭parentDiv
					toggleClass(obj,"collapsed");

					//在切换类之后，获取元素的高度
					var end = obj.offsetHeight;

					//将元素的高度重置为begin
					obj.style.height = begin + "px";
					//执行动画
					move(obj,"height",end,10,function () {
						//内联样式是优先级最高的
						//一旦动画执行完毕，删除内联样式
						obj.style.height = "";
					});
				}

			};
		</script>
		
	</head>

	<body>

		<div id="my_menu" class="sdmenu">
			<div>
				<span class="menuSpan">在线工具</span>
				<a href="#">图像优化</a>
				<a href="#">收藏夹图标生成器</a>
				<a href="#">邮件</a>
				<a href="#">htaccess密码</a>
				<a href="#">梯度图像</a>
				<a href="#">按钮生成器</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">支持我们</span>
				<a href="#">推荐我们</a>
				<a href="#">链接我们</a>
				<a href="#">网络资源</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">合作伙伴</span>
				<a href="#">JavaScript工具包</a>
				<a href="#">CSS驱动</a>
				<a href="#">CodingForums</a>
				<a href="#">CSS例子</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">测试电流</span>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
			</div>
		</div>
	</body>
</html>