Home > Developer > JavaScript
Press A To Go To The exercise webpage. Press
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Tree menus similar to QQ's friend/blacklist
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta name = "Generator "CONTENT =" EditPlus "> <meta name =" Author "CONTENT =" "> <meta name =" Keywords "CONTENT =" "> <meta name =" Description "CONTENT = ""> </HEAD> <BODY> <style> body {font-family: verdana, helvetica, arial, sans-serif;} # mainMenu {background-color: # EEE; border: 1px solid # CCC; color: #000; width: 203px ;} # menuList {margin: 0px; padding: 10px 0px 10px 15px;} li. menubar {background: url (/images/plus.gif) no-repeat 0em 0.3em; font-size: 12px; line-height: 1.5em; list-style: none outside ;}. menu ,. submenu {display: none; margin-left: 15px; padding: 0px ;}. menu li ,. submenu li {background: url (/images/square.gif) no-repeat 0em 0.3em; list-style: none outside;}. actuator {background-color: transparent; color: #000; font-size: 12px; padding-left: 15px; text-decoration: none;}. actuator: hover {text-decoration: underline ;}. menu li ,. submenu li a {background-color: transparent; color: #000; font-size: 12px; padding-left: 15px; text-decoration: none ;}. menu li a: hover, submenu li a: hover {/* border-bottom: 1px dashed #000; */text-decoration: underline;} span. key {text-decoration: underline ;} </style> </pead> <body> <ul id = "menuList"> <li class = "menubar"> figure show area favorites <ul id = "productsMenu" class = "menu"> <li> my friend <ul id = "newPhonesMenu" class = "submenu"> <li> Zhang San [10000001] </li> <li> li Si [10000002] </li> <li> Zhang San [10000001] </li> <li> li Si [10000002] </li> </ul> </li> <li> stranger <ul id = "compareMenu" class = "submenu"> <li> Zhang San [10000001] </li> <li> li Si [10000002] </li> <li> Zhang San [10000001] </li> <li> li Si [10000002] </li> </ul> </body> </BODY> </HTML>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Super powerful Form Verification
<Title> Form Verification class Validator v1.01 </title> <style> body, td {font: normal 12px Verdana; color: #333333} input, textarea, select, td {font: normal 12px Verdana; color: #333333; border: 1px solid #999999; background: # ffffff} table {border-collapse: collapse;} td {padding: 3px} input {height: 20;} textarea {width: 80%; height: 50px; overfmin: auto;} form {display: inline} </style> <table align = "center"> </table>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Beautiful script calendar
<Style> Input {font-family: verdana; font-size: 9pt; text-decoration: none; background-color: # FFFFFF; height: 20px; border: 1px solid #666666; color: #000000 ;}. calendar {font-family: verdana; text-decoration: none; width: 170; background-color: # C0D0E8; font-size: 9pt; border: 0px dotted #1C6FA5 ;}. calendarTD {font-family: verdana; font-size: 7pt; color: #000000; background-color: # f6f6f6; height: 20px; width: 11%; text-align: center ;}. title {font-family: verdana; font-size: 11pt; font-weight: normal; height: 24px; text-align: center; color: #333333; text-decoration: none; background-color: # A4B9D7; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-bottom-style: 1px; border-top-color: #999999; border-right-color: #999999; border-bottom-color: #999999; border-left-color: #999999 ;}. day {font-family: verdana; font-size: 7pt; color: #243F65; background-color: # E5E9F2; height: 20px; width: 11%; text-align: center ;}. daySat {font-family: verdana; font-size: 7pt; color: # FF0000; text-decoration: none; background-color: # E5E9F2; text-align: center; height: 18px; width: 12% ;}. daySun {font-family: verdana; font-size: 7pt; color: # FF0000; text-decoration: none; background-color: # E5E9F2; text-align: center; height: 18px; width: 12% ;}. dayNow {font-family: verdana; font-size: 7pt; font-weight: bold; color: #000000; background-color: # FFFFFF; height: 20px; text-align: center ;}. dayTitle {font-family: verdana; font-size: 9pt; color: #000000; background-color: # C0D0E8; height: 20px; width: 11%; text-align: center ;}. daySatTitle {font-family: verdana; font-size: 9pt; color: # FF0000; text-decoration: none; background-color: # C0D0E8; text-align: center; height: 20px; width: 12% ;}. daySunTitle {font-family: verdana; font-size: 9pt; color: # FF0000; text-decoration: none; background-color: # C0D0E8; text-align: center; height: 20px; width: 12% ;}. dayButton {font-family: Webdings; font-size: 9pt; font-weight: bold; color: #243F65; cursor: hand; text-decoration: none ;} </Style> <table border = "0" cellpadding = "0" cellspacing = "1" class = "Calendar" id = "caltable"> <thead> <tr align =" center "valign =" middle "> <td colspan =" 7 "class =" Title "> 3 <input name =" year "type =" text "size =" 4 "maxlength = "4" onkeydown = "if (event. keyCode = 13) {setDate ()} "onkeyup =" this. value = this. value. replace (/[^ 0-9]/g, '')" onpaste = "this. value = this. value. replace (/[^ 0-9]/g ,'') "> year <input name =" month "type =" text "size =" 1 "maxlength =" 2 "onkeydown =" if (event. keyCode = 13) {setDate ()} "onkeyup =" this. value = this. value. replace (/[^ 0-9]/g, '')" onpaste = "this. value = this. value. replace (/[^ 0-9]/g ,'') "> month 4 </td> </tr> <tr align =" center "valign =" middle "> </TR> </thead> <TBODY border = 1 cellspacing = "0" cellpadding = "0" ID = "calendar" ALIGN = center onclick = "getDiary () "> </TBODY> </TABLE>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Beating menu
<Html> <pead> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "/> <title> imitation as navigation menu </title> <style type =" text/css "> </style> </pead> <body> news Populor Sports Woman 1. is there any congenital deficiency in writing ASP with Jscript? 3. No. 1. Is xhtml + css really coming? 2. Replacing traditional websites with Flash 3. When can Flash connect to the database? 1. 10 programmers and Miss programmers are the same. 2. Chinese programmers and Chinese football? 1. What is lacking in the 21st century? Talent http://www.gamvan.com </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Classic float layer with shadow
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"> <ptml> <pead> <title> MyPixbot </title> <meta http-equiv =" content-Type "content =" text/html; charset = iso-8859-1 "> <style type =" text/css "> </style> </pead> <body> <table width =" 180 "border =" 1 "cellpadding = "0" cellspacing = "0"> <tr> <td class = "caption"> SeekAssist </td> <td width = "14" align = "center" >%< /td> <td width = "14" align = "center"> X </td> </ Tr> <tr id = "Win win"> <td height = "100" colspan = "3" bordercolor = "# eeeeee"> </td> </tr> </table> <table width = "180" border = "1" cellpadding = "0" cellspacing = "0"> <tr> <td class = "caption"> SeekRank </td> <td width = "14" align = "center" >%</td> <td width = "14" align = "center"> X </td> </tr> <tr id = "rankwin"> <td height = "100" colspan = "3" bordercolor = "# eeeeee"> </td> </tr> </table> <table width = "180" border = "1" Cellpadding = "0" cellspacing = "0"> <tr> <td class = "caption"> MyColor </td> <td width = "14" align = "center"> % </td> <td width = "14" align = "center"> X </td> </tr> <tr id = "mycolorwin"> <td height =" 100 "colspan =" 3 "bordercolor =" # eeeeee "> <table width =" 100% "border =" 0 "cellspacing =" 0 "cellpadding =" 2 "> <tr> <td align = "center"> Default </td> </tr> <td align = "center"> StyleSheet #1 </td> </tr> <tr> <td align = "center "> StyleSheet #2 </td> </tr> <td align =" center "> StyleSheet #3 </td> </tr> <td align = "center"> StyleSheet #4 </td> </tr> <td align = "center"> StyleSheet #5 </td> </tr> </table> </td> </tr> </table> <table width = "570" border = "1" cellpadding = "0" cellspacing = "0"> <tr> <td> <table width = "100%" border = "0" cellspacing = "0" cellpadding = "0"> <tr> <td class = "caption"> Results </td> <td width = "12" class = "butto N ">%</td> <td width =" 12 "class =" button "> X </td> </tr> </table> </td> </ tr> <td height = "20" bordercolor = "# eeeeee"> <input name = "url" type = "text" value = "http://www.google.com/search? Q = ezlee "size =" 100 "> Search </td> </tr> <tr id =" resultswin "> <td height =" 318 "valign =" top "class = "navframe"> Welcome! </Aiframe> </td> </tr> <td height = "14" class = "statusbar"> Ready! </Td> </tr> </table> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
1 very good loading effect
<Html> <pead> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "> <title> untitled document </title> </pead> <body style =" FONT-SIZE: 10pt; FONT-FAMILY: Verdana, Arial, helvetica "> <input type =" BUTTON "VALUE =" Click Me! "Onclick =" startLongProcess (); "> Downloading Requested Document Please wait while I download the document you requested. this may take several seconds. <input style = "FONT-FAMILY: Tahoma; FONT-SIZE: 8pt" TYPE = "button" ID = "btnCancel" onclick = "stopLongProcess (); "VALUE =" Cancel "> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Traditional simplified text Conversion Tool
<Html> <pead> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "> <title> Haao's blog </title> <link href =" style.css "rel =" stylesheet "type =" text/css "> </script> </pead> <body> <table width = "750" border = "0" align = "center" cellpadding = "5" cellspacing = "1" bgcolor = "# CCCCCC"> <tr> <td align = "center" bgcolor = "# F4F4F4"> <B> welcome to the simplified text Conversion Tool </B> </td> </tr> <tr> <td align = "center" bgcolor = "# FFFFFF"> <input type = button class = "Submit" onclick = iText. value = iText. value. s2t () value = '→ fan '> <input type = button class = "Submit" onclick = iText. value = iText. value. t2s () value = 'fan → Jian '> <pre class = "code" cols = "70" rows = "8" class = "transform" id = "iText"> welcome to use traditional plain text conversion </textarea> </td> </tr> </table> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Corner frame without image implementation
++ RunCode_BLOCK_cW6 × 4 t ++
Obtain information about the page, such as its size and width.
<Body> click "view information". </body>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
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
