牛骨文教育服务平台(让学习变的简单)
博文笔记

js控制文本字数,并能点击显示和隐藏

创建时间:2016-03-28 投稿人: 浏览次数:2569

很多时候,你不用考虑文本字数的问题,因为和你多地方,如数据库、后台控制;都会限制文本字数,

但有时候,比如:你的老板说,我们现在要做一个简单的主题介绍单页,还是要适用于web手机端的;那么你就有可能会用到以下这段js了,不是特别的复杂,不过一定是实用的。

我写的很粗糙,大神请无视,欢迎给予批评!



js代码

<script>
window.onload=function(){
	var oUl=document.getElementById("piot");
    var str=oUl.innerHTML;
	oUl.innerHTML=str.substr(0,80)+"...";//先按一定字数缩进
    var i=0;
	var oA = document.getElementById("puta");
	oA.onclick = function ()//点击更多箭头的时候显
	{	
		
		if(i==0){	
			oUl.innerHTML=str.substr(0,9999);
			oA.innerHTML = "<img src="images/win-005s.png" width="31" height="16">"	
			i=i+1;
		}
		else{
			oUl.innerHTML=str.substr(0,80)+"...";
			oA.innerHTML = "<img src="images/win-005.png" width="31" height="16">"
			i=0;	
		}
	};
    
}
</script>
html代码

<div class="t-user-kiss">
	<p id="piot">
    我叫纪鸿聪,北京大学法学院博士生。2015年起南下申城研习社会理论,在南洋公学的拱廊下踌躇至今。我的主要研习领域为近代英美法历史、当代法与社会理论等,尤溪阅读联邦最高法院史2015年起南下申城研习社会理论,在南洋公学的拱廊下踌躇至今。我的主要研习领域为近代英美法历史、当代法与社会理论等,尤溪阅读联邦最高法院史。
    </p>
    <a id="puta"><img src="images/win-005.png" width="31" height="16"></a>
</div>


css样式就自行脑补,毕竟你肯定要用你自己的样式的,见谅。

声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。