JS操作DOM，两个简单的小案例 -

可以编辑的表格

效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>edittable</title>
        <style type="text/css">
            .container {
                color: white;
            }
            li {
                float: left;
                list-style: none;
                line-height: 30px;
                height: 30px;
                background-color: #F4A460;
                margin-right: 20px;
            }
            ul>li:nth-child(1) {
                width: 100px;
                background-color: coral;
            }
            ul>li:nth-child(2) {
            }
        </style>
    </head>
    <body>
        <div class="container">
            <ul>
                <li>Java</li>
                <li>Java 是由 Sun Microsystems 公司于 1995 年 5 月推出的高级程序设计语言。</li>
            </ul>
            <br>
            <ul>
                <li>JavaScript</li>
                <li>JavaScript 是 Web 的编程语言。</li>
                <li></li>
            </ul>
            <br>
            <ul>
                <li>Python</li>
                <li>Python 是一种解释型、面向对象、动态数据类型的高级程序设计语言。</li>
            </ul>
            <br>
            <ul>
                <li>PHP中文网</li>
                <li>学习PHP</li>
            </ul>
        </div>
        <script type="text/javascript">
            window.onload = function() {
                var lis = document.getElementsByTagName('li');
                console.log(lis)
                for (var i = 0; i < lis.length; i++) {
                    lis[i].onclick = function() {
                        for (var j = 0; j < this.childNodes.length; j++) {
                            if (this.childNodes[j].nodeName == 'INPUT') {
                                return false;
                            }
                        }
                        var orgtext = this.innerText; //取出原内容
                        console.log(orgtext);
                        this.innerHTML = ''; // 清空内容
                        //创建标签
                        var inputo = document.createElement('input');
                        inputo.type = "text";
                        inputo.style.cssText = "border:0px;width:100%;height:30px;font-size:16px;";
                        inputo.value = orgtext;
                        this.appendChild(inputo);
                        inputo.focus();
                        inputo.select();
                        var thisli = this;
                        console.log(thisli);
                        inputo.onkeyup = function(e) {
                            var event = e || window.event;
                            if (event.keyCode == 13) {
                                thisli.innerHTML = this.value;
                            } else if (event.keyCode == 27) {
                                console.log(orgtext);
                                thisli.innerHTML = orgtext;
                            }
                        }
                        //已经进入编辑状态，不再处理click事件
                        inputo.onclick = function(e) {
                            return false;
                        }
                    }
                }
            }
        </script>
    </body>
</html>

超简单的固定导航

效果

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0
            }
            .main {
                margin: 0 auto;
                width: 1000px;
                margin-top: 10px;
            }
            .fixed {
                width: 100%;
                position: fixed;
                top: 0;
                left: 0;
            }
            .top {
                height: 60px;
                background-color: cornflowerblue;
            }
            #navBar {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="top" id="topPart">
        </div>
        <div id="navBar">
            <img src="../images/image1.png" alt="" />
        </div>
        <div class="main" id="mainPart">
            <img src="../images/image2.jpg" alt="" />
        </div>
        <script>
            var topPart = document.getElementById("topPart");
            var navBar = document.getElementById("navBar");
            var mainPart = document.getElementById("mainPart");
            window.onscroll = function() {
                if (scroll().top > topPart.offsetHeight) {
                    navBar.className = "fixed";
                    mainPart.style.paddingTop = navBar.offsetHeight + "px";
                } else {
                    navBar.className = "";
                    mainPart.style.paddingTop = 0;
                }
            };
            function scroll() {
                return {
                    top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
                    left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
                };
            }
        </script>
    </body>
</html>

可以编辑的表格

超简单的固定导航

全部评论