(《javascript&jquery交互式web前端开发》学习记录)
html5代码:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Sign up</title>
<link rel="stylesheet" href="event.css" />
</head>
<body>
<div id="page">
<h1>List King</h1>
<h2>new account</h2>
<form method="post" action="www.weibo.com/maystudio19082015">
<label for="username">Creata a username: </label>
<input type="text" id="username" />
<div id="feedback"></div>
<label for="password">Create a password:</label>
<input type="password" id="password" />
<input type="submit" value="Sign up" />
</form>
</div>
<script type="text/javascript" src="event.js"></script>
</body>
</html>
css代码:
@charset "UTF-8";
/* CSS Document */
body{
background-color:#000000;
padding:0;
margin:0;
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
color:#FFFFFF;
}
#page{
background-color:#434343;
margin:0 auto;
max-width:480px;
padding:0 10px 0px;
}
h1{
background:url(kinglogo.png) no-repeat center;
text-indent:-1000%;
overflow:hidden;
height:75px;
margin:0 auto;
width:117px;
line-height:75px;
padding:20px 0 10px;
}
h2{
text-align:center;
font-size:200%;
text-transform:uppercase;
letter-spacing:.1em;
}
form{
padding:0 80px 40px;
margin:0;
}
label{
display:block;
font-size:120%;
margin:6px 0;
text-align:center;
}
input[type="text"],input[type="password"],textarea{
background-color:#C4C4C4;
color:#565656;
font-size:120%;
width:100%;
padding:4px 0px;
border:1px solid #C4C4C4;
border-radius:8px;
}
input[type='text']:focus,input[type="password"]:focus,textarea:focus{
background-color:#FFFFFF;
border:1px solid #FFFFFF;
}
input[type='submit']{
display:block;
background-color:#FF8D8F;
color:#FFFFFF;
font-size:120%;
padding:6px 10px 8px;
border-radius:5px;
border-top:none;
border-left:none;
border-right:none;
border-bottom:2px solid #A56C6D;
margin:40px auto 0;
text-transform:uppercase;
}
input[type='submit']:hover{
position:relative;
top:2px;
background-color:#FF5E61;
border:none;
}
#feedback{
background:url(warning.png) no-repeat 0px 10px;
padding:10px 0 0 25px;
}
javascript代码:
//HTML事件处理程序
/*function checkUsername(){
var elMsg=document.getElementById('feedback');
var elUsername=document.getElementById('username');
if (elUsername.length<5){
elMsg.textContent='Username must be 5 characters or more';
}else{
elMsg.textContent='';
}
}*/
//传统的DOM事件处理
/*function checkUsername(){
var elMsg=document.getElementById('feedback');
if(this.value.length<5){
elMsg.textContent='Username must be 5 charactrs or more';
}else{
elMsg.textContent='';
}
}
var elUsername=document.getElementById('username');
elUsername.οnblur=checkUsername;*/
//第二级DOM事件监听器
/*function checkUsername(){
var elMsg=document.getElementById('feedback');
if(this.value.length<5){
elMsg.textContent='Username must be 5 characters or more';
}else{
elMsg.textContent='';
}
}
var elUsername=document.getElementById('username');
elUsername.addEventListener('blur',checkUsername,false);*/
//在事件监听器中使用参数
/*var elUsername=document.getElementById('username');
var elMsg=document.getElementById('feedback');
function checkUsername(minLength){
if (elUsername.value.length<minLength){
elMsg.textContent='Username must be '+minLength+' characters or more';
}else{
elMsg.textContent='';
}
}
elUsername.addEventListener('blur',function(){
checkUsername(6);
}, false);*/
//在IE8中通过备用方法使用事件监听器
/*var elUsername=document.getElementById('username');
var elMsg=document.getElementById('feedback');
function checkUsername(minLength){
if(elUsername.value.length<minLength){
elMsg.innerHTML='Username must be '+minLength+' characters or more';
}else{
elMsg.innerHTML='';
}
}
if(elUsername.addEventListener){
elUsername.addEventListener('blur',function(){checkUsername(5);},false);
}else{
elUsername.attachEvent('onblur',function(){checkUsername(5);});
}*/
//在事件监听器中使用事件对象
function checkLength(e, minLength){
var el,elMsg;
if(!e){
e=window.event;
}
el=e.target||e.srcElement;
elMsg=el.nextSibling;
if(el.value.length<minLength){
elMsg.innerHTML='Username must be '+minLength+' characters or more';
}else{
elMsg.innerHTML='';
}
}
var elUsername=document.getElementById('username');
if(elUsername.addEventListener){
elUsername.addEventListener('blur',function(e){
checkLength(e,5);
},false);
}else{
elUsername.attachEvent('onblur',function(e){
checkLength(e,5);
},false);
}