Home > Developer > JavaScript
1. The button can only be clicked after 10 seconds. This effect is generally used in some forums for registration. If you do not need to talk about it, go directly to the Code:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Script type = "text/javascript" src = "js/jquery-1.3.2.js"> </script>
<Script type = "text/javascript">
Var timeOut;
Var count = 10;
$ (Function (){
$ ("# BtnSubmit"). attr ("disabled", "disabled ");
$ ("# BtnSubmit"). val ("OK (" + count. toString () + ");
TimeOut = setTimeout (FIG, 1000 );
});
ButtonCount = function (){
If (count = 0 ){
$ ("# BtnSubmit"). attr ("disabled ","");
$ ("# BtnSubmit"). val ("Confirm ");
ClearTimeout (timeOut );
}
Else {
Count --;
$ ("# BtnSubmit"). attr ("disabled", "disabled ");
$ ("# BtnSubmit"). val ("OK (" + count. toString () + ");
SetTimeout (FIG, 1000 );
}
}
</Script>
</Head>
<Body>
<Input type = "button" value = "Confirm" id = "btnSubmit"/>
</Body>
</Html>
2. Click it and change it. It seems cool to learn jquery more than a month ago. Now it is actually very simple, it can be seen that jquery greatly simplifies the preparation of the front-end effect, the Code is as follows:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Style type = "text/css">
. CaneditBg
{
Background-color: Gray;
}
</Style>
<Script src = "js/jquery. js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
$ (". Canedit"). each (function (){
$ (This). bind ("dblclick", function (){
Var html = require (this).html ();
Var textarea = "<textarea name = 'temtextarea 'id = 'temtextarea 'onblur = 'savetext (this)'>" + html + "</textarea> ";
(This).empty().html (textarea );
});
$ (This ). mouseenter (function () {$ (this ). addClass ("caneditBg ")}). mouseleave (function () {$ (this ). removeClass ("caneditBg ")});
});
});
SaveText = function (o ){
Var text = $ (o). val ();
(O).parent().empty().html (text );
}
</Script>
</Head>
<Body>
<Div class = "canedit">
Click it to change it!
</Div>
<Div>
</Div>
</Body>
</Html>
The above code can be run only by directly copying to the html file and ensuring that there is no error in importing the jquery. js file.
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
