Sun River
Topics about Java SE, Servlet/JSP, JDBC, MultiThread, UML, Design Pattern, CSS, JavaScript, Maven, JBoss, Tomcat, ...
posts - 78,comments - 0,trackbacks - 0
JavaScript SourceCodes
 

My top javascripts

---. ExpandCollapse

 Used for expanding and collapsing block elements. I use this one for hiding divs or expanding the divs for forms. Very useful.

 function expandCollapse() {
for (var i=0; i<expandCollapse.arguments.length; i++) {
var element = document.getElementById(expandCollapse.arguments[i]);
element.style.display = (element.style.display == "none") ? "block" : "none";
 }
}
 
<p><em>Example:</em></p>
 <div id="on" style="border: 1px solid #90ee90;padding: 5px;">
   <a href="javascript: expandCollapse('expand', 'on');">Expand Layer</a>
 </div>
 <div id="expand" style="display: none;border: 1px solid #90ee90;padding: 5px;">
 <a href="javascript: expandCollapse('expand', 'on');">Collapse Layer</a>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eu ligula.   Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Ut wisi. Curabitur odio. Sed ornare arcu id diam. Integer ultricies, mauris venenatis vulputate pulvinar</p>
</div>

--Timer Layer

Used for hiding an element after ‘x’ of seconds. Great for hiding status messages after a person has submitted a form.

var timerID;
 
function ShowLayer(id)
{
 document.getElementById().style.display = "block"; 
}
 
function HideTimedLayer(id)
{ 
    clearTimeout(timerID);
    document.getElementById(id). »
         style.display = "none";
}
 
function timedLayer(id)
{
 setTimeout("HideTimedLayer(""" + id + """)",»
  5000); //5000= 5 seconds
}

--Form Checker

Probably one of the most useful scripts and there are several out there about form validation. This figures out what fields are required from the value in in a hidden input tag. Than it highlights the error areas.

for (var j=0; j<myForm.elements.length; j++) {
var myElement = myForm.elements[j];
var isNull = false;
if (myElement.name == field && myElement.»
style.display != "none") {
if (myElement.type == "select-one" || »
myElement.type == "select-multiple") {
if ((myElement.options[myElement.selectedIndex].
»value == null || myElement.
»options[myElement.
»selectedIndex].value == '') 
»&& errorString.indexOf(title) == -1) {
isNull = true;
}
} else if ((myElement.value == null || 
»myElement.value.search(/"w/)»
 == -1) && errorString.indexOf(title) == -1) {
isNull = true;
}
 
if (isNull) {
errorString += title + ", ";
if (document.getElementById('label_'+myElement.name))»
 { document.getElementById('label_'+myElement.name)
 ».className="er"; }
myElement.className="erInput";
} else {
if (document.getElementById('label_'+myElement.name)) {
document.getElementById('label_'+myElement.name)
».className="s1";
}
myElement.className="s1";
}
}
}
}
if (errorString != '') {
errorString = errorString.slice(0,errorString.length-2);
window.alert("Please fill in the following 
»required fields before submitting this form:"n"n"+errorString)
return false;
}
else {
return true;
}
}

---今天练习了一下用javascript做文字自动匹配的功能，类似于Google Suggest，当然人家Google是连接后台数据库，在网上不方便做连接数据库，所有功能在前台实现。在javascript里定义了一个全局数组arrCities用来存储一些城市的名字。然后当我们在文本输入框里输入某个城市名字的时候，每输入完一个字，就会拿当前的文字到arrCities数组里去比对，看是否存在于arrCities的某个成员里。若存在，就把该成员添加到紧靠文本输入框下面的组合列表框里，供我们选择，这样我们就不用完全输入完整个城市的名字，只要
从下面选择一个就可以完成想要做的工作。看下面的例子：

<html>
<head>
<title>Autosuggest Example</title>
<script type="text/javascript">
var arrCities=["北京","上海"];
arrCities.sort();
//控制是否显示层div1,bFlag为true则表示显示div1,为false则把div1从页面流里移除
function showDiv1(bFlag){
var oDiv=document.getElementById("div1");
if(bFlag){
oDiv.style.display="block";
}
else{
oDiv.style.display="none";
}
};
//给sel1添加option
function addOption(oListbox,sText){
var oOption=document.createElement("option");
oOption.appendChild(document.createTextNode(sText));
oListbox.appendChild(oOption);
};
//移除一个option
function removeOption(oListbox,iIndex){
oListbox.remove(iIndex);
};
//移除所有的option
function clearOptions(oListbox){
for(var i=oListbox.options.length-1;i>=0;i--){
removeOption(oListbox,i);
}
};
//设置select里的第一个option被选中
function setFirstSelected(oListbox){
if(oListbox.options.length>0){
oListbox.options[0].selected=true;
}
}
//获取匹配的字段
function getAutosuggestMatches(sText,arrValues){
var arrResult=new Array;
if(sText!=""){
for(var i=0;i<arrValues.length;i++){
if(arrValues[i].indexOf(sText)==0){
arrResult.push(arrValues[i]);
}
}
}
else{
showDiv1(false);
}
return arrResult;
};
//把匹配的字段添加到sel1中
function addSuggestOptions(oTextbox,arrValues,sListboxId,oEvent){
var oListbox=document.getElementById(sListboxId);
clearOptions(oListbox);
var arrMatches=getAutosuggestMatches(oTextbox.value,arrValues);
if(arrMatches.length>0){
showDiv1(true);
for(var i=0;i<arrMatches.length;i++){
addOption(oListbox,arrMatches[i]);
}
setFirstSelected(oListbox);
if(oEvent.keyCode==8){
oTextbox.focus();
}
else{
oListbox.focus();
}
}
};
//获取select里的option到textbox
function getSuggestText(oListbox,sTextboxId){
var oTextbox=document.getElementById(sTextboxId);
if(oListbox.selectedIndex>-1){

oTextbox.value=oListbox.options[oListbox.selectedIndex].text;
}
oTextbox.focus();
showDiv1(false);
}
//通过Enter键确定选项
function getSuggestText2(oListbox,sTextboxId,oEvent){
if(oEvent.keyCode==13){
getSuggestText(oListbox,sTextboxId);
}
}
</script>
</head>
<body>
<p>请输入一个城市的名字：</p>
<p>
<input type="text" id="txt1" value="" size="27"
onkeyup="addSuggestOptions(this,arrCities,'sel1',event)" /><br />
<div id="div1" style="background-color:white;display:none;">
<select id="sel1" style="width:202px" size="6"
onclick="getSuggestText(this,'txt1')" onkeyup="getSuggestText2(this,'txt1',event)">
</select>
</div>
</p>
</body>
</html>

用到的东西都比较基础，当然有很多细节性的东西需要注意。比如说用户选择完一个选项，要注意把组合列表框隐藏。所以这里把组合列表框放在了一个层上，隐藏和显示控制起来就方便一点。

--js中innerHTML，innerText，outerHTML的用法和区别

用法：
<div id="test">
<span style="color:red">test1</span> test2
</div><div id="test">
<span style="color:red">test1</span> test2
</div>

在JS中可以使用：

test.innerHTML: 也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
上例中的test.innerHTML的值也就是
<span style="color:red">test1</span> test2<span style="color:red">test1</span> test2

test.innerText: 从起始位置到终止位置的内容, 但它去除Html标签
上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。

test.outerHTML: 除了包含innerHTML的全部内容外, 还包含对象标签本身。
上例中的text.outerHTML的值也就是
<div id="test"><span style="color:red">test1</span> test2</div><div id="test"><span style="color:red">test1</span> test2</div>

完整示例：
<div id="test">
<span style="color:red">test1</span> test2
</div>

<a href="javascript：alert(test.innerHTML)">innerHTML内容</a>
<a href="javascript：alert(test.innerText)">inerHTML内容</a>
<a href="javascript：alert(test.outerHTML)">outerHTML内容</a><div id="test">
<span style="color:red">test1</span> test2
</div>

<a href="javascript：alert(test.innerHTML)">innerHTML内容</a>
<a href="javascript：alert(test.innerText)">inerHTML内容</a>
<a href="javascript：alert(test.outerHTML)">outerHTML内容</a>

特别说明：

innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：
<div id="test">
<span style="color:red">test1</span> test2
</div>
<a href="javascript：alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

 

--Javascript长文章分页

本例中实现用Javascript 长文章分页,Javascript 分页

<html>
<head>
<style type="text/css">
<!--
#jiax{
width:80%;/*调整显示区的宽*/
height:200px;/*调整显示区的高*/
font-size:14px;
line-height:180%;
border:1px solid #000000;
overflow-x:hidden;
overflow-y:hidden;
word-break:break-all;
}
a{
font-size:12px;
color:#000000;
text-decoration:underline;
}
a:hover{
font-size:12px;
color:#CC0000;
text-decoration:underline;
}
//-->
</style>
</head>
<body>
<div id="jiax">
本届都灵冬奥会，-------------------------------------------上届冬奥会，他们依然以13金傲视群雄。

</div>
<P>
<div id="pages" style="font-size:12px;"></div>
<script language="javascript">
<!--
var obj = document.getElementById("jiax");
var pages = document.getElementById("pages");
window.onload = function(){
var allpages = Math.ceil(parseInt(obj.scrollHeight)/parseInt(obj.offsetHeight));
pages.innerHTML = "<b>共"+allpages+"页</b>";
for (var i=1;i<=allpages;i++){
pages.innerHTML += "<a href=""javascript：showpart('"+i+"');"">第"+i+"页</a>&nbsp;";

}
}
function showpart(x){
obj.scrollTop=(x-1)*parseInt(obj.offsetHeight);
}
//-->
</script>
</body>
</html>

--用js实现select对div的隐藏与显示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

<body>

<script type="text/javascript">
function change(a){
var xxx = document.getElementById("xxx");
var divArray = xxx.getElementsByTagName("div");
for (var i=0;i<divArray.length;i++) {
if (divArray[i].id == a) {
divArray[i].style.display='';
}else {
divArray[i].style.display='none';
}
}
}
</script>

<div id=xxx>


<div id=aaa>
<h1>aa</h1>
aaaa
</div>
<div id=bbb style="display:none ">
bbbb
</div>
<div id=ccc style="display:none ">
cccc
</div>

</div>

<select onChange="change(this.value)">
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
</select>
</body>
</html>

---++日期减去天数等于第二个日期
<script language=Javascript>
function cc(dd,dadd)
{
//可以加上错误处理
var a = new Date(dd)
a = a.valueOf()
a = a - dadd * 24 * 60 * 60 * 1000
a = new Date(a)
alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")
}
cc("12/23/2002",2)
</script>

++++检查一段字符串是否全由数字组成
<script language="Javascript"><!--
function checkNum(str){return str.match(//D/)==null}
alert(checkNum("1232142141"))
alert(checkNum("123214214a1"))
// --></script>

+++++++++++++

--用js处理输出分页(完美版)

head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
div{font-size:14px;}
-->
</style>
</head>

<body>
<textarea name="" cols="" rows="" id="conpage" style="display:none;">
<!--pages-->
你好
<!--pages-->
我好
<!--pages-->
他也好
<!--pages-->
全都好
<!--pages-->
</textarea>
<script language="javascript">
var zhenze = /[^0-9]/;//创建正则,表明非数字字符串
var thispage = document.getElementById("conpage").value;//取得内容
var page_amount,x;
page_amount = thispage.split('<!--pages-->').length;
page_amount--;//内容里的pages个数
var asarray = new Array();//数组
var v=0;
for(var t=0;t<page_amount;t++){
asarray[t] = thispage.indexOf("<!--pages-->",v);//记录每个pages的位置
v=asarray[t];
v++;
};
page_amount--;
for(var s=0;s<page_amount;s++){
//以下是分段写出所有内容
document.write('<div id="pg'+(s+1)+'" style="block">');
document.write(thispage.substring(asarray[s],asarray[s+1]));
document.write('</div>');
alert(s+1);
};


var obj,objt;
var s_a_d = 1;//记录当前显示的页数id,默认为第1页显示，当设用showpage时，此变量用于记录上次所显示的页码，
function hidpage(hidt){//此函数用于隐藏页数
obj=eval("document.getElementById('pg"+hidt+"')");
obj.style.display = "none";
};

function showpage(sow){//此函数用于显示页数
obj = eval("document.getElementById('pg"+sow+"')");
objt = eval("document.getElementById('pg"+(s_a_d)+"')");//此句是取得上次显示的页码
objt.style.display = "none";//先隐藏上次显示的页码
obj.style.display = "block";//再显示当前用户需要显示的页码
s_a_d = sow;
document.getElementById("pageamo").value = sow;
alert("当前显示第"+s_a_d+"页");
};

var tts;
function goto(){ //页面转向函数,作用是用户在文本框里输入页码然后转向
tts = document.getElementById("inputpage").value;
if(!tts.match(zhenze)==""){
alert("错误，你输入了非数字类型字符");
return;
};
if(tts>page_amount || tts < 1){
alert("无此页");//非法输入全部检验完毕
}else{
showpage(tts);//合法的执行转向
};
};


document.write('<div>');
document.write('你现在在第<input type="button" id="pageamo" value="'+s_a_d+'" style="font-size:12px;height:18px;background-color:#FFFFFF; color:red;font-weight:bold;border:#FFFFFF 0px solid;">页 ');//标示当前页码
document.write('共有'+page_amount+'页');//总页数
for(var k=0;k<page_amount;k++){
document.write(' <a href="javascript：showpage('+(k+1)+')" style="text-decoration:none;">');
document.write(" ["+(k+1)+"] ");
document.write('</a> ');
hidpage(k+1);//隐藏所有页数
};//for写出页码 : 1 2 3 4 5 ....
showpage(1);//首先显示第一页内容
document.write(' 转到第 <input type="text" id="inputpage" style="width:20px;font-size:12px;height:18px;" value=""> 页');//转向表单
document.write('<input type="button" value=" Go " onclick="goto()" style="height:20px;">');
document.write('</div>');
</script>
</body>
</html>

posted on 2008-02-22 22:13 Sun River 阅读(350) 评论(0)  编辑  收藏
Copyright ©2024 Sun River Powered By博客园 模板提供：沪江博客