color 验证 con upa date() () title 前端 head
1、<script></script>的三种用法:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <p id="demo">HELLO</p>
- <script>
- document.write(Date())
- document.getElementById("demo").innerHTML=Date();
- </script>
- <button type="button" onclick=window.alert("生日快乐")>press</button>
- </body>
- </html>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 登录
- </title>
- <link rel="stylesheet" type="text/CSS" href="../static/css/886.css">
- <script>
- function fnLogin() {
- var oUname = document.getElementById("uname") var oUpass = document.getElementById("upass");
- var oError = document.getElementById("error_box") if (oUname.value.length < 6 || oUname.value.length > 20) {
- oError.innerHTML = "用户名至少6-20位"
- }
- if (oUpass.value.length < 6 || oUpass.value.length > 20) {
- oError.innerHTML = "密码至少6-20位"
- }
- if ((oUname.value.length < 6 || oUname.value.length > 20) && (oUpass.value.length < 6 || oUpass.value.length > 20)) {
- oError.innerHTML = "用户名密码至少6-20位"
- }
- }
- </script>
- </head>
- function myFuntion() {
- document.getElementById("demo").innerHTML = Date();
- }
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <p id="demo">啦啦啦</p>
- <script>
- document.write(Date())
- document.getElementById("demo").innerHTML=Date();
- </script>
- <button type="button" onclick=window.alert("你真胖")>press</button>
- </body>
- </html>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <link rel="stylesheet" type="text/css" href="../static/css/886.css">
- <script>
- function fnLogin() {
- var oUname=document.getElementById("uname")
- var oUpass=document.getElementById("upass");
- var oError=document.getElementById("error_box")
- if(oUname.value.length<6|| oUname.value.length > 20){
- oError.innerHTML="用户名至少6-20位"
- }
- if(oUpass.value.length<6|| oUpass.value.length > 20){
- oError.innerHTML="密码至少6-20位"
- }
- if((oUname.value.length < 6 || oUname.value.length > 20) && (oUpass.value.length < 6 || oUpass.value.length > 20)){
- oError.innerHTML="用户名密码至少6-20位"
- }
- }
- </script>
- </head>
- <body>
- <div class="box">
- <h2 class="dd">登录</h2>
- <div class="input_box">
- <input id="uname" type="text" placeholder="请输入用户名">
- </div>
- <div class="input_box">
- <input id="upass" type="password" placeholder="请输入密码">
- </div>
- <div id="error_box"><br></div>
- <div>
- <button class="jj"onclick="fnLogin()">登录</button>
- </div>
- </div>
- </body>
- </html>
- .input_box {
- width: 325px;
- height: 40px;
- padding - left: 5px;
- padding - right: 5px;
- border: 1px#FF66CC solid;
- border - radius: 4px;
- background: none;
- line - height: 40px;
- font - size: 14px;
- color: #6699FF;
- vertical - align: middle;
- }
- .box {
- align - content: center;
- background - color: #FFCCFF;
- height: 250px;
- width: 400px;
- float: left;
- text - align: center;
- vertical - align: middle;
- position: absolute;
- top: 50 % ;
- left: 50 % ;
- margin: -150px 0 0 - 150px;
- border: 1px solid#ccc;
- width: 340px;
- }
- .jj {
- text - align: center;
- color: #fff;
- background: #990099;
- width: 50 % ;
- padding: 9px 18px;
- font - size: 18px;
- border: none;
- border - radius: 25px;
- cursor: pointer;
- }
- body {
- background - color: #CC33CC;
- }.dd {
- color: #FF3366;
- }
JavaScript 基础,登录前端验证
来源: http://www.bubuko.com/infodetail-2368485.html