最简单的JS字符串的显示与隐藏

最新推荐文章于 2021-08-01 10:30:16 发布

IInit

最新推荐文章于 2021-08-01 10:30:16 发布

阅读量1.3k

点赞数

分类专栏： Html练习文章标签： html css3 js

本文链接：https://blog.csdn.net/qq_33768121/article/details/90600216

版权

Html练习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>字符串的显示与隐藏</title>
</head>

<body>
<span id="layout">asdasd 大苏打撒 旦你看萨克雷放假了恺撒奖分厘卡赛季士大夫加里奎斯搭街坊勒科斯
    解放党离开龙宽九段烧录卡发酵饲料杜可风捷斯连科龙宽九段弗兰克绝对是弗兰克打碎了扣分记录可的松解放</span>【<a id='more' href='#'>查看更多</a>】
<script type="text/javascript">
    var end;
    var oDiv=document.getElementById("layout");
    var oText=oDiv.innerHTML;
    function suolve( str ){
        var sub_length = 10 ;
        var temp1 = str.replace(/[^\x00-\xff]/g,"**");
        console.info(temp1);
        var temp2 = temp1.substring(0,sub_length);
        var x_length = temp2.split("\*").length - 1 ;
        var hanzi_num = x_length /2 ;
        console.info(hanzi_num);
        sub_length = sub_length - hanzi_num ;
        console.info(sub_length);
        var res = str.substring(0,sub_length-5);
        if(sub_length < str.length ){
            end  =res+"……" ;
        }else{
            end  = res ;
        }
        return end ;
    }
    suolve(oText);
    oDiv.innerHTML=end;
    var oBtn=document.getElementById("more");
    oBtn.onclick=function(){
        if(oBtn.innerHTML=="查看更多"){
            oDiv.innerHTML=oText;
            oBtn.innerHTML="显示精简";
        }else if(oBtn.innerHTML=="显示精简"){
            oDiv.innerHTML=end;
            oBtn.innerHTML="查看更多"
        }
    }
</script>
</body>
</html>