- Three ways to use <script></script>:
- Put in the <body>
- Put in the
- Placed in an external JS file
- Three ways to output data:
- Use the document.write () method to write content to an HTML document.
- Use the Window.alert () pop-up warning box.
- Writes to an HTML element using InnerHTML.
- Use the ID property to identify the HTML element.
- Use the document.getElementById (ID) method to access HTML elements.
- Use innerHTML to get or insert element content.
- The login page prepares:
- Add an Error prompt box.
- Write a good html+css file.
- Set the ID of each INPUT element
- Defines a JavaScript function.
- Verify user name 6-20-bit
- Verify password 6-20-bit
- The onclick invokes this function.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Shijian</title></Head><Bodystyle= "Text-align:left;", bgcolor= "#ffc0cb"> <h4>Current time</h4> <PID= "Demo"></P> <BR> <Script>document.write ("hello!") document.getElementById ("Demo"). InnerHTML=Date (); </Script> <P></P> <Buttontype= "button"onclick=window.alert ("The user does not exist! ")>Landing</Button></Body></HTML>
Html
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Login/login</title> <Linkrel= "stylesheet"type= "Text/css"href=".. \guanli\css\s2.css "> <Script> functionMyLogin () {varOuname=document.getElementById ("name") varOerror=document.getElementById ("Error_box") varOpassword=document.getElementById ("Password") if(OUname.value.length<6||OUname.value.length> -) {Oerror.innertext="User name Please enter 6-20 characters"; return; } Else if(Opassword.value.length<6||Opassword.value.length> -) {Oerror.innertext="password Please enter 6-20 characters characters"; return; } Else{oerror.innerhtml=""; } } </Script></Head> <Divclass= "B1" > <Divclass= "S1" ><H3>User Login/login</H3></Div> <Divclass= "B2" >User name:<inputID= "Name"type= "text"placeholder= "Please enter user name"><BR>Password:<inputID= "Password"type= "Password"placeholder= "Please enter password"><BR> </Div> <DivID= "Error_box"><BR></Div> <Divclass= "S2" > <Buttononclick= "MyLogin ()">Login</Button> <Buttontype= "button"onclick=window.alert ("Whether to cancel login")>Cancel</Button> <label for= "Remember_me"style= "padding:0;">Remember me?</label> <inputtype= "checkbox"ID= "Remember_me"style= "position:relative; top:3px; margin:0; "name= "Remember_me"/> <Divclass= "Design"> <P>Design by SS</P> </Div> </Div></Body></HTML>
Css
Body{Background-color:palevioletred; }Div{margin:0 Auto;text-align:Center;background:Top center No-repeat Pink;}. B1{width:500px;Height:250px;Border-color:Lightseagreen;Border-width:1px;Margin-top:100px;}. S1{font-size:20px;Color:Lightseagreen;}. B2{text-align:Center;font-size:16px;Font-weight:Bold;Color:Lightseagreen; }. S2{width:150px;Height:60px;Boder-style:Hidden;}. Design{font-size:10px;Color:Black;}
JavaScript Basics, Login front-end verification