Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> jq version released on Weibo </title>
<Meta name = "Keywords" content = "">
<Meta name = "Description" content = "">
<Script src = "http://code.jquery.com/jquery-1.8.0.min.js" type = "text/javascript"> </script>
<Style type = "text/css">
/* Reset {*/
Html {color: #000; background: # fff ;}
Body, div, ul, li, h1, input, button, textarea {padding: 0; margin: 0 ;}
Img {border: 0 ;}
Li {list-style: none ;}
/*} Reset */
H1 {margin: 20px auto 0; font-size: 30px; width: 200px; text-align: center; color: blue ;}
# Outer {position: relative; width: 400px; margin: auto; margin: 20px auto 10px ;}
# Test1 {display: block; width: 400px; height: 70px ;}
. Error {background: # f00; width: 400px; height: 50px; position: absolute; left: 1px; top: 10px; opacity: 0.6; filter: alpha (opacity = 60 );}
# Test2 {display: block; margin-left: 800px; width: 60px; height: 30px; font-size: 20px ;}
. Test3 {margin: 10px auto; width: 400px ;}
# Test3 {border: 1px #444 solid; width: 400px; min-height: 300px; _ height: 300px; padding-bottom: 10px; color: blue; float: left ;}
. Test {border-bottom: 1px blue dotted; width: 383px; padding: 10px 5px 5px 10px; float: left ;}
. Inf {margin-top: 15px; float: right; color: #555 ;}
. Con {margin-left: 16px; display: inline; width: 304px; float: left; word-break: break-all ;}
. Bu {margin-left: 6px; display: inline ;}
. Imgs {width: 60px; height: 60px; float: left ;}
. ImgInf {width: 120px; background: # f0f; color: # fff; position: absolute; z-index: 2; left:-65px; top: 62px; opacity: 0.5; filter: alpha (opacity = 50 );}
. Finish {background: green; width: 300px; height: 50px; color: # ff0; font-size: 30px; text-align: center; line-height: 50px; position: absolute; left: 50px; top: 10px; opacity: 0.6; filter: alpha (opacity = 60 );}
. ImgOut {position: relative ;}
</Style>
</Head>
<Body>
<H1> Weibo announcement <Div id = "outer">
<Textarea id = "test1"> </textarea>
</Div>
<Input type = "button" id = "test2" value = "publish"/>
<Div class = "test3"> <div id = "test3"> </div>
<Script type = "text/javascript">
<! --
$ ('# Test2'). click (function () {// click the published event
If ($ ('# test1') [0]. value = ""){
Var finish = $ ('<div class = "error"> </div> '). appendTo ($ ('# outer ')). hide (). fadeIn (200 ). fadeOut (1, 200 ). fadeIn (200 ). fadeOut (1, 200 );
Return;
} Else {
$ ('# Test2') [0]. disabled = true; // after the release is successful, disable
Var timer = new Date ();
// Weibo
$ ('<Div class = "test"> <span class = "imgOut"> </span> <div class = "con"> </div> <div class = "inf"> '+ timer. getHours () + "Hour" + timer. getMinutes () + "Minute" + timer. getSeconds () + "second" + '<input type = "button" value = "delete" class = "bu"/> </div> '). prependTo ($ ('# test3 '));
$ ('. Con') [0]. innerText = $ ('# test1') [0]. value;
// Profile picture information
$ ('. Imgs: eq (0)'). hover (
Function () {$ ('<ul class = "imgInf"> <li> name: Wukong </li> <li> title: battle Buddha </li> <li> current residence: Huaguo Shan </li> </ul> '). appendTo ($ (this ). parent ());},
Function () {$ ('. imginf'). remove ();}
)
// Clear
$ ('# Test1') [0]. value = "";
// Animation after successful publishing
$ ('<Div class = "finish"> released successfully </div> '). appendTo ($ ('# outer ')). hide (). fadeIn (500 ). fadeOut (500, function () {$ ('# test2') [0]. disabled = false ;});
// Animation effect when inserting a node
$ ('. Test: first'). hide (). slideDown ("slow ");
// Delete button event
$ ('. Bu: eq (0)'). click (function (){
If (confirm ('Are you sure you want to delete it? ')){
$ (This). parent (). parent (). hide (1000, function (){
$ (This). remove ();
});
}
});
}
})
// -->
</Script>
</Body>
</Html>