JS – 天宸良木

需要JQuery ，下面的代码在外部js文件中。

<script type="text/javascript">
$(document).ready(function(){
	var arrcomments = $(".wenben"); //提取循环显示的多个字块
	arrcomments.each(function(){	//每个字块函数
		var len = 0;
		var s = $(this).text();		//获取字块字符串
		var l=$(this).text().length;	//获取字块字符串长度
		var n=90; //设置字符长度为32个
		for (var i = 0; i < l; i++) { 
			if (s[i].match(/[^\x00-\xff]/ig) != null) //判断半角全角中英文（可能有漏的） 
				len += 2; 	//是中文记2个字符
			else 
				len += 1; 	//半角数字英文记1个字符
			if (len > n) break;	//如果循环后字符长度大于设定（n）的长度，结束循环，此时的循环次数i即是第N个文字。
		} 
		if(l > i){	//字块字符串长度大于限定的字数
			$(this).attr("title",s); //将文本所有内容用标签的title属性提示文本全部内容
			s=$(this).text(s.substring(0,i)+"...");	//截取后的文字后面加...输出
		}
	});
});
</script>

$(document).ready(function(){

var arrcomments = $(".wenben"); //提取循环显示的多个字块

arrcomments.each(function(){ //每个字块函数

var len = 0;

var s = $(this).text(); //获取字块字符串

var l=$(this).text().length; //获取字块字符串长度

var n=90; //设置字符长度为32个

for (var i = 0; i < l; i++) {

if (s[i].match(/[^\x00-\xff]/ig) != null) //判断半角全角中英文（可能有漏的）

len += 2; //是中文记2个字符

else

len += 1; //半角数字英文记1个字符

if (len > n) break; //如果循环后字符长度大于设定（n）的长度，结束循环，此时的循环次数i即是第N个文字。

}

if(l > i){ //字块字符串长度大于限定的字数

$(this).attr("title",s); //将文本所有内容用标签的title属性提示文本全部内容

s=$(this).text(s.substring(0,i)+"..."); //截取后的文字后面加...输出

}

});

</script>

纯Js，在网页内部的代码

<script type="text/javascript">
function test() {
	s =	document.getElementById("wenben").innerHTML;	//获得字符串文本
	l = s.length;	//获得字符串长度
	len = 0;	
	n = 30;			//设定限定的字符长度
	for (var i=0; i<l; i++) {	//
		if (s[i].match(/[^\x00-\xff]/ig) != null) len +=2;
		 else len +=1;
		 if (len > n) break;
	}
	if (l > i) {
		s = s.substring(0,i)+"...";
	}
	document.write(s);
}
</script>
<div id="wenben">这里是一段测试文字的长度，this is test text。</div>
<button onClick="test()">点这里截取</button>

function test() {

s = document.getElementById("wenben").innerHTML; //获得字符串文本

l = s.length; //获得字符串长度

len = 0;

n = 30; //设定限定的字符长度

for (var i=0; i<l; i++) { //

if (s[i].match(/[^\x00-\xff]/ig) != null) len +=2;

else len +=1;

if (len > n) break;

}

if (l > i) {

s = s.substring(0,i)+"...";

}

document.write(s);

}

</script>

<div id="wenben">这里是一段测试文字的长度，this is test text。</div>

<button onClick="test()">点这里截取</button>

如果已经用了JQUERY，也就是HEAD里面已经引用了JQUERY，那么这个页面中那些和JQUERY没有任何关系的原生JS就不可以再使用除JUQERY的选择器缩写符号$了。

那么怎么办呢？

比如这一段JS：

// JavaScript Document
function $(id) { return document.getElementById(id); }
function addLoadEvent(func){
 var oldonload = window.onload;
 if (typeof window.onload != 'function') {
  window.onload = func;
 } else {
  window.onload = function(){
   oldonload();
   func();
  }
 }
}
function moveElement(elementID,final_x,final_y,interval) {
  if (!document.getElementById) return false;
  if (!document.getElementById(elementID)) return false;
  var elem = document.getElementById(elementID);
  if (elem.movement) {
    clearTimeout(elem.movement);
  }
  if (!elem.style.left) {
    elem.style.left = "0px";
  }
  if (!elem.style.top) {
    elem.style.top = "0px";
  }
  var xpos = parseInt(elem.style.left);
  var ypos = parseInt(elem.style.top);
  if (xpos == final_x && ypos == final_y) {
  return true;
  }
  if (xpos < final_x) {
    var dist = Math.ceil((final_x - xpos)/10);
    xpos = xpos + dist;
  }
  if (xpos > final_x) {
    var dist = Math.ceil((xpos - final_x)/10);
    xpos = xpos - dist;
  }
  if (ypos < final_y) {
    var dist = Math.ceil((final_y - ypos)/10);
    ypos = ypos + dist;
  }
  if (ypos > final_y) {
    var dist = Math.ceil((ypos - final_y)/10);
    ypos = ypos - dist;
  }
  elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";
  var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
  elem.movement = setTimeout(repeat,interval);
}
function classNormal(iFocusBtnID,iFocusTxID){
 var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
 var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
 for(var i=0; i=2) {
  iFocusBtns[1].onmouseover = function() {
   moveElement('ifocus_piclist',0,-366,5);
   classNormal('ifocus_btn','ifocus_tx');
   classCurrent('ifocus_btn','ifocus_tx',1);
  }
 }
 if (listLength>=3) {
  iFocusBtns[2].onmouseover = function() {
   moveElement('ifocus_piclist',0,-732,5);
   classNormal('ifocus_btn','ifocus_tx');
   classCurrent('ifocus_btn','ifocus_tx',2);
  }
 }
 if (listLength>=4) {
  iFocusBtns[3].onmouseover = function() {
   moveElement('ifocus_piclist',0,-1098,5);
   classNormal('ifocus_btn','ifocus_tx');
   classCurrent('ifocus_btn','ifocus_tx',3);
  }
 }
}
setInterval('autoiFocus()',5000);
var atuokey = false;
function autoiFocus() {
 if(!$('ifocus')) return false;
 if(atuokey) return false;
 var focusBtnList = $('ifocus_btn').getElementsByTagName('li');
 var listLength = focusBtnList.length;
 for(var i=0; i
//如果既要用到这段JS，又想调用JS库模块，并且该库已经把$当成了ID选择器，那么，只要将上面这段中的$全部替换成自己想要取的函数名字就可以了：


//像这样：


// JavaScript Document
function getObj(id) { return document.getElementById(id); }
function addLoadEvent(func){
 var oldonload = window.onload;
 if (typeof window.onload != 'function') {
  window.onload = func;
 } else {
  window.onload = function(){
   oldonload();
   func();
  }
 }
}
function moveElement(elementID,final_x,final_y,interval) {
  if (!document.getElementById) return false;
  if (!document.getElementById(elementID)) return false;
  var elem = document.getElementById(elementID);
  if (elem.movement) {
    clearTimeout(elem.movement);
  }
  if (!elem.style.left) {
    elem.style.left = "0px";
  }
  if (!elem.style.top) {
    elem.style.top = "0px";
  }
  var xpos = parseInt(elem.style.left);
  var ypos = parseInt(elem.style.top);
  if (xpos == final_x && ypos == final_y) {
  return true;
  }
  if (xpos < final_x) {
    var dist = Math.ceil((final_x - xpos)/10);
    xpos = xpos + dist;
  }
  if (xpos > final_x) {
    var dist = Math.ceil((xpos - final_x)/10);
    xpos = xpos - dist;
  }
  if (ypos < final_y) {
    var dist = Math.ceil((final_y - ypos)/10);
    ypos = ypos + dist;
  }
  if (ypos > final_y) {
    var dist = Math.ceil((ypos - final_y)/10);
    ypos = ypos - dist;
  }
  elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";
  var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
  elem.movement = setTimeout(repeat,interval);
}
function classNormal(iFocusBtnID,iFocusTxID){
 var iFocusBtns= getObj(iFocusBtnID).getElementsByTagName('li');
 var iFocusTxs = getObj(iFocusTxID).getElementsByTagName('li');
 for(var i=0; i=2) {
  iFocusBtns[1].onmouseover = function() {
   moveElement('ifocus_piclist',0,-366,5);
   classNormal('ifocus_btn','ifocus_tx');
   classCurrent('ifocus_btn','ifocus_tx',1);
  }
 }
 if (listLength>=3) {
  iFocusBtns[2].onmouseover = function() {
   moveElement('ifocus_piclist',0,-732,5);
   classNormal('ifocus_btn','ifocus_tx');
   classCurrent('ifocus_btn','ifocus_tx',2);
  }
 }
 if (listLength>=4) {
  iFocusBtns[3].onmouseover = function() {
   moveElement('ifocus_piclist',0,-1098,5);
   classNormal('ifocus_btn','ifocus_tx');
   classCurrent('ifocus_btn','ifocus_tx',3);
  }
 }
}
setInterval('autoiFocus()',5000);
var atuokey = false;
function autoiFocus() {
 if(!getObj('ifocus')) return false;
 if(atuokey) return false;
 var focusBtnList = getObj('ifocus_btn').getElementsByTagName('li');
 var listLength = focusBtnList.length;
 for(var i=0; i
//此处用getObj（也可以用其他自定义的）替代$，那么这段JS将不再与JQUERY之类的JS库冲突。

//如果要优化，由于JQUERY的引入，甚至可以用$替换掉其中的getElementsByTagName或者getElementById。（这个还不明白是什么意思）

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

// JavaScript Document

function $(id) { return document.getElementById(id); }

function addLoadEvent(func){

var oldonload = window.onload;

if (typeof window.onload != 'function') {

window.onload = func;

} else {

window.onload = function(){

oldonload();

func();

}

function moveElement(elementID,final_x,final_y,interval) {

if (!document.getElementById) return false;

if (!document.getElementById(elementID)) return false;

var elem = document.getElementById(elementID);

if (elem.movement) {

clearTimeout(elem.movement);

}

if (!elem.style.left) {

elem.style.left = "0px";

}

if (!elem.style.top) {

elem.style.top = "0px";

}

var xpos = parseInt(elem.style.left);

var ypos = parseInt(elem.style.top);

if (xpos == final_x && ypos == final_y) {

return true;

}

if (xpos < final_x) {

var dist = Math.ceil((final_x - xpos)/10);

xpos = xpos + dist;

}

if (xpos > final_x) {

var dist = Math.ceil((xpos - final_x)/10);

xpos = xpos - dist;

}

if (ypos < final_y) {

var dist = Math.ceil((final_y - ypos)/10);

ypos = ypos + dist;

}

if (ypos > final_y) {

var dist = Math.ceil((ypos - final_y)/10);

ypos = ypos - dist;

}

elem.style.left = xpos + "px";

elem.style.top = ypos + "px";

var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";

elem.movement = setTimeout(repeat,interval);

}

function classNormal(iFocusBtnID,iFocusTxID){

var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');

var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');

for(var i=0; i=2) {

iFocusBtns[1].onmouseover = function() {

moveElement('ifocus_piclist',0,-366,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',1);

}

if (listLength>=3) {

iFocusBtns[2].onmouseover = function() {

moveElement('ifocus_piclist',0,-732,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',2);

}

if (listLength>=4) {

iFocusBtns[3].onmouseover = function() {

moveElement('ifocus_piclist',0,-1098,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',3);

}

setInterval('autoiFocus()',5000);

var atuokey = false;

function autoiFocus() {

if(!$('ifocus')) return false;

if(atuokey) return false;

var focusBtnList = $('ifocus_btn').getElementsByTagName('li');

var listLength = focusBtnList.length;

for(var i=0; i

//如果既要用到这段JS，又想调用JS库模块，并且该库已经把$当成了ID选择器，那么，只要将上面这段中的$全部替换成自己想要取的函数名字就可以了：

//像这样：

// JavaScript Document

function getObj(id) { return document.getElementById(id); }

function addLoadEvent(func){

var oldonload = window.onload;

if (typeof window.onload != 'function') {

window.onload = func;

} else {

window.onload = function(){

oldonload();

func();

}

function moveElement(elementID,final_x,final_y,interval) {

if (!document.getElementById) return false;

if (!document.getElementById(elementID)) return false;

var elem = document.getElementById(elementID);

if (elem.movement) {

clearTimeout(elem.movement);

}

if (!elem.style.left) {

elem.style.left = "0px";

}

if (!elem.style.top) {

elem.style.top = "0px";

}

var xpos = parseInt(elem.style.left);

var ypos = parseInt(elem.style.top);

if (xpos == final_x && ypos == final_y) {

return true;

}

if (xpos < final_x) {

var dist = Math.ceil((final_x - xpos)/10);

xpos = xpos + dist;

}

if (xpos > final_x) {

var dist = Math.ceil((xpos - final_x)/10);

xpos = xpos - dist;

}

if (ypos < final_y) {

var dist = Math.ceil((final_y - ypos)/10);

ypos = ypos + dist;

}

if (ypos > final_y) {

var dist = Math.ceil((ypos - final_y)/10);

ypos = ypos - dist;

}

elem.style.left = xpos + "px";

elem.style.top = ypos + "px";

var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";

elem.movement = setTimeout(repeat,interval);

}

function classNormal(iFocusBtnID,iFocusTxID){

var iFocusBtns= getObj(iFocusBtnID).getElementsByTagName('li');

var iFocusTxs = getObj(iFocusTxID).getElementsByTagName('li');

for(var i=0; i=2) {

iFocusBtns[1].onmouseover = function() {

moveElement('ifocus_piclist',0,-366,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',1);

}

if (listLength>=3) {

iFocusBtns[2].onmouseover = function() {

moveElement('ifocus_piclist',0,-732,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',2);

}

if (listLength>=4) {

iFocusBtns[3].onmouseover = function() {

moveElement('ifocus_piclist',0,-1098,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',3);

}

setInterval('autoiFocus()',5000);

var atuokey = false;

function autoiFocus() {

if(!getObj('ifocus')) return false;

if(atuokey) return false;

var focusBtnList = getObj('ifocus_btn').getElementsByTagName('li');

var listLength = focusBtnList.length;

for(var i=0; i

//此处用getObj（也可以用其他自定义的）替代$，那么这段JS将不再与JQUERY之类的JS库冲突。

//如果要优化，由于JQUERY的引入，甚至可以用$替换掉其中的getElementsByTagName或者getElementById。（这个还不明白是什么意思）

转载自《function $(id)冲突》

天宸良木

PHP网站设计与开发潜心学习

标签：JS

JS和JQuery截取字符串(一句话)长度，中英文数字等判断

IE7、IE8、IE9不支持alert和confirm

function $(id)冲突