Example (ListboxSelectedIndex)
Copy the codeThe code is as follows:
<html xmlns="http:///1999/xhtml">
<head>
<title>Unt title page</title>
<script language="javascript" type="text/javascript">
function showSelectedIndex()
{
var oListbox=("selListbox");
alert(); // It displays the index number of the selected item in the array (the option in the listbox is an array) (if it is not selected, it will be displayed -1)
}
</script>
</head>
<body>
<form action="#" method="post">
<select size="2"> <!-- The size attribute in <select> indicates the number of options that the user can see-->
<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>
Examples to add options
Copy the codeThe code is as follows:
<html xmlns="http:///1999/xhtml">
<head>
<title>Unt title page</title>
<script language="javascript" type="text/javascript" src="javascript/"></script> //There is below the external JS script
<script language="javascript" type="text/javascript">
function addItem()
{
var oListbox=("selListbox");
var oTxtName=("txtName");
var oTxtValue=("txtValue");
(oListbox,,);
}
</script>
</head>
<body>
<form action="#">
<select size="1">
<option>Original Value</option>
</select><br />
Click the Add button to add item with the following information:<br />
Name:<input type="text" /><br />
Value:<input type="text" /><br />
<input type="button" value="Add" onclick="addItem()" />
</form>
</body>
</html>
Example (Add onclick event for all hyperlinks in one click, passing hyperlink content across forms)
Copy the codeThe code is as follows:
<html xmlns="http:///1999/xhtml">
<head>
<title>Unt title page</title>
<script language="javascript" type="text/javascript">
function confirmclick()
{
return confirm("Do you really want to visit"++"?");
}
function confirmAllLinks()
{
for(var i=0;i<;i++) // All hyperlinks for this project
{
[i].onclick=confirmclick; //Add onclick event for all hyperlinks
}
}
// =confirmAllLinks; // Execute the function directly when the form is loaded
function listlinks(d)
{
var newwin=("","linklist","menubar,scrollbars,resizable,width=600,height=300");
for(var i=0;i<;i++)
{
('<a href="'+[i].href+'">'); //Note the format ‘' in <a
([i].href);
("</a><br />");
}
}
</script>
</head>
<body>
<input type="button" onclick="alert(typeof )" value="click me" />
<input type="button" value="Click Here" onclick="if()numclicks++;else numclicks=1;='Click #'+numclicks;" />
<a href="../js07/">mattlee</a>
<a href="../js07/">marssion</a>
<input type="button" value="link event" onclick="confirmAllLinks()" />
<input type="button" value="link event" onclick="listlinks(document)" />
</body>
</html>
Example (only enter numeric keys in the text box)
Copy the codeThe code is as follows:
<html xmlns="http:///1999/xhtml">
<head>
<title>Unt title page</title>
<script type="text/javascript" language="javascript" src="javascript/"></script> //Verify the content of the browser, in the fifth chapter of jS
<script type="text/javascript" language="javascript" src="javascript/"></script>
<script type="text/javascript" language="javascript" src="javascript/"></script>
</head>
<body>
<p>Try typing in the textbox. You can only type number characters.</p>
<!--To call this method in the keypress event handling function, return true when the character is allowed, and false when it is not allowed-->
<form method="post" action="javascript:alert('submitted')">
<textarea rows="10" cols="25" validchars="0123456789d" onkeypress="return (this,event,false)"></textarea>
<input type="submit" value="Submit Form" /> <!--↑-->
</form> <!--this: Return the <textarea> object itself; event: Just hit the event automatically generated by the system directly, boolean value: true: block ctrl+v false: ctrl+v can be used
This method to prevent copy and paste is only applicable to Firefox. In IE, just add "onpaste="return false"" to <>-->
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------------
Contents in src="javascript/":
var TextUtil=new Object();
=function(oTextArea)//Judge whether the length of the content in the text box is equal to the maximum length of the text box
{
return !=("maxlength");
};
= function(oTextbox, oEvent, bBlockPaste)//Block numeric characters
{
oEvent = (oEvent); //Format event
var sInvalidChars = ("invalidchars"); //Get the validchars attribute value of the element, which is equivalent to the verification string
var sChar = (); //Get the data entered by the keyboard
var bIsValidChar = (sChar) == -1; //The entered data is not included in the verification string and returns true
if (bBlockPaste) {
return bIsValidChar && !( && sChar == "v"); //IE is not supported, IE is controlled through onpaste event
}
else {
return bIsValidChar || ;
}
};
= function(oTextbox, oEvent, bBlockPaste)//Allow numeric characters
{
oEvent = (oEvent); //Format event
var sValidChars = ("validchars"); //Get the validchars attribute value of the element, which is equivalent to the verification string
var sChar = (); //Get the data entered by the keyboard
var bIsValidChar = (sChar) > -1; //The entered data is included in the verification string and returns true
if (bBlockPaste) {
return bIsValidChar && !( && sChar == "v"); //Stop pasting shortcut key ctrl+v
}
else {
return bIsValidChar || ;
}
};
= function(oTextbox) {
var sInvalidChars = ("invalidchars"); //Get the validchars attribute value of the element, which is equivalent to the verification string
var arrInvalidChars = ("");//Separate the verification string into a character array
for (var i = 0; i < ; i++) {
if ((arrInvalidChars[i]) > -1) {//If the value of the text box contains any character in the array, the verification will not be passed
alert("Character'" + arrInvalidChars[i] + "' not allowed.");
();
();
return;
}
}
};
=function(oTextbox)
{
var sValidChars=("validchars");
var arrTextChars=("");
for(var i=0;i<;i++)
{
if((arrTextChars[i])==-1)
{
alert("Character '"+arrTextChars[i]+"' not allowed.");
}
}
};
=function(oTextbox,oEvent)
{
oEvent=(oEvent);
var iValue===0?0:parseInt();//Get the value in the text box, if it is not filled in, the default value is 0
var iMax=("max");//Get the maximum value
var iMin=("min");//Get the minimum value
if(==38)//Up arrow
{
if(iMax==null || iValue<iMax)
{
=(iValue+1);
}
}
else if(==40)//Down arrow
{
if(iMin==null || iValue>iMin)
{
=(iValue-1);
}
}
};
=function(sText,arrValues)
{
var arrResult=new Array();
if(sText!="")
{
for(var i=0;i<;i++)
{
if(arrValues[i].indexOf(sText)==0)//See if the array contains incoming characters, and if the match is used, save the array element into the new array
{
(arrValues[i]);
}
}
}
return arrResult;
};
=function(oTextbox,arrValues,sListboxId)
{
var oListbox=(sListboxId);//Get the specified list box by passing in ID
var arrMatches=(,arrValues);
(oListbox);//Clear the list box
for(var i=0;i<;i++)
{
(oListbox,arrMatches[i]);//Fill the matching value into the list box
}
};
--------------------------------------------------------------------------------------------------------------------------
Contents in src="javascript/":
var EventUtil=new Object;
=function(oTarget,sEventType,fnHandler){
if()
{
(sEventType,fnHandler,false);
}
else if()
{
("on"+sEventType,fnHandler);
}
else
{
oTarget["on"+sEventType]=fnHandler;
}
};
=function(oTarget,sEventType,fnHandler){
if()
{
(sEventType,fnHandler,false);
}
else if()
{
("on"+sEventType,fnHandler);
}
else
{
oTarget["on"+sEventType]=null;
}
};
//Try to get closer to the IE standard to the DOM standard by formatting the event function
=function(oEvent){
if(isIE && isWin)
{
=(=="keypress")?:0;//DOM has charCode IE has keyCode Use this method to make IE compatible with DOM
//eventPhase property returns the current stage of event propagation. Its value is one of three constants Event.CAPTURING_PHASE(1) Event.AT_TARGET(2) Event.BUBBLING_PHASE(3) which represent the capture phase, the normal event dispatching and the bubble phase respectively.
=2;
=(>0);
=+;
=+;
=function(){//Cancel the default action of the event.
=false;
};
if(=="mouseout")
{
=;
}
else if(=="mouseover")
{
=;
}
=function(){
=true;
};
=;
=(new Date).getTime();
};
return oEvent;
};
=function(){
if()
{
return ();
}
else
{
return [0];
}
};
Example (automatic search, just like the address book in your phone)
Copy the codeThe code is as follows:
<html xmlns="http:///1999/xhtml">
<head>
<title>Unt title page</title>
<script language="javascript" type="text/javascript" src="javascript/"></script>
<script language="javascript" type="text/javascript" src="javascript/"></script> //There is
<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"];
(); //Sort the above array
function setText(oListbox,sTextboxID)
{
var oTextbox=(sTextboxID);
if(>-1)
{
=[].text; //options: The set of elements in the drop-down list box is accessed through the index number of the element.
}
}
</script>
</head>
<body>
<p>Type in a color in lowercase:</p>
<input type="text" onkeyup="(this,arrColors,'lstColors')" /><br /><br />
<!-- ↑
this: Pass the text box by itself; arrColors: Pass the total array to be found from; 'lstColors' (note that if you add '' the id name of the object is added, add ''
In order not to treat the thing passed in as an object but only as a string, prepare to use this string as an id number in the function to find the object) to pass the actual location of the text to be found -->
<select size="5" style="width:200px" onclick="setText(this,'txtColor')"></select>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------------
Contents in src="javascript/":
var ListUtil=new Object();
=function(oListbox)
{
var arrIndexes=new Array();
for(var i=0;i<;i++)
{
if([i].selected)//Get the index of the selected item
{
(i);
}
}
return arrIndexes;
};
=function(oListbox,sName,sValue)
{
var oOption=("option");
((sName));
if(==3)//If a third parameter is passed, add attribute
{
("value",sValue);
}
(oOption);
};
=function(oListbox,iIndex)//Delete items through index
{
(iIndex); //Fight it on
};
=function(oListbox)//Clear the list box
{
for(var i=-1;i>=0;i--) {
(oListbox,i);
}
};
=function(oListboxFrom,oListboxTo,index)
{
var oOption=[index];
if(oOption!=null)
{
(option);//Element nodes can only belong to one parent node at the same time, and all mobile implementations
}
};
=function(oListboxFrom,oListboxTo,index)
{
var oOption=[index];//Get the original node element and create a new element point to get the value from the original node
var newOption=("option");
var newTxtNode=();
(newTxtNode);
if(newOption!=null)
{
(newOption);
}
}
=function(oListbox,index)// option moves upward
{
if(index>0)
{
var oOption=[index];//Get the current item
var oPrevOption=[index-1];//Get the previous item
(oOption,oPrevOption);
}
};
=function(oListbox,index)
{
if(index<-1)
{
var oOption = [index]; //Get the current item
var oNextOption=[index+1];//Get the next item
(oNextOption,oOption);
}
};
Example (number entry is prohibited)
Copy the codeThe code is as follows:
<html xmlns="http:///1999/xhtml">
<head>
<title>Unt title page</title>
<script language="javascript" type="text/javascript" src="javascript/"></script> // There are Copy on the script
<script language="javascript" type="text/javascript" src="javascript/"></script>
<script language="javascript" type="text/javascript" src="javascript/"></script>
</head>
<body>
<p>Try typing in the can only type non-number characters.</p>
<form method="post" action="javascript:alert('submitted')">
<textarea rows="10" cols="25" invalidchars="0123456789" onkeypress="return (this,event,true)"></textarea>
<input type="submit" value="Submit Form" />
</form>
</body>
</html>
Example (a complex example of the value of the selected text box and radio button can be summarized and displayed)
Copy the codeThe code is as follows:
<html xmlns="http:///1999/xhtml">
<head>
<title>Unt title page</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");
[0].radCPUSpeed[radCPUSpeedIndex].checked=true;
}
else
{
radCPUSpeedIndex=radIndex;
}
return returnValue;
}
function butCheck_onclick()
{
var controlIndex;
var element;//debugger
var numberOfControls=[0].length; //[0] represents a collection of named elements in the first form
var compSpec="Your chosen processor speed is ";
compSpec=compSpec+[0].radCPUSpeed[radCPUSpeedIndex].value; //forms[0].radCPUSpeed[radCPUSpeedIndex] The selected array index has been assigned to the previous function (which has been fired when the radio button is selected)
compSpec=compSpec+"\nWith the following additional components\n";
for(controlIndex=0;controlIndex<numberOfControls;controlIndex++)
{
element=[0][controlIndex];
if(=="checkbox")
{
if(==true)
{
compSpec=compSpec++"\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>
Example (movement and deletion of child nodes between different parent nodes)
Copy the codeThe code is as follows:
<html xmlns="http:///1999/xhtml">
<head>
<title>Unt title page</title>
<script language="javascript" type="text/javascript" src="javascript/"></script> //The script has
<script language="javascript" type="text/javascript">
function moveItem()
{
var oListbox1=("selListbox1");
var oListbox2=("selListbox2");
var oTxtIndex=("txtIndex");
(oListbox1,oListbox2,parseInt()); //
}
function copyItem()
{
var oListbox1=("selListbox1");
var oListbox2=("selListbox2");
var oTxtIndex=("txtIndex");
(oListbox1,oListbox2,parseInt());
}
</script>
</head>
<body>
<form action="#" method="post">
<select 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 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" /><br />
<input type="button" value="Move" onclick="moveItem()" />
<input type="button" value="Copy" onclick="copyItem()" />
</form>
</body>
</html>
Example (Limiting the input maximum value of multi-line text boxes)
Copy the codeThe code is as follows:
<html xmlns="http:///1999/xhtml">
<head>
<title>Unt title page</title>
<script language="javascript" type="text/javascript" src="javascript/"></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 (this)"></textarea>
<input type="submit" value="Submit Form" />
</form>
</body>
</html>
--------------------------------------------------------------------------
Methods of calling in external scripts:
=function(oTextArea)//Judge whether the length of the content in the text box is equal to the maximum length of the text box
{
return !=("maxlength");
};
Example (Three text boxes, input reaches the maximum value of the first text box, and the cursor automatically moves to the next text box...)
Copy the codeThe code is as follows:
html xmlns="http:///1999/xhtml">
<head>
<title>Unt title page</title>
<script type="text/javascript" language="javascript" src="javascript/"></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="(this)" />
<input type="text" size="4" maxlength="4" value="" onkeyup="(this)" />
<input type="text" size="7" maxlength="7" value="" onkeyup="(this)" />
<input type="submit" value="Submit Form" />
</form>
</body>
</html>
-------------------------------------------------------------------------------------
Text in src="javascript/":
var FormUtil=new Object;
= function() {
if ( > 0) {//Judge whether there are other elements in the form through the length attribute of the form
for (var i = 0; i < [0].; i++) {
var oField = [0].elements[i];
if ( != "hidden") {
if ( == "") {//When the page loads very slowly, the script may not have been run yet, and the user has entered data. When the script is executed, it will cause inconvenience to the user.
();
return;
}
}
}
}
};
=function()
{
var colInputs=("input");
var colTextAreas=("textarea");
for(var i=0;i<;i++)
{
if(colInputs[i].type=="text" || colInputs[i].type=="password")
{
colInputsp[i].onfocus=function(){();};
}
}
for(var i=0;i<;i++)
{
colTextAreas[i].onfocus=function(){();};
}
};
= function(oTextbox) {
var oForm = ;
// When the condition is that the last element is not a text box and the length of the text box value is equal to the maximum length of the text box
if ([ - 1] != oTextbox && == ) { //[ - 1] != oTextbox determines that the currently passed text box is not the last text box
for (var i = 0; i < ; i++) { // == Determine whether the currently entered text has reached its maximum value
if ([i] == oTextbox) {
if ([i + 1].type != "hidden") {
[i + 1].focus();
return;
}
return;
}
}
}
};
Example (verify content in the text box when focus leaves)
Copy the codeThe code is as follows:
<html xmlns="http:///1999/xhtml">
<head>
<title>Unt title page</title>
<script language="javascript" type="text/javascript" src="javascript/"></script>
<script language="javascript" type="text/javascript" src="javascript/"></script>
<script language="javascript" type="text/javascript" src="javascript/"></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 (this,event)" max="20" min="-10" validchars="0123456789" onblur="(this)"
onkeydown="(this,event)" />
<input type="button" value="Submit Form" />
</form>
</body>
</html>
--------------------------------
js：
= function(oTextbox) {
var sInvalidChars = ("invalidchars"); //Get the validchars attribute value of the element, which is equivalent to the verification string
var arrInvalidChars = ("");//Separate the verification string into a character array
for (var i = 0; i < ; i++) {
if ((arrInvalidChars[i]) > -1) {//If the value of the text box contains any character in the array, the verification will not be passed
alert("Character'" + arrInvalidChars[i] + "' not allowed.");
return; //Jump out
}
}
};
JS Chapter 7: COOKIE Operation and Style Sheet Programming ↑↓←→
// Introduction to Cookie
{
Cookies are a small piece of information placed on the user's computer by the website, divided into: //For example: Log in on the QQ on your mobile phone, click to remember the username and password, and you will enter it differently next time. This is what Cookies do.
Copy the codeThe code is as follows:
1. Save it into computer memory (temporary cookies)
2. Write to files (persistent cookies)
Path: C:\Documents and Settings\Administrator\Cookies
}
//Composition of Cookies:
Copy the codeThe code is as follows:
1. Name: Each cookie is represented by a unique name and is case-insensitive
2. Value: The string value saved in the cookie, the length is less than 4KB
3. Domain: For security reasons, the website cannot access cookies created by other domains.
4. Path: Restricts access to specific directories on the web server
5. Expiration date: When should cookies be deleted
6. Security flag: A bool value used to indicate whether cookies can only be accessed from secure websites (using SSL and Https protocols).
//Security Limitations
Copy the codeThe code is as follows:
1. Each domain (each website) can only store up to 20 cookies on one user machine.
2. The size of each cookie cannot exceed 4096 bytes.
3. The total number of cookies on a user machine cannot exceed 300
4. The browser's own security mechanism: block all cookies, block cookies from unknown websites, or give users a prompt when creating cookies (Debug method: Tools → Internet Options → Privacy → Set security level)
//Write cookies
Copy the codeThe code is as follows:
A cookie is actually a string that is automatically generated by the browser when the page is loaded.
It can be operated through the cookie attribute of the document object.
In cookies, information is separated by a semicolon, and usually each cookie contains a pair of names and values separated by an equal sign.
fur=blue; food=biscuits; name=Cookie_Monster
//The writing of cookies is somewhat similar to the key-value pair
Example (cookieWrite) (sets the expiration time of the cookie (the expiration time is added to the end of the cookie))
Copy the codeThe code is as follows:
Contents in src="javascript/":
var myCookie=new Object();
= function(isLogin, isExpire)//isLogin means login isExpire means temporary or persistent cookies
{
var theCookie;
if (isLogin == true && isExpire == true) { //Write permanent cookies Note: When creating your own cookie string, be sure to ensure that the name and value do not include spaces, commas or semicolons. These characters will cause errors when parsing cookie strings
var date = new Date(("May 1, 2010")); //("Date") is to convert a date into a string
theCookie = "isLogin=marssion" + ";Expires=" + (); //() method cannot be clicked out, it is to further convert time into a string format of (GMT (Greenwich Time Notation)) type
= theCookie; //Expires= A string spelled out: represents the expiration time, separated from the previous string with "; ". In theory, a cookie has only one equal sign (the user can only add one cookie at a time. Even if multiple cookies are spliced into a large string strictly according to the format of the cookie string, the string cannot be added to it). The expiration time is an exception.
= ""; //Click to jump to the corresponding page
}
else if (isLogin == true && isExpire == false) { //Write temporary cookie
theCookie = "isLogin=marssion";
= theCookie;
= "";
}
}
----------------------------------------------------------------
<html xmlns="http:///1999/xhtml">
<head>
<title>Unt title page</title>
<script language="javascript" type="text/javascript" src="javascript/"></script>
<script language="javascript" type="text/javascript">
function CheckLogin()
{
var myvalue=("userName");
var pwd=("password");
if(=="marssion" && =="1234") {
WriteCookie(true);//true means that the username and password are correct and the login is successful.
return true;
}
else
{
alert("UserName or Password error!");
return false;
}
}
function WriteCookie(islogin)
{
var myCheckBox=("remember");
if(==true)
{
(islogin,true);//Write persistent cookies
}
else
{
(islogin,false);//Write temporary 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" /><br />
Password:<br /><input type="password" /><br /><br />
<input type="button" value="Submit" onclick="if(CheckLogin()==false) return false" />
<input type="reset" value="Reset" /><br />
Remember Me<input type="checkbox" checked="checked" value="NoExpire" />
</form>
</body>
</html>
Example (cookieRead)
Copy the codeThe code is as follows:
Contents in src="javascript/":
var myCookie=new Object();
= function(searchName)
{
var cookies=(";");//The strings in cookies are separated by ";"
for(var i=0;i<;i++)
{
var cookiecrumbs=cookies[i].split("="); //Separate the retrieved string with "=""
var cookiename=cookiecrumbs[0];
var cookievalue=cookiecrumbs[1];
if(cookiename==searchName)
{
return cookievalue; //Return the value of the corresponding name found. Each cookie has a corresponding txt document. We only need to give the corresponding cookie name. There is a dat database file in the txt folder where the cookie is stored. It will automatically find the corresponding txt document.
}
}
return false;
}
-----------------------------------------------------------------------
<html xmlns="http:///1999/xhtml">
<head>
<title>Unt title page</title>
<script language="javascript" type="text/javascript" src="javascript/"></script>
<script language="javascript" type="text/javascript">
function load()
{
var isLogin=("isLogin");
if (isLogin == "marssion")
{
("Login successfully. Welcome!");
}
else
{
="";
}
}
</script>
</head>
<body onload="load()">
</body>
</html>
Example (the underline becomes an upper line when the hyperlink on the page is moved up)
Copy the codeThe code is as follows:
addLoadListener(init);
function init()
{
if(typeof !="undefined") // : All styles currently referenced
{
addStyleRule([0],"a:hover","text-decoration:overline"); // quotation is required <link rel="Stylesheet" type="text/css" href="" />
}
return true;
}
function addStyleRule(styleSheet,selector,properties,index)
{
if(typeof !="undefined")
{
(selector,properties,index);
}
else if(typeof !="undefined")
{
if(typeof index=="undefined")
{
index=;
}
(selector+"{"+properties+"}",index);
}
return true;
}
function addLoadListener(fn)
{
if (typeof != 'undefined')
{
('load', fn, false);
}
else if (typeof != 'undefined')
{
('load', fn, false);
}
else if (typeof != 'undefined')
{
('onload', fn);
}
else
{
var oldfn = ;
if (typeof != 'function')
{
= fn;
}
else
{
= function()
{
oldfn();
fn();
};
}
}
}
//Read a value of Value in the cookie
Copy the codeThe code is as follows:
The following is the contents in the external JS file:
---
var cookieName = "monsterCookie";
var cookieValue = "fur:blue/food:biscuits/name:monsterCookie";
debugger;
cookieValue=escape(cookieValue);//Encoding the cookie value
var theCookie = cookieName + "=" + cookieValue;
=theCookie;
var monsterName = getSubCookie("monsterCookie", "name");
alert("The value of the sub-cookie 'name' is :"+monsterName);
function getSubCookie(cookieName,subCookieName) {
var cookies=(";"); //Split it first with a semicolon
for(var i=0;i<;i++)
{
var cookieCrumbs=cookies[i].split("="); //Split with equal sign
if(cookieCrumbs[0]==cookieName) //If cookieCrumbs[0](split name) is equal to the passed name
{
var cookieValue=cookieCrumbs[1]; //Get the required value
cookieValue = unescape(cookieValue); //Decode the cookie value
var subCookies=("/");
for(var j=0;j<;j++)
{
var subCookieCrumbs=subCookies[j].split(":");
if(subCookieCrumbs[0]==subCookieName)
{
return subCookieCrumbs[1];
}
}
}
}
return false;
}
-------------------------------------------------------------------------
//style:
//Access Style
Copy the codeThe code is as follows:
Several issues need to be paid attention to when using style objects.
Style settings must comply with the CSS specification.
If the style attribute name has the "-" sign, the first letter is larger.
Reserved words cannot be used as attribute names.
The attributes obtained using the style object are not necessarily the same as the final display effect of the element, because in addition to inline style declaration, the display effect of the element can also be changed through the <style> element and the link style sheet.
Example (about the spelling of the style attribute value and the difference in IE Firefox)
Copy the codeThe code is as follows:
<html>
<head>
<title>Style Example</title>
<script type="text/javascript">
function sayStyle() {
var oDiv = ("div1");
//alert(); //Firefox: css+...
alert(); //IE：style+...
//alert();// Remove ‘-' and capitalize the first letter of the next word
}
</script>
</head>
<body>
<div style="background-color: red; height: 50px; width:
50px;float:left"></div><br />
<input type="button" value="Get Background Color" onclick="sayStyle()" />
</body>
</html>
Example (Colour of the transform layer)
Copy the codeThe code is as follows:
<html xmlns="http:///1999/xhtml">
<head>
<title>Unt title page</title>
<script type="text/javascript" language="javascript">
function aa()
{
var cr=("div1");
='orange';
}
function bb()
{
var cr=("div1");
="blue";
}
function cc()
{
var cr=("div1");
var cc=(); //The object must be used to report an error using this
alert(cc);
}
</script>
</head>
<body>
<div style=" background-color:Red; height:50px; width:50px;" onmouseover="aa()" onmouseout="bb()"></div>
<input type="button" value="Get Background Color" onclick="cc()" />
</body>
</html>
-----------------------------------------------------
Or the above is equivalent to:
<html>
<head>
<title>Style Example</title>
<script type="text/javascript">
function sayStyle() {
var oDiv = ("div1");
alert();
}
</script>
</head>
<body>
<div
style="background-color: red; height: 50px; width: 50px"
onmouseover="= 'blue'"
onmouseout=" = 'green'"></div>
<input type="button" value="Get Background Color" onclick="sayStyle()" />
</body>
</html>
Example (export style text)
Copy the codeThe code is as follows:
<html>
<head>
<title>Style Example</title>
</head>
<body>
<div
style="background-color: red; height: 50px; width: 50px"
onclick="alert()"></div> // : background-color: red; height: 50px; width: 50px
</body>
</html>
// Method to read a single style through a Style object
Copy the codeThe code is as follows:
getPropertyPriority() Returns important if the css property "important" is defined in the rule, otherwise an empty string will be returned.
Item(index) Returns the name in the css attribute according to the sequence number
removeProperty(propertyName) Remove attributes from css definition
setProperty(propertyName,value,priority) Set properties for css
Example (Properties setting and removal (can be used by Firefox))
Copy the codeThe code is as follows:
<html>
<head>
<title>Style Example</title>
<script type="text/javascript">
function useMethods() {
var oDiv = ("div1");
// IE does not support the following properties and methods
alert((0)); //outputs “background-color"
alert(("background-color")); //Get the current background-color value
alert(("background-color")); //Remove the background-color attribute
}
</script>
</head>
<body>
<div style="background-color: red; height: 50px; width:50px"
onmousemove="('background-color','blue','')" <!--setProperty("Style name (css format)","Style value", "Just give it empty")-->
onmouseout="('background-color','red','')"></div><br />
<input type="button" value="Use Methods" onclick="useMethods()" />
</body>
</html>
Example (change the font size dynamically, use the ternary operator to make IE and Firefox compatible)
Copy the codeThe code is as follows:
<html xmlns="http:///1999/xhtml">
<head>
<title>CSS Test</title>
<!--<link rel="Stylesheet" type="text/css" href="css/" />-->
<style type="text/css">
* { //*{} Apply all
font-family: Tahoma, Arial, serif; //.div{} (class selector applies all layers)
font-size: 18pt; //#id name{} (ID selector)
text-align: left;
}
.div {
font-size: 30px;
color: #FF4500;
}
</style> <!-- *{} This is a style rule --> <!-- .div{} This is a style rule -->
<script language="javascript" type="text/javascript">
var tag=false;
function change() {
// Collection of CSS style rules
// Style rules
// ↓
var cssRules = [0].rules ? [0].rules : [0].cssRules; //The function of the ternary operator here is: to enable both IE and Firefox to use // Modify the font-size style in the .div style rules
// ↑ ↑
// All styles currently referenced ternary operators if? The result that returns true will be executed: the result that returns false will be executed: the result that returns false will be executed:
if(tag==false)
{
cssRules[1]. = "60px";
tag=true;
}
else{
cssRules[1]. = "30px";
tag=false;
}
}
</script>
</head>
<body>
<div class="div">msg</div>
<div class="div">msg</div>
<div class="div">msg</div>
<button onclick="change()">change</button>
</body>
</html>
Example (Switch Style Table 1)
Copy the codeThe code is as follows:
<html xmlns="http:///1999/xhtml">
<head>
<title>CSS Test</title>
<link type="text/css" rel="stylesheet" href="css/"title="white" />
<link type="text/css" rel="stylesheet" href="css/" title="gray" />
<script language="javascript" type="text/javascript">
getElement("style1").href = "";
getElement("style2").href = "";
function setStyle(title,sa) {
// Disable all style sheets first
getElement("style1").href = "";
getElement("style2").href = "";
// Enable the specified style sheet
getElement(title).href = sa;
}
function getElement(id) {
return (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/')">white</button>
<button onclick="setStyle('style2','css/')">gray</button>
</body>
</html>
Example (Switch Style Table 2)
Copy the codeThe code is as follows:
<html xmlns="http:///1999/xhtml">
<head>
<title>CSS Test</title>
<link type="text/css" rel="stylesheet" href="css/" title="white style" />
<link type="text/css" rel="stylesheet" href="css/" title="gray style" />
<script language="javascript" type="text/javascript">
function setStyle() {
var option1 = ("option1");
var option2 = ("option2");
var style1 = ();
var style2 = ();
// Disable all style sheets first
= true;
= true;
// Enable the specified style sheet
if () {
= false;
}
else {
= false;
}
}
</script>
</head>
<body>
<select onchange="setStyle()">
<option value="style1" >White style</option>
<option value="style2" >Gray style</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>
Example (click layer shows, click layer hides)
Copy the codeThe code is as follows:
<html>
<head>
<title>Style Example</title>
<script type="text/javascript">
function toggle(sDivId) {
var oDiv = (sDivId);
= ( == "none") ? "block" : //Object. Display status: Value range: "none(not displayed)" "block(display)"
"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"
>This is some content
to show and hide.</div>
<p> </p>
<div style="background-color: blue; color: white; font-weight: bold;
padding: 10px; cursor: pointer" <!-- cursor (indicates the display status of the mouse (pointer(hand))) -->
onclick="toggle('divContent2')">Click Here</div>
<div style="border: 3px solid blue; height: 100px; padding: 10px"
>This is some content
to show and hide.</div>
</body>
</html>
Example (mouse up, display layer)
Copy the codeThe code is as follows:
<html>
<head>
<title>Style Example</title>
<script type="text/javascript">
function showTip(oEvent) {
var oDiv = ("divTip1");
= "visible"; //Object. Display status: The value range is: "visible(display)" "hidden(not displayed)" The usage is the same as display, but the value range is different
= + 5; //Display the coordinates of the layer (mouse horizontal coordinate + 5)
= + 5; //Display the coordinates of the layer (mouse vertical coordinate + 5)
}
function hideTip(oEvent) {
var oDiv = ("divTip1");
= "hidden";
}
</script>
</head>
<body>
<p>Move your mouse over the red square.</p>
<div
style="background-color: red; height: 50px; width: 50px"
onmouseover="showTip(event)" onmouseout="hideTip(event)"></div>
<div
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>