60 Seconds Verification Code Countdown JS code
<script type= "Text/javascript" >
var countdown=60;
function SetTime (val) {
if (countdown = = 0) {
The RemoveAttribute () method deletes the specified property. The Disabled property specifies that the input element should be disabled.
Val.removeattribute ("Disabled");
Val.value= "Free access to verification code";
Countdown = 60;
} else {
Val.setattribute ("Disabled", true);
Val.disabled=true;
Val.value= "Resend (" + Countdown + ")";
countdown--;
}
SetTimeout (function () {
SetTime (Val)
},1000);
}
document.getElementById ("Btn"). Onclick=settime (this);
</script>
<body >
<input type= "button" id= "btn" value= "Free Verification Code" onclick= "SetTime (This)"/>
</body>
JS Style Code
Document.body.style.backgroundcolor= #ff0000; The style code in//JS does not allow "-" connectors, "-" after the first letter to uppercase, "-" omitted not written.
Document.body.style.fontsize= "14px";//Note the difference between the JS style code and the CSS style code.
Random movement of blocks up or down (timer)
<div style= "border:1px solid #ff0000;p osition:relative;background-color: #666; width:50px;height:50px;" Id= "Time" >
Box
</div>
<script type= "Text/javascript" >
var leftnum=0;
var topnum=0;
var leftaciton=true;
var topaciton=true;
Function Show () {
var Obj=document.getelementbyid ("Time");
if (Leftaciton) {
leftnum+=10;
if (leftnum>=300) {
Leftaciton=false;
}
}else{
leftnum-=10;
if (topnum<=0) {
Leftaciton=true;
}
}
if (Topaciton) {
topnum+=15;
if (topnum>=300) {
Topaciton=false;
}
}else{
topnum-=15;
if (topnum<=0) {
Topaciton=true;
}
}
obj.style.left=leftnum+ ' px ';
obj.style.top=topnum+ ' px ';
}
function Start () {
SetInterval (' Show () ', 50);
}
Start ();
</script>
</body>
How to get elements in JS
var Obj=document.getelementbyid (' time ');//obtained by ID, gets the object
var obj=document.getelementsbyclassname (' time ');//obtained by class is also a one-dimensional array to use Obj[i] Note that element has s, not only one
var obj=document.getelementsbytagname (' img '); obtained by the label, the resulting is a one-dimensional array to use Obj[i] Note that element has s, not only one
JS form submission, form default submission method is get submitted to where with action
Return similar to break, exit loop
The OnClick event must be added return, and the event will be added return, otherwise the page jumps.
Example:
<!--form form The OnClick event must be added return, and the event will be added return, otherwise the page will jump--
<form action= "http://sohu.com" method= "POST" >
User name: <input type= "text" class= "hh" value= ""/><br/>
Phone Number: <input type= "text" class= "hh" value= ""/><br/>
<input type= "Submit" onclick= "return check ()"/>
</form>
<script type= "Text/javascript" >
var inputobj=document.getelementsbyclassname ("hh");
function Check () {
for (var i in inputobj) {
if (inputobj[i].value== "") {
Alert ("Cannot be empty");
return false; Return is equivalent to break and exits the loop
}
}
}
</script>
</body>
The table property, cellspacing, specifies that the space between cells;cellpadding-> property specifies the gap between the element edge and its contents.
Object gets focus Obj.focus ();
<table border= "1px" cellspacing= "0px" cellpadding= "0px" width= "300px" >
<tr>
<td> User name </td>
<td> Password </td>
</tr>
</table>
Form illegal character verification
<script type= "Text/javascript" >
function Check () {
Idea: First take each character of the string out, then one by one and the illegal character array one by one contrast, if there is an equal, return immediately
var arr=["*", "@", "#";
for (Var i=0;i<obj.value.length;i++) {
var str=obj.value.charat (i);//gets each element of a string charAt (i)
for (Var j=0;j<arr.length;j++) {
if (Str==arr[j]) {
Alert ("contains illegal characters");
Obj.value= "";//clear the contents of the form
Obj.focus ();
return false;
}
}
}
}
</script>
60 Seconds Verification Code Countdown JS code JS style code box up and down randomly move (timer) JS in the method of getting elements JS form submission
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
