前端开发javascript字符串截取

前端开发入门要求 前端开发能做项目经理吗 前端开发多久可以入门

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            padding: 10px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class=”box”>其中 weui 的版本eui 的版本需DDD524Queeui 的版本需DDD524Queeui 的版本需DDD524Que需DDD524Query WeUI 对应</div>
    <button class=”btn”>更多</button>
    <div class=”box”>其中 weui 的版本eui的版本需DDD524Queeui 的版本需DDD524Queeu的版本需DDD524Queeui 的版本需DDD524Queeu的版本需DDD524Queeui
        的版本需DDD524Queeu的版本需DDD524Queeui 的版本需DDD524Queeu的版本需DDD524Queeui 的版本需DDD524Queeu</div>
    <button class=”btn”>更多</button>
    <script>
        var box = document.getElementsByClassName(“box”);
        var oBtn = document.getElementsByClassName(‘btn’);
        var boxInnerHtml = [];
        for (var i = 0; i < box.length; i++) {
            boxInnerHtml.push(box[i].innerHTML);
            (function (i) {
                oBtn[i].addEventListener(“click”, function () {
                    if (this.innerHTML == “更多”) {
                        box[i].innerHTML = boxInnerHtml[i];
                        this.innerHTML = “收起!”
                    } else {
                        box[i].innerHTML = boxInnerHtml[i].slice(1, 30) + “…”;
                        this.innerHTML = “更多”
                    }
                });
            })(i);
        }
        function more() {
            for (var i = 0; i < box.length; i++) {
                if (box[i].innerHTML.length > 30) {
                    oBtn[i].style.display = “block”;
                    box[i].innerHTML = box[i].innerHTML.slice(1, 30) + “…”;
                } else {
                    oBtn[i].style.display = “none”
                }
            }
        };
        more();
    </script>
</body>
</html>

web前端项目开发实践 前端开发入门薪水济南 web前端开发项目经验

» 本文来自:前端开发者 » 《前端开发javascript字符串截取》
» 本文链接地址:https://www.rokub.com/5729.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!