A message board for a small JS demo every day. Key knowledge points: understanding and application of DOM methods, demodom
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8">
<Title> Document </title>
<Style type = "text/css">
. Wrap {
Width: 400px;
Margin: 30px auto;
}
Textarea {
Display: block;
Width: 100%;
Height: 60px;
}
Input {
Display: block;
Width: 60%;
Margin: 15px auto;
}
Li {
Padding: 5px 10px;
Position: relative;
Word-break: break-all;
}
. Red {
Color: #000;
Background: # f1f1f1;
}
. Pink {
Color: #000;
Background: # ccc;
}
A {
Position: absolute;
Right: 0;
Top:-20px;
Background: yellow;
Color: # fff;
}
# List {
Margin: 0;
Padding: 0;
List-style: none;
Font: 14px/26px "";
}
. Clos {
Position: absolute;
Top: 0;
Right:-50px;
Width: 50px;
Color: # fff;
Background: #000;
Padding: 5px 0;
Text-decoration: none;
Text-align: center;
}
. Clos: hover {
Box-shadow: 0 0 5px rgba (0, 0,. 5)
}
</Style>
<Script type = "text/javascript">
Window. onload = function (){
Var btn = document. querySelector ('input ');
Var text = document. querySelector ('textarea ');
Var list = document. querySelector ('# list ');
Var colors = ["red", "pink"];
Var nub = 0;
Btn. onclick = function (){
If (text. value. trim () = ""){
Alert ("click it ");
Return false;
}
Var li = document. createElement ("li ");
Li. innerHTML = text. value;
// Li. className = colors [nub % colors. length];
/* Determine whether the tag has been added, so that the tag is displayed. Otherwise, add the tag */
If (list. children [0] & list. children [0]. className = "red "){
Li. className = "pink ";
} Else {
Li. className = "red ";
}
Var a = null;
Li. onmouseover = function (){
If (){
A. style. display = "block ";
} Else {
A = document. createElement ("");
A. href = "javascript :;";
A. className = "clos ";
A. innerHTML = "delete ";
A. onclick = function (){
List. removeChild (this. parentNode );
};
This. appendChild ();
}
};
Li. onmouseout = function (){
A. style. display = "none ";
};
List. insertBefore (li, list. children [0]);
Text. value = "";
Nub ++;
};
};
</Script>
</Head>
<Body>
<Div>
<Div class = "wrap">
<Textarea id = "text"> </textarea>
<Input type = "button" value = "create element">
<Ul id = "list"> </ul>
</Div>
</Body>
</Html>
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
