Home > Developer > JavaScript

Javascript: basic operations on Div, reducing characters, setting cookies, and simple progress bar

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

<HTML>
<Head>
<Style type = "text/CSS">
# D1 {
Position: absolute;
Width: 300px;
Height: 300px;
Visibility: hidden;
Color: # FFF;
Background: #555;
}
# D2 {
Position: absolute;
Width: 300px;
Height: 300px;
Visibility: hidden;
Color: # FFF;
Background: #777;
}
# D3 {
Position: absolute;
Width: 150px;
Height: 150px;
Visibility: hidden;
Color: # FFF;
Background: #999;
}
</Style>
<SCRIPT>
VaR D1, D2, D3, W, h;
Window. onload = function (){
D1 = Document. getelementbyid ('d1 ');
D2 = Document. getelementbyid ('d2 ');
D3 = Document. getelementbyid ('d3 ');
Back ();
W = Window. innerwidth;
H = Window. innerheight;
Resizecheck ();
}
Function resizecheck (){
If (W! = Window. innerwidth | H! = Window. innerheight ){
Location. Replace (location. href );
Return;
}
SetTimeout ("resizecheck ()", 1000 );
}
Function back (){
Divmoveto (D1, 200,50 );
Divmoveto (D2, 250,75 );
Divmoveto (D3, 75, 75 );
Divzindex (D1, 1 );
Divzindex (D2, 2 );
Divzindex (D3, 3 );
Divbgcolor (D1, '#555 ');
Divbgcolor (D2, '#777 ');
Divbgcolor (D3, '#999 ');
Divtxtcolor (D1, '# fff ');
Divtxtcolor (D2, '# fff ');
Divtxtcolor (D3, '# fff ');
Divshow (D1 );
Divshow (D2 );
Divshow (D3 );
}
Function color (){
Divbgcolor (D1, '# f02d2d ');
Divbgcolor (D2, '# f040d1 ');
Divbgcolor (D3, '#55afe0 ');
Divtxtcolor (D1, '# fff ');
Divtxtcolor (D2, '# fff ');
Divtxtcolor (D3, '# fff ');
}
Function divmoveto (D, x, y ){
D. style. pixelleft = X;
D. style. pixeltop = y;
}
Function divmoveby (D, dx, Dy ){
D. style. pixelleft + = DX;
D. style. pixeltop + = Dy;
}
Function divshow (d ){
D. style. Visibility = 'visable ';
}
Function divhide (d ){
D. style. Visibility = 'ddd ';
}
Function divsizeto (D, W, h ){
D. style. pixelwidth = W;
D. style. pixelheight = h;
}
Function divsizeby (D, DW, DH ){
D. style. pixelwidth + = dw;
D. style. pixelheight + = DH;
}
Function divzindex (D, Z ){
D. style. zindex = z;
}
Function divbgcolor (D, C ){
D. style. Background = C;
}
Function divtxtcolor (D, C ){
D. style. Color = C;
}
</SCRIPT>
</Head>
<Body id = "bodyid">
<Form name = "form1">
<P>
<Input type = "button" value = "Mobile D2" onclick = "divmoveby (D2, 10, 10)"> <br>
<Input type = "button" value = "Move D3 to D2 (0, 0)" onclick = "divmoveto (D3, 0, 0)"> <br>
<Input type = "button" value = "Move D3 to D2 (75, 75)" onclick = "divmoveto (D3, 75)"> <br>
</P>
<P>
<Input type = "button" value = "Enlarge d1" onclick = "divsizeby (D1, 15, 15)"> <br>
<Input type = "button" value = "zoom in D1" onclick = "divsizeby (D1,-15,-15)"> <br>
</P>
<P>
<Input type = "button" value = "Hide D2" onclick = "divhide (D2)"> <br>
<Input type = "button" value = "display D2" onclick = "divshow (D2)"> <br>
</P>
<P>
<Input type = "button" value = "Priority: d1" onclick = "divzindex (D1, 2); divzindex (D2, 1)"> <br>
<Input type = "button" value = "D2" onclick = "divzindex (D1, 1); divzindex (D2, 2)"> <br>
</P>
<P>
<Input type = "button" value = "fill color" onclick = "color ()"> <br>
</P>
<P>
<Input type = "button" value = "Return default state" onclick = "back ()"> <br>
</P>
</Form>
<Div id = "d1">
<B> d1 </B>
</Div>
<Div id = "D2">
<B> D2 </B> <br>
D2 contains D3
<Div id = "D3">
<B> D3 </B> <br>
D3 is the child layer of D2
</Div>
</Div>

<! --------------------------------------- Reduce characters ------------------------------------------------------> <SCRIPT _ Language = JavaScript _>
Function onfeedbackchange (field, maxlength, counter)
{
VaR counterspan = Document. getelementbyid (Counter );
VaR textbox = Document. getelementbyid (field );
VaR length;
If (typeof (textbox )! = "Undefined ")
Length = textbox. value. length;
If (typeof (length )! = "Undefined ")
{
VaR charsremaining = maxlength-length;
VaR scrolltop = textbox. scrolltop;
VaR scrollleft = textbox. scrollleft;
If (charsremaining <0)
{
VaR cutpos = maxLength-1;
While (cutpos> = 0 & (textbox. value. charat (cutpos) = '/N' | textbox. value. charat (cutpos) = '/R') cutpos --;
Textbox. value = textbox. value. substring (0, cutpos + 1 );
Charsremaining = maxlength-textbox. value. length;
Textbox. scrolltop = scrolltop;
Textbox. scrollleft = scrollleft;
}
Counterspan. innerhtml = 'remaining characters: '+ charsremaining;
}
} Function onfeedbackchangewrapper ()
{
Onfeedbackchange ("txtcomments", 1024, "charcount ")
}
</Script _>
<Textarea name = "txtcomments" rows = "4" Cols = "40" id = "txtcomments"
Onfocus = "This. onpaste = onfeedbackchangewrapper;
This. onpropertychange = onfeedbackchangewrapper;
This. oninput = onfeedbackchangewrapper ;"
Onkeyup = "onfeedbackchange ('txtcomments', 1024, 'charcount');">
</Textarea>
<Div id = "charcount"> </div> <! Success> <! --------------------------------------- Set cookie ------------------------------------------------------------>
<SCRIPT _>
Function getcookieval (offset)
// Obtain the decoded cookie value
{
VaR endstr = Document. Cookie. indexof (";", offset );
If (endstr =-1)
Endstr = Document. Cookie. length;
Return Unescape (document. Cookie. substring (offset, endstr ));
}
Function setcookie (name, value)
// Set the cookie value
{
VaR expdate = new date ();
VaR argv = setcookie. arguments;
VaR argc = setcookie. Arguments. length;
VaR expires = (argc> 2 )? Argv [2]: NULL;
VaR Path = (argc> 3 )? Argv [3]: NULL;
VaR domain = (argc> 4 )? Argv [4]: NULL;
VaR secure = (argc> 5 )? Argv [5]: false;
If (expires! = NULL) expdate. settime (expdate. gettime () + (expires * 1000 ));
Document. Cookie = Name + "=" + escape (value) + (expires = NULL )? "": ("; Expires =" + expdate. togmtstring ()))
+ (Path = NULL )? "": ("; Path =" + path) + (domain = NULL )? "": ("; Domain =" + domain ))
+ (Secure = true )? "; Secure": ""); alert (argc );
}
Function delcookie (name)
// Delete the cookie
{
VaR exp = new date ();
Exp. settime (exp. gettime ()-1 );
VaR cval = getcookie (name );
Document. Cookie = Name + "=" + cval + "; expires =" + exp. togmtstring ();
}
Function getcookie (name)
// Obtain the original cookie value
{
VaR Arg = Name + "= ";
VaR Alen = Arg. length;
VaR clen = Document. Cookie. length;
VaR I = 0;
While (I <clen)
{
VaR J = I + Alen;
If (document. Cookie. substring (I, j) = Arg)
Return getcookieval (j );
I = Document. Cookie. indexof ("", I) + 1;
If (I = 0) break;
}
Return NULL;
}
Function ()
{
 
}
</Script _> <input type = button value = "mbutton" onclick = "A ();"> <! Success> <! ------------------------------------------- Progress bar -------------------------------------------------------------->
<Table id = LPC bgcolor = #98cc00 Height = 20>
<Tr> <TD> </tr>
</Table>
<SCRIPT _ Language = JavaScript _>
VaR Pc = 0;
Load ();
Function load (){
PC + = 1;
LPC. style. width = PC + "% ";
Time = setTimeout ("load ()", 50 );
If (Pc> 100)
{
// Window. Location. Reload ();
Cleartimeout (time );
}
}
</Script _>
<! Latency>

</Body>
</Html>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More