发布于 2016-12-30 10:47:00 | 51 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


说文字溢出,如何实现溢出的文字放入一个新生成的div中,原理就是判断是否能在div里放下,如果不能,则在应该断开的地方,差入到新的div中
看到群里有人提了一个问题,说文字溢出,如何实现溢出的文字放入一个新生成的div中,

想了一下原理,就是判断是否能在div里放下,如果不能,则在应该断开的地方,差入到新的div中,代码如下:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> 
<title>文字自动分插不同的div-Jason Yu</title> 
<style type="text/css"> 
*{margin:0;padding:0;} 
body{line-height:24px;font-family:SimSun;font-size:12px;color:#000;} 
#box1{height:96px;} 
.box{width:200px;overflow:hidden;margin-top:10px;border:1px solid #000;} 
</style> 
</head> 
<body> 
<div id="box1" class="box"></div> 
<script type="text/javascript"> 
var str = "这里是一段话,这短话的文字可以很随意的哦,只要达到一定数量,就自动会分页,你信不信?不信也得信啊,这是真的,哪怕再长的文字,我复制一段话吧,下面这一段话就是复制过来的,我要准备复制了哦,准备好了没呢?这里是一段话,这短话的文字可以很随意的哦,只要达到一定数量,就自动会分页,你信不信?不信也得信啊,这是真的,哪怕再长的文字,我复制一段话吧,下面这一段话就是复制过来的,我要准备复制了哦,准备好了没呢?"; 
var oBox1 = document.getElementById("box1"); 
function fnTextOver(n1){ 
var newBox2 = document.createElement("div"); 
document.body.appendChild(newBox2); 
newBox2.className = "box"; 
for(var i=n1; i<=str.length; i++){ 
newBox2.innerHTML = str.substring(n1,i); 
if(newBox2.offsetHeight<=98){ 
if(i==str.length){ 
newBox2.style.height = "96px"; 
} 
}else{ 
newBox2.innerHTML = str.substring(n1,i-1); 
newBox2.style.height = "96px"; 
arguments.callee(i-1); 
break; 
} 
} 
} 

function fnShowText(){ 
var newBox = document.createElement("div"); 
document.body.appendChild(newBox); 
newBox.className = "box"; 
for(var i=1; i<=str.length; i++){ 
newBox.innerHTML = str.substring(0,i); 
if(newBox.offsetHeight<=98){ 
oBox1.innerHTML = str.substring(0,i); 
if(i==str.length){ 
document.body.removeChild(newBox); 
} 
}else{ 
document.body.removeChild(newBox); 
fnTextOver(i-1); 
break; 
} 
} 
} 
fnShowText(); 
</script> 
</body> 
</html> 

补充一下,可能出现的问题1、符号在下一个div第一个出现2、字母如"student"会被断开写,及其他问题,需用正则判断一下。

最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务