javascript--exercises (including the main screen picture carousel effect)

Practice A

Example 1: Do a question, if the input answer is correct then pop up correctly, error pop-up error;

Here in text write a Daan attribute, which stored the value of the answer, click to check the answer when Cheak input and answer whether the same:

Body in code:

<form> which year was the Republic of China founded? <input type= "Text" daan= "1912" value= "id=" T1 "name=" T1 "/><input type=" button "onclick=" Check () "Id=" T2 " Name= "T2" value= "Check Answer"/></form>

The code in JS:

function Check ()

{

var A=document.getelementbyid ("T1");

var A1=a.value;

var a2=a.getattribute ("Daan");

if (A1==A2)

{

Alert ("Congratulations on your answer!") ");

}

Else

{

Alert ("Idiot! ");

}

}

Example 2: The Consent button, countdown 10 seconds, the consent button becomes available, here is the Action property: Disabled, to change the state of the button, when disabled= "disabled" button is not available.

The code in the body:

<form><input type= "Submit" Id= "B1" Name= "B1" value= "agree (9)" disabled= "disabled"/></form>

The code in JS:

var n=10;var a= document.getElementById ("B1"); function Bian ()

{

n--;

if (n==0)

{

A.removeattribute ("Disabled");

a.value= "Consent";

Return

}

Else

{

a.value= "Consent (" +n+ ")";

Window.settimeout ("Bian ()", 1000);

}

}

Window.settimeout ("Bian ()", 1000);

Example 3: Automatic and manual switching of the display picture; Picture Carousel

The code in body, make a div with background picture and control object on both sides:

<div id= "Tuijian" style= "Background-image:url (imges/tj1.jpg);" >

<div class= "pages" id= "P1" onclick= "Dodo ( -1)" ></div>

<div class= "pages" id= "P2" onclick= "Dodo (1)" ></div>

</div>

Code in the style sheet:

<style type= "Text/css" >

*{

margin:0px Auto;

padding:0px;

Font-family: "Microsoft Jas Black";

}

#tuijian {

width:760px;

height:350px;

Background-repeat:no-repeat;

}

. pages{

top:200px;

Background-color: #000;

Background-position:center;

Background-repeat:no-repeat;

opacity:0.4;

width:30px;

height:60px;

}

#p1 {

Background-image:url (imges/prev.png);

Float:left;

margin:150px 0px 0px 10px;

}

#p2 {

Background-image:url (imges/next.png);

Float:right;

margin:150px 10px 0px 0px;

}

</style>

JS in the code, here is mainly every 3 seconds to call the Huan () function, to the background image of the style modification, when the left and right switch to switch to manual switching, automatic switching stop:

<script language= "JavaScript" >

var jpg =new Array ();

jpg[0]= "url (imges/tj1.jpg)";

jpg[1]= "url (imges/tj2.jpg)";

jpg[2]= "url (imges/tj3.jpg)";

var tjimg = document.getElementById ("Tuijian");

var xb=0;

var n=0;

Function Huan ()

{

xb++;

if (XB = = jpg.length)

{

xb=0;

}

TJIMG.STYLE.BACKGROUNDIMAGE=JPG[XB];

if (n==0)

{

var id = window.settimeout ("Huan ()", 3000);

}

}

Function Dodo (m)

N=1;

XB = xb+m;

if (XB < 0)

{

XB = jpg.length-1;

}

else if (XB >= jpg.length)

{

XB = 0;

}

TJIMG.STYLE.BACKGROUNDIMAGE=JPG[XB];

}

Window.settimeout ("Huan ()", +);</script>

javascript--exercises (including the main screen picture carousel effect)