脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 魔鬼字典 JavaScript

魔鬼字典 JavaScript 笔记 代码比较多乱第3/3页

 更新时间：2010年03月09日 21:03:36   作者：  
魔鬼字典 JavaScript 笔记 代码比较多乱，对于有经验的看容易点。

例子（ListboxSelectedIndex）
复制代码 代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript">
function showSelectedIndex()
{
var oListbox=document.getElementById("selListbox");
alert(oListbox.selectedIndex); //oListbox.selectedIndex 显示的是listbox（listbox中的选项成一个数组）选中的那一项在数组中的索引号（没选中则显示-1）
}
</script>
</head>
<body>
<form action="#" method="post">
<select id="selListbox" size="2"> <!--<select>中的size属性指示的是用户能看见的选项数目-->
<option>Original Value0</option>
<option>Original Value1</option>
<option>Original Value2</option>
<option>Original Value3</option>
<option>Original Value4</option>
</select><br />
Select an option in the listbox and click "Show Selected Index".<br />
<input type="button" value="Show Selected Index" onclick="showSelectedIndex()" />
</form>
</body>
</html>

例子添加options
复制代码 代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript" src="javascript/listutil.js"></script> //外置JS脚本下面有
<script language="javascript" type="text/javascript">
function addItem()
{
var oListbox=document.getElementById("selListbox");
var oTxtName=document.getElementById("txtName");
var oTxtValue=document.getElementById("txtValue");
ListUtil.add(oListbox,oTxtName.value,oTxtValue.value);
}
</script>
</head>
<body>
<form action="#">
<select id="selListbox" size="1">
<option>Original Value</option>
</select><br />
Click the Add button to add item with the following information:<br />
Name:<input type="text" id="txtName" /><br />
Value:<input type="text" id="txtValue" /><br />
<input type="button" value="Add" onclick="addItem()" />
</form>
</body>
</html>

例子（一键式为所有超级链接添加onclick事件，跨窗体传递超链接内容）
复制代码 代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript">
function confirmclick()
{
return confirm("Do you really want to visit"+location.href+"?");
}
function confirmAllLinks()
{
for(var i=0;i<document.links.length;i++) //document.links 为此项目的所有超级链接
{
document.links[i].onclick=confirmclick; //为所有的超级链接添加onclick事件
}
}
// window.onload=confirmAllLinks; //在窗体加载时就直接执行该函数
function listlinks(d)
{
var newwin=window.open("","linklist","menubar,scrollbars,resizable,width=600,height=300");
for(var i=0;i<d.links.length;i++)
{
newwin.document.write('<a href="'+d.links[i].href+'">'); //注意<a 中的格式‘'
newwin.document.write(d.links[i].href);
newwin.document.writeln("</a><br />");
}
}
</script>
</head>
<body>
<input type="button" onclick="alert(typeof this.onclick)" value="click me" />
<input type="button" value="Click Here" onclick="if(window.numclicks)numclicks++;else numclicks=1;this.value='Click #'+numclicks;" />
<a href="../js07/test1.htm">mattlee</a>
<a href="../js07/test2.htm">marssion</a>
<input type="button" value="link event" onclick="confirmAllLinks()" />
<input type="button" value="link event" onclick="listlinks(document)" />
</body>
</html>

例子（在文本框中只能输入数字键）
复制代码 代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script type="text/javascript" language="javascript" src="javascript/detect.js"></script> //验证浏览器的内容，在jS第五章中有
<script type="text/javascript" language="javascript" src="javascript/eventutil.js"></script>
<script type="text/javascript" language="javascript" src="javascript/textutil.js"></script>
</head>
<body>
<p>Try typing in the textbox. You can only type number characters.</p>
<!--要在keypress事件处理函数中调用这个方法，当字符被允许时返回true，不允许时返回false-->
<form method="post" action="javascript:alert('submitted')">
<textarea rows="10" cols="25" validchars="0123456789d" onkeypress="return TextUtil.allowChars(this,event,false)"></textarea>
<input type="submit" value="Submit Form" /> <!--↑-->
</form> <!--this:返回<textarea>对象本身； event:系统自动生成的事件直接打上去就行，boolean值：true：屏蔽ctrl+v false:可以用ctrl+v
这种阻止复制粘贴的方法只适用于火狐，在IE中用“onpaste="return false"”加在<>中就可以了-->
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------------
src="javascript/textutil.js"中的内容：
var TextUtil=new Object();
TextUtil.isNotMax=function(oTextArea)//判断文本框内的内容的长度是否于文本框的最大长度相等
{
return oTextArea.value.length!=oTextArea.getAttribute("maxlength");
};
TextUtil.blockChars = function(oTextbox, oEvent, bBlockPaste)//阻止数字字符
{
oEvent = EventUtil.formatEvent(oEvent); //格式化事件
var sInvalidChars = oTextbox.getAttribute("invalidchars"); //获取元素的validchars属性值，相当于验证字符串
var sChar = String.fromCharCode(oEvent.charCode); //获取键盘录入的数据
var bIsValidChar = sInvalidChars.indexOf(sChar) == -1; //录入的数据不包含在验证字符串中返回true
if (bBlockPaste) {
return bIsValidChar && !(oEvent.ctrlKey && sChar == "v"); //不支持IE,IE通过onpaste事件控制
}
else {
return bIsValidChar || oEvent.ctrlKey;
}
};
TextUtil.allowChars = function(oTextbox, oEvent, bBlockPaste)//允许数字字符
{
oEvent = EventUtil.formatEvent(oEvent); //格式化事件
var sValidChars = oTextbox.getAttribute("validchars"); //获取元素的validchars属性值，相当于验证字符串
var sChar = String.fromCharCode(oEvent.charCode); //获取键盘录入的数据
var bIsValidChar = sValidChars.indexOf(sChar) > -1; //录入的数据包含在验证字符串中返回true
if (bBlockPaste) {
return bIsValidChar && !(oEvent.ctrlKey && sChar == "v"); //阻止粘贴快捷键ctrl+v
}
else {
return bIsValidChar || oEvent.ctrlKey;
}
};
TextUtil.blurBlock = function(oTextbox) {
var sInvalidChars = oTextbox.getAttribute("invalidchars"); //获取元素的validchars属性值，相当于验证字符串
var arrInvalidChars = sInvalidChars.split("");//将验证字符串分隔为字符数组
for (var i = 0; i < arrInvalidChars.length; i++) {
if (oTextbox.value.indexOf(arrInvalidChars[i]) > -1) {//如果文本框的值包含数组中的任意字符，则验证不通过
alert("Character'" + arrInvalidChars[i] + "' not allowed.");
oTextbox.focus();
oTextbox.select();
return;
}
}
};
TextUtil.blurAllow=function(oTextbox)
{
var sValidChars=oTextbox.getAttribute("validchars");
var arrTextChars=oTextbox.value.split("");
for(var i=0;i<arrTextChars.length;i++)
{
if(sValidChars.indexOf(arrTextChars[i])==-1)
{
alert("Character '"+arrTextChars[i]+"' not allowed.");
}
}
};
TextUtil.numericScroll=function(oTextbox,oEvent)
{
oEvent=EventUtil.formatEvent(oEvent);
var iValue=oTextbox.value.length==0?0:parseInt(oTextbox.value);//获取文本框中的值，如果没填采用默认值0
var iMax=oTextbox.getAttribute("max");//获取最大值
var iMin=oTextbox.getAttribute("min");//获取最小值
if(oEvent.keyCode==38)//上箭头
{
if(iMax==null || iValue<iMax)
{
oTextbox.value=(iValue+1);
}
}
else if(oEvent.keyCode==40)//下箭头
{
if(iMin==null || iValue>iMin)
{
oTextbox.value=(iValue-1);
}
}
};
TextUtil.autosuggestMatch=function(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]);
}
}
}
return arrResult;
};
TextUtil.autosuggest=function(oTextbox,arrValues,sListboxId)
{
var oListbox=document.getElementById(sListboxId);//通过传入ID 获取指定列表框
var arrMatches=TextUtil.autosuggestMatch(oTextbox.value,arrValues);
ListUtil.clear(oListbox);//清空列表框
for(var i=0;i<arrMatches.length;i++)
{
ListUtil.add(oListbox,arrMatches[i]);//将匹配的值填入列表框
}
};
--------------------------------------------------------------------------------------------------------------------------
src="javascript/eventutil.js"中的内容：
var EventUtil=new Object;
EventUtil.addEventHandler=function(oTarget,sEventType,fnHandler){
if(oTarget.addEventListener)
{
oTarget.addEventListener(sEventType,fnHandler,false);
}
else if(oTarget.attachEvent)
{
oTarget.attachEvent("on"+sEventType,fnHandler);
}
else
{
oTarget["on"+sEventType]=fnHandler;
}
};
EventUtil.removeEventHandler=function(oTarget,sEventType,fnHandler){
if(oTarget.removeEventHandler)
{
oTarget.removeEventHandler(sEventType,fnHandler,false);
}
else if(oTarget.detachEvent)
{
oTarget.detachEvent("on"+sEventType,fnHandler);
}
else
{
oTarget["on"+sEventType]=null;
}
};
//通过格式化事件函数，尽量将IE标准向DOM标准靠拢
EventUtil.formatEvent=function(oEvent){
if(isIE && isWin)
{
oEvent.charCode=(oEvent.type=="keypress")?oEvent.keyCode:0;//DOM有charCode IE有keyCode 使用这样的方式使IE兼容DOM
//eventPhase 属性返回事件传播的当前阶段。它的值是Event.CAPTURING_PHASE(1) Event.AT_TARGET(2) Event.BUBBLING_PHASE(3)三个常量之一，它们分别表示捕获阶段、正常事件派发和起泡阶段。
oEvent.eventPhase=2;
oEvent.isChar=(oEvent.charCode>0);
oEvent.pageX=oEvent.clientX+document.body.scrollLeft;
oEvent.pageY=oEvent.clientY+document.body.scrollTop;
oEvent.preventDefault=function(){//取消事件的默认动作。
this.returnValue=false;
};
if(oEvent.type=="mouseout")
{
oEvent.relatedTarget=oEvent.toElement;
}
else if(oEvent.type=="mouseover")
{
oEvent.relatedTarget=oEvent.fromElement;
}
oEvent.stopPropagation=function(){
this.cancelBubble=true;
};
oEvent.target=oEvent.srcElement;
oEvent.time=(new Date).getTime();
};
return oEvent;
};
EventUtil.getEvent=function(){
if(window.event)
{
return this.formatEvent(window.event);
}
else
{
return EventUtil.getEvent.caller.arguments[0];
}
};

例子（自动查找，就像手机中的通讯录）
复制代码 代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript" src="javascript/listutil.js"></script>
<script language="javascript" type="text/javascript" src="javascript/textutil.js"></script> //上面有
<script language="javascript" type="text/javascript">
var arrColors=["red", "orange", "yellow", "green", "blue", "indigo",
"violet", "brown", "black", "tan", "ivory", "navy",
"aqua", "white", "purple", "pink", "gray", "silver"];
arrColors.sort(); //对上述数组进行排序
function setText(oListbox,sTextboxID)
{
var oTextbox=document.getElementById(sTextboxID);
if(oListbox.selectedIndex>-1)
{
oTextbox.value=oListbox.options[oListbox.selectedIndex].text; //options:下拉列表框中的元素的集合，通过元素的索引号进行访问
}
}
</script>
</head>
<body>
<p>Type in a color in lowercase:</p>
<input type="text" id="txtColor" onkeyup="TextUtil.autosuggest(this,arrColors,'lstColors')" /><br /><br />
<!-- ↑
this:将文本框自己传过去；arrColors:将要从中查找的总数组传过去；'lstColors'(注意加‘'传入对象的id名时加‘'
为的是不将传入得东西当成一个对象而是仅仅当成一个字符串，为后面在函数中用此字符串当id号找对象做准备)将要查出的文本的现实地点传过去-->
<select id="lstColors" size="5" style="width:200px" onclick="setText(this,'txtColor')"></select>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------------
src="javascript/listutil.js"中的内容：
var ListUtil=new Object();
ListUtil.getSelectedIndexes=function(oListbox)
{
var arrIndexes=new Array();
for(var i=0;i<oListbox.options.length;i++)
{
if(oListbox.options[i].selected)//获取选中项的索引
{
arrIndexes.push(i);
}
}
return arrIndexes;
};
ListUtil.add=function(oListbox,sName,sValue)
{
var oOption=document.createElement("option");
oOption.appendChild(document.createTextNode(sName));
if(arguments.length==3)//如果传入了第三个参数，则添加属性
{
oOption.setAttribute("value",sValue);
}
oListbox.appendChild(oOption);
};
ListUtil.remove=function(oListbox,iIndex)//通过索引删除项
{
oListbox.remove(iIndex); //oListbox.remove硬打上去的
};
ListUtil.clear=function(oListbox)//清空列表框
{
for(var i=oListbox.options.length-1;i>=0;i--) {
ListUtil.remove(oListbox,i);
}
};
ListUtil.move=function(oListboxFrom,oListboxTo,index)
{
var oOption=oListboxFrom.options[index];
if(oOption!=null)
{
oListboxTo.appendChild(oOption);//元素节点同时只能属于一个父节点，所以实现了移动
}
};
ListUtil.copy=function(oListboxFrom,oListboxTo,index)
{
var oOption=oListboxFrom.options[index];//获取原节点元素，并且创建新的元素几点，从原节点取值
var newOption=document.createElement("option");
var newTxtNode=document.createTextNode(oOption.firstChild.nodeValue);
newOption.appendChild(newTxtNode);
if(newOption!=null)
{
oListboxTo.appendChild(newOption);
}
}
ListUtil.shiftUp=function(oListbox,index)//选项向上移动
{
if(index>0)
{
var oOption=oListbox.options[index];//获取当前项
var oPrevOption=oListbox.options[index-1];//获取上一项
oListbox.insertBefore(oOption,oPrevOption);
}
};
ListUtil.shiftDown=function(oListbox,index)
{
if(index<oListbox.options.length-1)
{
var oOption = oListbox.options[index]; //获取当前项
var oNextOption=oListbox.options[index+1];//获取下一项
oListbox.insertBefore(oNextOption,oOption);
}
};

例子（禁止输入数字）
复制代码 代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript" src="javascript/detect.js"></script> // 脚本上面都有Copy下来看
<script language="javascript" type="text/javascript" src="javascript/eventutil.js"></script>
<script language="javascript" type="text/javascript" src="javascript/textutil.js"></script>
</head>
<body>
<p>Try typing in the textbox.You can only type non-number characters.</p>
<form method="post" action="javascript:alert('submitted')">
<textarea rows="10" cols="25" invalidchars="0123456789" onkeypress="return TextUtil.blockChars(this,event,true)"></textarea>
<input type="submit" value="Submit Form" />
</form>
</body>
</html>

例子（一个复杂的例子，关于可以将已经选定的文本框和单选按钮的值总结并显示出来）
复制代码 代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript">
var radCPUSpeedIndex=0;
function radCPUSpeed_onclick(radIndex)
{
var returnValue=true;
if(radIndex==1)
{
returnValue=false;
alert("Sorry that processor speed is currently unavailible");
document.forms[0].radCPUSpeed[radCPUSpeedIndex].checked=true;
}
else
{
radCPUSpeedIndex=radIndex;
}
return returnValue;
}
function butCheck_onclick()
{
var controlIndex;
var element;//debugger
var numberOfControls=document.forms[0].length; //document.forms[0]表示的是第一张表单中命了名的元素的集合
var compSpec="Your chosen processor speed is ";
compSpec=compSpec+document.forms[0].radCPUSpeed[radCPUSpeedIndex].value; //forms[0].radCPUSpeed[radCPUSpeedIndex] 在上一个函数（在选择单选按钮时已经触发）已经将选定的数组索引赋值了
compSpec=compSpec+"\nWith the following additional components\n";
for(controlIndex=0;controlIndex<numberOfControls;controlIndex++)
{
element=document.forms[0][controlIndex];
if(element.type=="checkbox")
{
if(element.checked==true)
{
compSpec=compSpec+element.value+"\n";
}
}
}
alert(compSpec);
}
</script>
</head>
<body>
<form action="javascript:alert('Submit')" method="post">
<p>Tick all of the components you want included on your coumputer</p>
<table border="1">
<tr>
<td>DVD-RW</td>
<td><input type="checkbox" name="chkDVD" value="DVD-RW" /></td>
</tr>
<tr>
<td>CD-ROM</td>
<td><input type="checkbox" name="chkCD" value="CD-ROM" /></td>
</tr>
<tr>
<td>Zip Drive</td>
<td><input type="checkbox" name="chkZip" value="ZIP Drive" /></td>
</tr>
</table>
<p>Select the processor speed you require</p>
<table border="1">
<tr>
<td><input type="radio" name="radCPUSpeed" checked="checked" onclick="return radCPUSpeed_onclick(0)" value="3.8 Ghz" /></td>
<td>3.8 Ghz MHz</td>
<td><input type="radio" name="radCPUSpeed" onclick="return radCPUSpeed_onclick(1)" value="4.8 Ghz" /></td>
<td>4.8 Ghz MHz</td>
<td><input type="radio" name="radCPUSpeed" onclick="return radCPUSpeed_onclick(2)" value="6 Ghz" /></td>
<td>6 Ghz MHz</td>
</tr>
</table>
<input type="button" value="Check Form" name="butCheck" onclick="return butCheck_onclick()" />
</form>
</body>
</html>

例子（不同父节点之间的子节点的移动和删除）
复制代码 代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript" src="javascript/listutil.js"></script> //脚本上面有
<script language="javascript" type="text/javascript">
function moveItem()
{
var oListbox1=document.getElementById("selListbox1");
var oListbox2=document.getElementById("selListbox2");
var oTxtIndex=document.getElementById("txtIndex");
ListUtil.move(oListbox1,oListbox2,parseInt(oTxtIndex.value)); //
}
function copyItem()
{
var oListbox1=document.getElementById("selListbox1");
var oListbox2=document.getElementById("selListbox2");
var oTxtIndex=document.getElementById("txtIndex");
ListUtil.copy(oListbox1,oListbox2,parseInt(oTxtIndex.value));
}
</script>
</head>
<body>
<form action="#" method="post">
<select id="selListbox1" size="5">
<option>Original Value 1-0</option>
<option>Original Value 1-1</option>
<option>Original Value 1-2</option>
<option>Original Value 1-3</option>
<option>Original Value 1-4</option>
</select>
<select id="selListbox2" size="5">
<option>Original Value 2-0</option>
<option>Original Value 2-1</option>
<option>Original Value 2-2</option>
<option>Original Value 2-3</option>
<option>Original Value 2-4</option>
</select>
<p>Clice the Move button to move the item with this position:</p>
<input type="text" id="txtIndex" /><br />
<input type="button" value="Move" onclick="moveItem()" />
<input type="button" value="Copy" onclick="copyItem()" />
</form>
</body>
</html>

例子（限制多行文本框的输入最大值）
复制代码 代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript" src="javascript/textutil.js"></script>
</head>
<body>
<p>Try typing in the textbox. You can only type 25 characters.</p>
<form method="post" action="javascript:alert('Submitted')">
<textarea rows="10" cols="20" maxlength="25" onkeypress="return TextUtil.isNotMax(this)"></textarea>
<input type="submit" value="Submit Form" />
</form>
</body>
</html>
--------------------------------------------------------------------------
外置脚本中的调用的方法：
TextUtil.isNotMax=function(oTextArea)//判断文本框内的内容的长度是否于文本框的最大长度相等
{
return oTextArea.value.length!=oTextArea.getAttribute("maxlength");
};

例子（三个文本框，输入达到第一个文本框的最大值，光标自动移到下一个文本框...）
复制代码 代码如下:

html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script type="text/javascript" language="javascript" src="javascript/formutil.js"></script>
</head>
<body>
<p>Enter your phone number below (ZH style ##-####-######):</p>
<form method="post" action="javascript:alert('submit')">
<input type="text" size="2" maxlength="2" value="" onkeyup="FormUtil.tabForward(this)" />
<input type="text" size="4" maxlength="4" value="" onkeyup="FormUtil.tabForward(this)" />
<input type="text" size="7" maxlength="7" value="" onkeyup="FormUtil.tabForward(this)" />
<input type="submit" value="Submit Form" />
</form>
</body>
</html>
-------------------------------------------------------------------------------------
src="javascript/formutil.js"中的文本：
var FormUtil=new Object;
FormUtil.focusOnFirst = function() {
if (document.forms.length > 0) {//通过form的length属性判断表单中是否有其他元素
for (var i = 0; i < document.forms[0].elements.length; i++) {
var oField = document.forms[0].elements[i];
if (oField.type != "hidden") {
if (oField.value == "") {//在页面载入很慢的情况下，该脚本可能还没有运行，用户就已经输入了数据，当执行到该脚本的时候，会给用户带来不便。
oField.focus();
return;
}
}
}
}
};
FormUtil.setTextboxes=function()
{
var colInputs=document.getElementByTagName("input");
var colTextAreas=document.getElementsByTagName("textarea");
for(var i=0;i<colInputs.length;i++)
{
if(colInputs[i].type=="text" || colInputs[i].type=="password")
{
colInputsp[i].onfocus=function(){this.select();};
}
}
for(var i=0;i<colTextAreas.length;i++)
{
colTextAreas[i].onfocus=function(){this.select();};
}
};
FormUtil.tabForward = function(oTextbox) {
var oForm = oTextbox.form;
//条件为最后一个元素不是文本框并且文本框值的长度和文本框最大长度相等时
if (oForm.elements[oForm.elements.length - 1] != oTextbox && oTextbox.value.length == oTextbox.maxLength) { //oForm.elements[oForm.elements.length - 1] != oTextbox判断当前传进来的文本框不是最后一个文本框
for (var i = 0; i < oForm.elements.length; i++) { //oTextbox.value.length == oTextbox.maxLength 判断当前输入的文本有没有达到它的最大值
if (oForm.elements[i] == oTextbox) {
if (oForm.elements[i + 1].type != "hidden") {
oForm.elements[i + 1].focus();
return;
}
return;
}
}
}
};

例子（当焦点离开时验证文本框中的内容）
复制代码 代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript" src="javascript/detect.js"></script>
<script language="javascript" type="text/javascript" src="javascript/eventutil.js"></script>
<script language="javascript" type="text/javascript" src="javascript/textutil.js"></script>
</head>
<body>
<p>Type a number into the textbox,then press the up or down arrow.</p>
<form method="post" action="javascript:alert('submit')">
<input type="text" onkeypress="return TextUtil.allowChars(this,event)" max="20" min="-10" validchars="0123456789" onblur="TextUtil.blurAllow(this)"
onkeydown="TextUtil.numericScroll(this,event)" />
<input type="button" value="Submit Form" />
</form>
</body>
</html>
--------------------------------
js：
TextUtil.blurBlock = function(oTextbox) {
var sInvalidChars = oTextbox.getAttribute("invalidchars"); //获取元素的validchars属性值，相当于验证字符串
var arrInvalidChars = sInvalidChars.split("");//将验证字符串分隔为字符数组
for (var i = 0; i < arrInvalidChars.length; i++) {
if (oTextbox.value.indexOf(arrInvalidChars[i]) > -1) {//如果文本框的值包含数组中的任意字符，则验证不通过
alert("Character'" + arrInvalidChars[i] + "' not allowed.");
return; //跳出
}
}
};

JS 第七章 ：COOKIE操作与样式表编程↑↓←→
//Cookie简介
{
cookie是网站放在用户计算机上的一小块信息，分为： //例如： 手机QQ上的登录，点击记住用户名密码，下次就不同输入了，这就是Cookie做的
复制代码 代码如下:

1、存入计算机内存（临时cookie）
2、写入文件（持久cookies）

路径 ：C:\Documents and Settings\Administrator\Cookies
}
//Cookie的组成：
复制代码 代码如下:

1.名称：每一个cookie由一个唯一的名称代表，不区分大小写
2、值： 保存在Cookie中的字符串值，长度小于4KB
3、域： 出于安全考虑，网站不能访问由其他域创建的cookie
4、路径 ：限制了对web服务器上的特定目录的访问
5、失效日期 ：cookie何时应该被删除
6、安全标志： 一个bool值，用于表示cookie是否只能从安全网站（使用SSL和Https协议）中访问

//安全限制
复制代码 代码如下:

1、每个域（每一个网站）最多只能在一台用户机器上存储20个cookie
2、每个cookie的尺寸不能超过4096字节
3、一台用户机器上的cookie总数不能超过300个
4、浏览器自身的安全机制: 阻止所有cookie、阻止未知网站的cookie或者创建cookie时给用户提示 （调试方法：工具→Internet选项→隐私→设置安全性级别）

//写入cookie
复制代码 代码如下:

cookie实际上是一个字符串，当页面载入时由浏览器自动生成。
通过document对象的cookie属性可以操作。
在cookie中，信息由分号隔开，通常每个cookie都包含了一对由等号分开的名字和值。
fur=blue; food=biscuits; name=Cookie_Monster

//cookie的写入有点类似于键值对的形式
例子（cookieWrite）(设置cookie的过期时间（过期时间被添加到cookie的末尾）)
复制代码 代码如下:

src="javascript/cookieWrite.js"中的内容：
var myCookie=new Object();
myCookie.writeCookie = function(isLogin, isExpire)//isLogin表示登录成功 isExpire表示是临时还是持久cookie
{
var theCookie;
if (isLogin == true && isExpire == true) { //写入永久cookie 注意：当创建自己的cookie字符串时，一定要确保名字和值不包括空格、逗号或者分号。这些字符会在解析cookie字符串的时候造成错误
var date = new Date(Date.parse("May 1, 2010")); //Date.parse("日期") 是将一个日期转换为字符串
theCookie = "isLogin=marssion" + ";Expires=" + date.toGMTString(); //date.toGMTString()方法点不出来 ，是将时间进一步进行转换成（GMT（格林威治时间表示法））类型的字符串格式
document.cookie = theCookie; //Expires=拼成的一个字符串：表示的是过期时间，和前面的字符串用“；“隔开，理论上一个cookie只有一个等号（用户只能每次添加一个cookie，即使严格按照cookie串的格式将多个cookie拼接成一个大串，也无法将这个字符串加入到document.cookie中），加入过期时间是一个例外
location.href = "cookieRead.htm"; //点击后跳转到相应的页面
}
else if (isLogin == true && isExpire == false) { //写入临时cookie
theCookie = "isLogin=marssion";
document.cookie = theCookie;
location.href = "cookieRead.htm";
}
}
----------------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript" src="javascript/cookieWrite.js"></script>
<script language="javascript" type="text/javascript">
function CheckLogin()
{
var myvalue=document.getElementById("userName");
var pwd=document.getElementById("password");
if(myvalue.value=="marssion" && pwd.value=="1234") {
WriteCookie(true);//true表示用户名密码正确，登录成功
return true;
}
else
{
alert("UserName or Password error!");
return false;
}
}
function WriteCookie(islogin)
{
var myCheckBox=document.getElementById("remember");
if(myCheckBox.checked==true)
{
myCookie.writeCookie(islogin,true);//写入持久cookie
}
else
{
myCookie.writeCookie(islogin,false);//写入临时cookie
}
}
</script>
</head>
<body>
<h1>Writing Cookies</h1>
<h2>Look for the cookie in your cookie folder</h2>
<h3>Location:"C:\Documents and Settings\[UserName]\Cookies"</h3>
<form>
UserName:<br /><input type="text" id="userName" /><br />
Password:<br /><input type="password" id="password" /><br /><br />
<input type="button" value="Submit" onclick="if(CheckLogin()==false) return false" />
<input type="reset" value="Reset" /><br />
Remember Me<input id="remember" type="checkbox" checked="checked" value="NoExpire" />
</form>
</body>
</html>

例子（cookieRead）
复制代码 代码如下:

src="javascript/cookieRead.js"中的内容：
var myCookie=new Object();
myCookie.getCookie = function(searchName)
{
var cookies=document.cookie.split(";");//cookie里的字符串是用“；”分隔开的
for(var i=0;i<cookies.length;i++)
{
var cookiecrumbs=cookies[i].split("="); //在把取出的字符串用“=”分隔开
var cookiename=cookiecrumbs[0];
var cookievalue=cookiecrumbs[1];
if(cookiename==searchName)
{
return cookievalue; //将找到得相应的name的值返回去，每个cookie都有一个相应的txt文档，我们只需要将相应的cookie名字给出，在存放cookie的txt文件夹里有一个dat数据库文件，它会自动找到相应的txt文档
}
}
return false;
}
-----------------------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript" src="javascript/cookieRead.js"></script>
<script language="javascript" type="text/javascript">
function load()
{
var isLogin=myCookie.getCookie("isLogin");
if (isLogin == "marssion")
{
document.write("登陆成功。欢迎你！");
}
else
{
location.href="cookieWrite.htm";
}
}
</script>
</head>
<body onload="load()">
</body>
</html>

例子（页面上的超级链接鼠标移上去的时候下划线变为上划线）
复制代码 代码如下:

addLoadListener(init);
function init()
{
if(typeof document.styleSheets!="undefined") //document.styleSheets :当前引用的所有样式
{
addStyleRule(document.styleSheets[0],"a:hover","text-decoration:overline"); //需要引用<link rel="Stylesheet" type="text/css" href="aa1.css" />
}
return true;
}
function addStyleRule(styleSheet,selector,properties,index)
{
if(typeof styleSheet.addRule!="undefined")
{
styleSheet.addRule(selector,properties,index);
}
else if(typeof styleSheet.insertRule!="undefined")
{
if(typeof index=="undefined")
{
index=styleSheet.cssRules.length;
}
styleSheet.insertRule(selector+"{"+properties+"}",index);
}
return true;
}
function addLoadListener(fn)
{
if (typeof window.addEventListener != 'undefined')
{
window.addEventListener('load', fn, false);
}
else if (typeof document.addEventListener != 'undefined')
{
document.addEventListener('load', fn, false);
}
else if (typeof window.attachEvent != 'undefined')
{
window.attachEvent('onload', fn);
}
else
{
var oldfn = window.onload;
if (typeof window.onload != 'function')
{
window.onload = fn;
}
else
{
window.onload = function()
{
oldfn();
fn();
};
}
}
}

//读取Cookie中Value的某个值
复制代码 代码如下:

下面为外置JS文件中的内容：
---
var cookieName = "monsterCookie";
var cookieValue = "fur:blue/food:biscuits/name:monsterCookie";
debugger;
cookieValue=escape(cookieValue);//对cookie值进行编码
var theCookie = cookieName + "=" + cookieValue;
document.cookie=theCookie;
var monsterName = getSubCookie("monsterCookie", "name");
alert("The value of the sub-cookie 'name' is :"+monsterName);
function getSubCookie(cookieName,subCookieName) {
var cookies=document.cookie.split(";"); //先用分号进行拆分
for(var i=0;i<cookies.length;i++)
{
var cookieCrumbs=cookies[i].split("="); //再用等号进行拆分
if(cookieCrumbs[0]==cookieName) //如果cookieCrumbs[0](拆分出的名字)等于传入的名字
{
var cookieValue=cookieCrumbs[1]; //获得所需要的值
cookieValue = unescape(cookieValue); //对cookie值进行解码
var subCookies=cookieValue.split("/");
for(var j=0;j<subCookies.length;j++)
{
var subCookieCrumbs=subCookies[j].split(":");
if(subCookieCrumbs[0]==subCookieName)
{
return subCookieCrumbs[1];
}
}
}
}
return false;
}

-------------------------------------------------------------------------
//样式：
//访问样式
复制代码 代码如下:

使用style对象需要注意几个问题。
样式设置必须符合CSS规范。
如果样式属性名称中带“-”号，首字母大些。
保留字，不能用作属性名称。
使用style对象获取的属性与元素最终显示效果并不一定相同，因为除了内联样式声明之外，还可以通过<style>元素以及链接样式表的方式改变元素的显示效果

例子（关于style属性值的拼写，和在IE火狐中的区别）
复制代码 代码如下:

<html>
<head>
<title>Style Example</title>
<script type="text/javascript">
function sayStyle() {
var oDiv = document.getElementById("div1");
//alert(oDiv.style.cssFloat); //火狐 ：css+...
alert(oDiv.style.styleFloat); //IE：style+...
//alert(oDiv.style.backgroundColor);//将‘-'去掉，将后一个单词首字母大写
}
</script>
</head>
<body>
<div id="div1" style="background-color: red; height: 50px; width:
50px;float:left"></div><br />
<input type="button" value="Get Background Color" onclick="sayStyle()" />
</body>
</html>

例子（变换层的颜色）
复制代码 代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script type="text/javascript" language="javascript">
function aa()
{
var cr=document.getElementById("div1");
cr.style.backgroundColor='orange';
}
function bb()
{
var cr=document.getElementById("div1");
cr.style.backgroundColor="blue";
}
function cc()
{
var cr=document.getElementById("div1");
var cc=cr.style.backgroundColor.toString(); //必须去对象，用this报错
alert(cc);
}
</script>
</head>
<body>
<div id="div1" style=" background-color:Red; height:50px; width:50px;" onmouseover="aa()" onmouseout="bb()"></div>
<input type="button" value="Get Background Color" onclick="cc()" />
</body>
</html>
-----------------------------------------------------
或者上面等价于：
<html>
<head>
<title>Style Example</title>
<script type="text/javascript">
function sayStyle() {
var oDiv = document.getElementById("div1");
alert(oDiv.style.backgroundColor);
}
</script>
</head>
<body>
<div id="div1"
style="background-color: red; height: 50px; width: 50px"
onmouseover="this.style.backgroundColor= 'blue'"
onmouseout="this.style.backgroundColor = 'green'"></div>
<input type="button" value="Get Background Color" onclick="sayStyle()" />
</body>
</html>

例子（将样式文本输出）
复制代码 代码如下:

<html>
<head>
<title>Style Example</title>
</head>
<body>
<div id="div1"
style="background-color: red; height: 50px; width: 50px"
onclick="alert(this.style.cssText)"></div> //this.style.cssText : background-color: red; height: 50px; width: 50px
</body>
</html>

//通过Style对象读取单个样式的方法
复制代码 代码如下:

getPropertyPriority() 如果css属性“important”定义在规则中则返回important，否则将返回空字符串
Item(index) 按照序号来返回css属性中的名字
removeProperty(propertyName) 从css定义中删除属性
setProperty(propertyName,value,priority) 给css设置属性

例子（属性的设置和移除（火狐能用））
复制代码 代码如下:

<html>
<head>
<title>Style Example</title>
<script type="text/javascript">
function useMethods() {
var oDiv = document.getElementById("div1");
// IE不支持以下属性和方法
alert(oDiv.style.item(0)); //outputs “background-color"
alert(oDiv.style.getPropertyValue("background-color")); //得到当前的background-color值
alert(oDiv.style.removeProperty("background-color")); //将background-color属性移除
}
</script>
</head>
<body>
<div id="div1" style="background-color: red; height: 50px; width:50px"
onmousemove="this.style.setProperty('background-color','blue','')" <!--setProperty("样式名（css格式）","样式值","给空就行了")-->
onmouseout="this.style.setProperty('background-color','red','')"></div><br />
<input type="button" value="Use Methods" onclick="useMethods()" />
</body>
</html>

例子（动态改变字体的大小，用三元运算符使IE和火狐兼容）
复制代码 代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test</title>
<!--<link rel="Stylesheet" type="text/css" href="css/a.css" />-->
<style type="text/css">
* { //*{} 应用所有
font-family: Tahoma, Arial, serif; //.div{} （class选择器 应用所有的层）
font-size: 18pt; //#id名{} (ID选择器)
text-align: left;
}
.div {
font-size: 30px;
color: #FF4500;
}
</style> <!-- *{} 这是一个样式规则--> <!-- .div{} 这是一个样式规则-->
<script language="javascript" type="text/javascript">
var tag=false;
function change() {
// CSS样式规则的集合
// 样式规则
// ↓
var cssRules = document.styleSheets[0].rules ? document.styleSheets[0].rules : document.styleSheets[0].cssRules; //此处三元运算符的作用是：让IE和火狐都能用 // 修改.div样式规则中的font-size样式
// ↑ ↑
// 当前引用的所有样式 三元运算符如果？前的结果返回的是true就执行：前的返回的是false就执行：后的
if(tag==false)
{
cssRules[1].style.fontSize = "60px";
tag=true;
}
else{
cssRules[1].style.fontSize = "30px";
tag=false;
}
}
</script>
</head>
<body>
<div id="div1" class="div">msg</div>
<div id="div2" class="div">msg</div>
<div id="div3" class="div">msg</div>
<button onclick="change()">change</button>
</body>
</html>

例子（切换样式表1）
复制代码 代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test</title>
<link id="style1" type="text/css" rel="stylesheet" href="css/style1.css"title="white" />
<link id="style2" type="text/css" rel="stylesheet" href="css/style2.css" title="gray" />
<script language="javascript" type="text/javascript">
getElement("style1").href = "";
getElement("style2").href = "";
function setStyle(title,sa) {
// 首先禁用所有的样式表
getElement("style1").href = "";
getElement("style2").href = "";
// 启用指定的样式表
getElement(title).href = sa;
}
function getElement(id) {
return document.getElementById(id);
}
</script>
</head>
<body>
<div>
<p>
We would like to see as much CSS1 as possible.
</p>
<p>
If your design doesn't work in at least IE5+/Win and Mozilla (run
by over 90% of the population), chances are we won't accept it.
</p>
</div>
<button onclick="setStyle('style1','css/style1.css')">white</button>
<button onclick="setStyle('style2','css/style2.css')">gray</button>
</body>
</html>

例子（切换样式表2）
复制代码 代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test</title>
<link type="text/css" rel="stylesheet" href="css/style1.css" title="白色风格" id="style1" />
<link type="text/css" rel="stylesheet" href="css/style2.css" title="灰色风格" id="style2" />
<script language="javascript" type="text/javascript">
function setStyle() {
var option1 = document.getElementById("option1");
var option2 = document.getElementById("option2");
var style1 = document.getElementById(option1.value);
var style2 = document.getElementById(option2.value);
// 首先禁用所有的样式表
style1.disabled = true;
style2.disabled = true;
// 启用指定的样式表
if (option1.selected) {
style1.disabled = false;
}
else {
style2.disabled = false;
}
}
</script>
</head>
<body>
<select id="styleSel" onchange="setStyle()">
<option value="style1" id="option1">白色风格</option>
<option value="style2" id="option2">灰色风格</option>
</select>
<div>
<p>
We would like to see as much CSS1 as possible.
</p>
<p>
If your design doesn't work in at least IE5+/Win and Mozilla (run
by over 90% of the population), chances are we won't accept it.
</p>
</div>
</body>
</html>

例子（点击层显示，点击层隐藏）
复制代码 代码如下:

<html>
<head>
<title>Style Example</title>
<script type="text/javascript">
function toggle(sDivId) {
var oDiv = document.getElementById(sDivId);
oDiv.style.display = (oDiv.style.display == "none") ? "block" : //对象.style.display 显示状态：取值范围： "none(不显示)" "block(显示)"
"none";
}
</script>
</head>
<body>
<div style="background-color: blue; color: white; font-weight: bold;
padding: 10px; cursor: pointer"
onclick="toggle('divContent1')">Click Here</div>
<div style="border: 3px solid blue; height: 100px; padding: 10px"
id="divContent1">This is some content
to show and hide.</div>
<p>&nbsp;</p>
<div style="background-color: blue; color: white; font-weight: bold;
padding: 10px; cursor: pointer" <!-- cursor （指示鼠标的显示状态（pointer(手)））-->
onclick="toggle('divContent2')">Click Here</div>
<div style="border: 3px solid blue; height: 100px; padding: 10px"
id="divContent2">This is some content
to show and hide.</div>
</body>
</html>

例子（鼠标移上，显示层）
复制代码 代码如下:

<html>
<head>
<title>Style Example</title>
<script type="text/javascript">
function showTip(oEvent) {
var oDiv = document.getElementById("divTip1");
oDiv.style.visibility = "visible"; //对象.style.visibility 显示状态： 取值范围是："visible(显示)" "hidden(不显示)" 和display用法相同，只是取值范围不同
oDiv.style.left = oEvent.clientX + 5; //显示层的坐标（鼠标的横坐标+5）
oDiv.style.top = oEvent.clientY + 5; //显示层的坐标（鼠标的纵坐标+5）
}
function hideTip(oEvent) {
var oDiv = document.getElementById("divTip1");
oDiv.style.visibility = "hidden";
}
</script>
</head>
<body>
<p>Move your mouse over the red square.</p>
<div id="div1"
style="background-color: red; height: 50px; width: 50px"
onmouseover="showTip(event)" onmouseout="hideTip(event)"></div>
<div id="divTip1"
style="background-color: yellow; position: absolute; visibility:
hidden; padding: 5px">
<span style="font-weight: bold">Custom Tooltip</span><br />
More details can go here.
</div>
</body>
</html>

上一页123阅读全文
您可能感兴趣的文章:

相关文章

  • 浅谈JavaScript 覆盖原型以及更改原型

    浅谈JavaScript 覆盖原型以及更改原型

    下面小编就为大家带来一篇浅谈JavaScript 覆盖原型以及更改原型。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随过来看看吧
    2016-08-08
  • 微信小程序实现表单验证源码

    微信小程序实现表单验证源码

    这篇文章主要为大家详细介绍了微信小程序实现表单验证源码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 详解js中构造流程图的核心技术JsPlumb（2）

    详解js中构造流程图的核心技术JsPlumb（2）

    这篇文章主要介绍了js中构造流程图的核心技术JsPlumb，jsPlumb是一个强大的JavaScript连线库，它可以将html中的元素用箭头、曲线、直线等连接起来，适用于开发Web上的图表、建模工具等，需要的朋友可以参考下
    2015-12-12
  • javascript九宫格图片随机打乱位置的实现方法

    javascript九宫格图片随机打乱位置的实现方法

    这篇文章主要为大家详细介绍了javascript九宫格图片随机打乱位置的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 关于JavaScript中的this指向问题总结篇

    关于JavaScript中的this指向问题总结篇

    在小编面试过程中经常会遇到javascript中this指向问题，可以说是前端面试必问，下面小编给大家总结了一下js中this的指向，感兴趣的朋友一起学习吧
    2017-07-07
  • javascript获取作用在元素上面的样式属性代码

    javascript获取作用在元素上面的样式属性代码

    遍历所有样式属性，通过判断其属性值，是否为'undefined' 或特特的值，来过虑属性
    2012-09-09
  • 学习使用Bootstrap页面排版样式

    学习使用Bootstrap页面排版样式

    这篇文章主要教大家学习使用Bootstrap页面排版样式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • layui使用及简单的三级联动实现教程

    layui使用及简单的三级联动实现教程

    这篇文章主要给大家介绍了关于layui使用及简单的三级联动的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 基于JavaScript实现一个简单的Vue

    基于JavaScript实现一个简单的Vue

    这篇文章主要介绍了基于JavaScript实现一个简单的Vue的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • JavaScript的漂亮的代码片段

    JavaScript的漂亮的代码片段

    记录我看到之后，不得不赞的代码片段。本贴板内容将不断更新，欢迎关注
    2013-06-06

最新评论