Implementing a Carousel Diagram
Get element document.getElementById ("ID name")
Event (onlond) Onlond = "changeimg ()" In <script> function changeimg () {document.getElementById ("img"). src = "Picture Address"}
Timed operation: SetInterval (code,millisec[, "Lang"]) code required. The function to invoke or the code string to execute; millisec required, the time interval between periodic execution or calling code is computed in milliseconds. SetInterval ("changeimg ()", 3000)
Total Code:
<body onload= "init ()" >
function init () {///writing wheel picture Display timing action setinterval ("Changeimg ()", 3000);}
Writing function var i=0function changeimg () {i++;//Gets the picture position and sets the SRC attribute value document.getElementById ("Img1"). src= ". /img/"+i+". jpg "; if (i==3) {i=0;}}
Pop-up ad map
Get Picture location document.getElementById ("ID name")
Hidden Pictures: Display:none
Timed Operation: SetInterval ("function showing picture", 3000);
Step Analysis:
One: Hide an ad image in the page's specified location (using the Display property's none value) label set
Two: Determine the event (onload) and bind it to a function functions init () {Time=setinterval ("Showad ()", 3000);}
Three: Write this function (set a realistic picture of the timing operation) function Showad () {var adEle = document.getElementById ("Img2"); adele.style.display= "Block"; Clearinterval (time); time = SetInterval ("Hiddenad ()", 3000);}
Four: Write the function in the timer (get the location of the ad image and set the display value of the property Stule block) adele.style.display= "block";
Five: Clear the display picture of the timing operation Clearinterval (time);
VI: Write the time of the hidden picture; time = SetInterval ("Hiddenad ()", 3000);
Seven: Write the function in the timer (get the position of the ad image and set the display value of the style to none) function Hiddenad () {document.getElementById ("Img2"). style.display= "None"; clearinterval (time);}
Eight: Clear the hidden picture of the timing operation Clearinterval (time);
BOM Object
Window object:
The Widnow object represents the window that opens in the browser
Common methods: There are applications in the previous case.
Alert (): Displays a warning box with a message and a confirmation button
Clearinterval (): Cancels timeout set by SetInterval () This method only clears the timed action set by SetInterval Clearinterval (time);
Cleartimeout (): Cancels the timeout set by the SetTimeout () method to clear only timed actions set by SetTimeout
Confirm (): Displays a dialog box with a message and a confirmation button and a Cancel button confirm ("Are you sure you want to delete it?") ");
Prompt () Displays a dialog box to prompt the user for input
SetInterval (): Invokes a function or evaluates an expression according to the specified period (in milliseconds) it has a return value that is primarily provided to clearinterval for use. Time = SetInterval ("Hiddenad ()", 3000);
SetTimeout (): A call to a function or a calculated expression after a specified millisecond has a return value, primarily for cleartimeout use.
Location Object
object contains information about the current URL
Common Object Properties:
HREF: Set or return the full URL in the <script> tag window.location.href= "http://itcast.cn";
History Object method
Back (): Load the previous url<input type= "button" in the History list Value= "Return to previous page" onclick= "Javascript:history.back ()"/>
Forward (): Load the next URL in the history list
Go (): Loads a specific page parameter in the History list-1 returns to the previous historical page, 2 returns the previous History page record, 1 goes to the next history page record, 0 lets the button click fails onlick= "javascript:volid (0)"
Navigator Object
The Navigator object contains the information that is browsed. (not used in development of this object)
Screen Object
The Screen object contains information about the client display screens (not commonly used in development)
Implement table interlaced color effects
New content:
In the <table> tab box:<thead> <tr> <th></th></tr></thead> <tbody> <tr> <td></td></tr></tbody> <thead> tags define the head of the table <tbody> tags define the body part of the table, When using these two tags, be aware of the use of <tr><th><td>
Determine event: (page Load event onload)
Gets the element: Gets the table (document.getElementById ()), which is ultimately to get the number of rows (lengths) in Tbody in the table.
Number of rows inside Tbody (rows.length)
Set the background color (. Style.backgroundcolor)
Step analysis
The first step: Determine the event (onload) and bind it to a function window.onload = function () {var tblele = document.getElementById ("tbl"); var len= Tblele.tbodies[0].rows.length;//alert (len); for (Var i=0;i<len;i++) {if (i%2==0) {tblele.tbodies[0].rows[i]. Style.backgroundcolor= "Pink";} else{tblele.tbodies[0].rows[i].style.backgroundcolor= "Gold";}}} The ID address is written in the <table> tab
Step Two: Write function (get table) var Tblele = document.getElementById ("tbl");
Step three: Get the number of rows in tbody var len=tblele.tbodies[0].rows.length; There is no collection in JS, only the array
Fourth step: Traverse the lines inside the Tbody
Fifth step: Get odd and even lines (angle label to 2)
Sixth step: Set the background color tblele.tbodies[0].rows[i].style.backgroundcolor= "gold" for odd and even lines respectively;
Table highlighting:
Event: onMouseOver mouse moves to an element and onmouseout mouse moves away from an element
Steps:
First step: Determine Events (onmouseover and onmouseout) and bind them to a function <tr onmouseover= "changecolor (' TR1 ', ' over ')" id= "TR1" onmouseout= " ChangeColor (' TR1 ', ' out ') ' >
Step two: Get the row that the mouse moved up, set the background color function ChangeColor (id,flag) {if (flag== "over") {document.getElementById (ID). Style.backgroundcolor= "Red";} else if (flag== "out") {document.getElementById (id). style.backgroundcolor= ' White ';}}
Select All and select All
Event: (mouse click event onclick)
Steps:
First step: Determine the event (onclick) and bind it to a function th><input type= "checkbox" onclick= "Checkall ()" id= "Checkall"/></th>
Step Two: Write the function (Get the check box in front of the number to get its status) function Checkall () {var checkallele = document.getElementById ("Checkall");
if (checkallele.checked==true) {var checkones = document.getelementsbyname ("Checkone"); for (Var i=0;i< checkones.length;i++) {checkones[i].checked=true;}} Else{var checkones = Document.getelementsbyname ("Checkone"); for (Var i=1;i<checkones.length;i++) {Checkones[i]. Checked=false;}}
Step three: Determine the status of the check box in front of the number (if selected, get all of the following check boxes and set their status to checked) if (checkallele.checked==true) {var checkones = Document.getelementsbyname ("Checkone"); for (Var i=0;i<checkones.length;i++) {checkones[i].checked=true;}
Fourth step: Determine the status of the check box in front of the number (if unchecked, get all of the following check boxes and leave their status unchecked) var checkones = Document.getelementsbyname ("Checkone"); for (Var i=1;i <checkones.length;i++) {checkones[i].checked=false;}
Second-level linkage
Event (onchange)
How to use:
Add an element appendchild ()
The following two methods are important, but they are not found in the manual!
Create text node: document.createTextNode ()
Create element node: document.createelement ()
Steps:
First step: Determine the event (onchange) and bind it to a function
Second step: Create a two-dimensional array for storing provinces and cities
Step three: Get User-selected provinces
Fourth step: Traverse the provinces in the two-dimensional array
Fifth step: Compare the traversed provinces to the provinces selected by the user
Sixth step: If the same, traverse all cities under the province
Seventh step: Create a city text node
Eighth step: Create the OPTION element node
Nineth Step: Add the city text node to the OPTION element node
Tenth step: Get the second drop-down list and add the option element node in
11th Step: Empty the option content of the second drop-down list before each operation.
Code:
<script>//1. Create a two-dimensional array for storing provinces and cities var cities = new Array (3); Cities[0] = new Array ("Wuhan", "Huanggang", "Xiangyang City", "Jinzhou"); cities[1] = new Array ("Changsha", "Chenzhou", "Zhuzhou", "Yueyang"); CITIES[2] = new Array ("Shijiazhuang City", "Hanhan", "Langfang", "Baoding"); CITIES[3] = new Array ("Zhengzhou", "Luoyang", "Kaifeng", "Anyang"), function Changecity (val) {//7. Get the second drop-down list var Cityele = Document.getelemen Tbyid ("City"); 9. Empty the option content of the second drop-down list cityele.options.length=0; 2. Traverse the province for (Var i=0;i<cities.length;i++) in the two-dimensional array {//note, compare the corner label if (val==i) {//3. Traverse the city for (Var j=0;j<cities) of the user-selected province [i].length;j++] {//alert (cities[i][j]);//4. Create a text node of the city var textnode = document.createTextNode (Cities[i][j]); Create opt Ion element node var opele = document.createelement ("option"); 6. Add the text node of the city to the option element node Opele.appendchild (textnode); 8. Add the OPTION element node to the second drop-down list to Cityele.appendchild (Opele); } }} }</script>
HTML code:
<select onchange= "changecity (this.value)" > <option>--Please select--</option> <option value= "0" > Hubei </option> <option value= "1" > Hunan </option> <option value= "2" > Hebei </option> <option value= "3" > Henan </option> </select> <select id= "City" > </select>
Java SCRAPT (ii)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
