DOM操作练习(2)

1.transform的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box{
            width: 90px;
            height: 90px;
            background-color: red;
            margin: 100px;
        }
    </style>
</head>
<body>
   <button id="btn">形变</button>
   <div id="box"></div>

<script>
    window.onload = function () {
        var index = 0;
        $('btn').onclick = function () {
            index ++;
            $('box').style.transform = 'translate(' + (index * 100) +'px, '+ (index * 50)+'px) rotate('+ (index * 20) +'deg) scale('+ (index * 1.3)+')';
        }
    };

    function $(id) {
        return typeof id === "string" ? document.getElementById(id) : null;
    }
</script>
</body>
</html>

2.表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #prompt{
            font-size: 13px;
            color: darkgray;
        }

        #score{
            border:1px solid darkgray;
        }

        .right{
            background: url("images/right.png") no-repeat 5px center;
            background-size:15px 15px;
            padding-left: 20px;
            color: lightgreen !important;
        }

        .error{
            background: url("images/error.png") no-repeat 5px center;
            background-size:15px 15px;
            padding-left: 20px;
            color: red !important;
        }
    </style>
</head>
<body>
    <div id="box">
        <label>您的成绩:</label>
        <input id="score" type="text" placeholder="请输入分数">
        <span id="prompt">请输入您的成绩!</span>
    </div>
<script>
    window.onload = function () {
        // 当输入框失去焦点
        $('score').onblur = function () {
            // 1. 获取输入的内容
            var value = parseFloat($("score").value);

            // 2.验证
            if(isNaN(value)){ // 不是一个数
               /* $('prompt').innerText = "输入成绩不正确";
                $('prompt').className = 'error';
                $('score').style.borderColor = 'red';*/
                dealStyle('输入成绩不正确', 'error', 'red');
            }else if(value >= 0 && value <= 100){ // 合法的
                /*$('prompt').innerText = "输入成绩正确";
                $('prompt').className = 'right';
                $('score').style.borderColor = 'lightgreen';*/
                dealStyle('输入成绩正确', 'right', 'lightgreen');
            }else { // 超出
                /*$('prompt').innerText = "成绩必须在0-100之间";
                $('prompt').className = 'error';
                $('score').style.borderColor = 'red';*/
                dealStyle('成绩必须在0-100之间', 'error', 'red');
            }

        };

        // 当输入框获得焦点
        $('score').onfocus = function () {
            /*$('prompt').innerText = "请输入您的成绩!";
            $('prompt').className = '';
            $('score').style.borderColor = 'darkgray';*/
            $('score').style.outline = 'none';
            $('score').value = '';
            dealStyle("请输入您的成绩!", '', 'darkgray');
        };

        /**
         * 处理公共的样式
         * @param {string}msg
         * @param {string}className
         * @param {string}color
         */
        function dealStyle(msg, className, color) {
            $('prompt').innerText = msg;
            $('prompt').className = className;
            $('score').style.borderColor = color;
        }
    };

    function $(id) {
        return typeof id === "string" ? document.getElementById(id) : null;
    }
</script>
</body>
</html>

3.上传图片格式验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <label>上传图片的格式验证:</label>
    <input type="file" id="file">
<script>
    /*
      jpg png gif
    */
    window.onload = function () {
       // 1. 获取标签
        var file = document.getElementById('file');
       // 2. 监听作用域的变化
        file.onchange = function () {
            // 2.1 获取上传图片的路径
            var path = this.value;
            // console.log(path);

            // 2.2 截取
            var suffix = path.substr(path.lastIndexOf('.'));
            // console.log(suffix);

            // 2.3 统一转成小写
            var lower_suffix = suffix.toLowerCase();
            // console.log(lower_suffix);

            // 2.4 判断
            if(lower_suffix === '.jpg' || lower_suffix === '.png' || lower_suffix === '.jpeg' || lower_suffix === '.gif'){
                alert('上传图片正确');
            }else {
                alert('上传图片不正确');
            }
        }
    }
</script>
</body>
</html>

4.发表评论

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

        #box{
            width: 800px;
            border: 1px solid #ccc;
            margin: 100px auto;
            padding: 20px;
        }

        #my_textarea{
            width: 80%;
            height: 120px;
        }

        .box-top{
            margin-bottom: 20px;
        }

        #ul{
            margin: 0 80px;
        }

        #ul li{
            border-bottom: 1px dashed #ccc;
            color: red;
            line-height: 44px;
        }

        #ul li a{
            float: right;
        }
    </style>
</head>
<body>
   <div id="box">
       <div class="box-top">
           <label>发表评论：</label>
           <textarea id="my_textarea" cols="60" rows="10"></textarea>
           <button id="btn">发表</button>
       </div>
       <ul id="ul">

       </ul>
   </div>
<script>
    window.onload = function () {
        // 1. 监听按钮的点击
        $('btn').onclick = function () {
            // 1.1 获取用户输入的内容
            var content = $('my_textarea').value;
            // console.log(content);

            // 1.2 判断
            if(content.length === 0){
                alert("请输入评论的内容~");
                return;
            }

            // 1.3 创建li标签放入ul
            var li = document.createElement('li');
            li.innerHTML = content + '<a href="javascript:;">删除</a>';
            // $('ul').appendChild(li);
            $('ul').insertBefore(li, $('ul').children[0]);

            // 1.4 清除输入框中的内容
            $('my_textarea').value = '';

            // 1.5 删除评论
            var as = $('ul').getElementsByTagName('a');

            for(var i =0; i<as.length; i++){
                var a = as[i];
                a.onclick = function () {
                   //  alert(9);
                    // 1.6 获取父标签,删除
                    this.parentNode.remove();
                }
            }
        }
    };

    function $(id) {
        return typeof id === "string" ? document.getElementById(id) : null;
    }
</script>
</body>
</html>

5.九宫格布局

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

        #top{
            padding: 20px;
        }

        #bottom{
            position: relative;
        }

        .box{
            width: 220px;
            height: 360px;
            margin: 0 15px 15px 0;
            background-color: #e8e8e8;
        }

        .box p:last-child{
            font-size: 13px;
            color: orangered;
        }
    </style>
</head>
<body>
    <div id="top">
        <button>3列</button>
        <button>4列</button>
        <button>5列</button>
    </div>
    <div id="bottom">
        <div class="box">
            <img src="image/1.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/2.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/3.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/4.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/5.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/6.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/7.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/8.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/9.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/10.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/11.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/12.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/13.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/14.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/15.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
    </div>
<script>
    window.onload = function () {
        // 1. 获取需要的标签
        var btns = document.getElementById("top").children;
        var bottom = document.getElementById("bottom");

        // 2.监听按钮的点击
        btns[0].onclick = function () {
            j_flex(3, bottom);
        };

        btns[1].onclick = function () {
            j_flex(4, bottom);
        };

        btns[2].onclick = function () {
            j_flex(5, bottom);
        };

        function j_flex(allCols, parentNode) {
            // 2.1 定义变量
            var boxW = 220, boxH = 360, marginXY = 15;

            // 2.2 遍历
            for(var i=0; i<parentNode.children.length; i++){
                // 2.2.1 求出当前盒子所在的行和列
                var row = parseInt(i / allCols);
                var col = parseInt(i % allCols);
                // console.log("当前盒子在第" + row  + " ,第" + col);

                // 2.2.2 盒子的定位
                var currentBox = parentNode.children[i];
                currentBox.style.position = 'absolute';
                currentBox.style.left = col * (boxW + marginXY) + 'px';
                currentBox.style.top = row * (boxH + marginXY) + 'px';
            }
        }
    }
</script>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容