<html5+css3+js>各种事件_html5加css触发事件-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_17615475/article/details/50247491

(《javascript&jquery交互式web前端开发》学习记录)

html5:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Sign up</title>
<link rel="stylesheet" href="event.css" />
</head>

<body id="body">
	<div id="stats">
    	screenX:<input type="text" id="sx" />
        screenY:<input type="text" id="sy" /><span class="divider">|</span>
        pageX:<input type="text" id="px" />
        pageY:<input type="text" id="py" /><span class="divider">|</span>
        clientX:<input type="text" id="cx" />
        clientY:<input type="text" id="cy" />
    </div>
	<div id="page">
    	<h1>List King</h1>
        <h2>new account</h2>
        <form method="post" action="sina.cn" id="formSignup">
        	<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" />
            <label for="message">Profile: </label>
            <textarea id="message"></textarea>
            <div id="charactersLeft">16 characters left.</div>
            <div id="lastKey"></div>
            <label for="package" class="selectbox">Select a membership plan: </label>
            <select id="package">
            	<option value="none">------------</option>
            	<option value="annual">1 year($50)</option>
                <option value="monthly">1 month($5)</option>
            </select>
            <div id="packageHint" class="tip"></div>
            <input type="checkbox" id="terms" />
            <label for="terms" class="checkbox">Check to agree to terms & conditions</label>
            <div id="termsHint" class="warning"></div>
            <input type="submit" value="Sign up" />
            
        </form>
    </div>
    <script type="text/javascript" src="event.js"></script>
</body>
</html>

CSS3:

@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;
	position:relative;
	top:80px;
	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{
	font-size:90%;
	margin:6px 0;
	text-align:left;
}
#page 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;
}
#page input[type='text']:focus,input[type="password"]:focus,textarea:focus{
	background-color:#FFFFFF;
	border:1px solid #FFFFFF;
}
#page 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;
}
#page input[type='submit']:hover{
	position:relative;
	top:2px;
	background-color:#FF5E61;
	border:none;
}
#page input[type='checkbox']{
	display: inline;
}

.warning{
	background:url(warning.png) no-repeat 0px 10px;
	padding:10px 0 0 25px;
}
.tip{
	background:url(tip.png) no-repeat 0px 10px;
	padding:10px 0 0 25px;
}
#note{
	color:#FFFFFF;
	background-color:#000000;
	opacity:0.9;
	position:absolute;
	top:0;
	padding:5em 1em 1em 1em;
	height:90%;
	width:90%;
}
#note .header + div{
	background:#FFFFFF;
	position:relative;
	text-align:center;
	color:#FF7779;
	padding:20px;
	margin:30px 200px;
	border:2px solid #FF7779;
	font-size:0.8em;
}
#note a{
	margin-right:180px;
	text-decoration:none;
	color:#FFFFFF;
}
#note .header{
	text-align:right;
}
#stats{
	position:fixed;
	background-color:#85C379;
	text-align:center;
	font-size:120%;
	padding: 10px;
	width:100%;
	top:0;
	left:0;
	}
#stats input{
	border:1px solid #FFFFFF;
	border-radius: 5px;
	width:5em;
	padding:2px;
}
.divider{
	border-left:2px solid #FFFFFF;
	border-right:2px solid #FFFFFF;
	margin:0 0px;
	color:#85C379;
}

JS:

//事件focus(获得焦点时触发), blur(失去焦点时触发)
/*function checkUsername(){
	var username=el.value;
	if(username.length<5){
		elMsg.className='warning';
		elMsg.textContent='Not long enough yet...';
	}else{
		elMsg.textContent='';
	}
}
function tipUsername(){
	elMsg.className='tip';
	elMsg.innerHTML='Username must be at least 5 characters';
}
var el=document.getElementById('username');
var elMsg=document.getElementById('feedback');
el.addEventListener('focus',tipUsername,false);
el.addEventListener('blur',checkUsername,false);*/


//单击
/*var msg='<div class=\"header\"><a id=\"close\" href="#">close X</a></div>';
msg+='<div><h2>System Maintenance</h2>';
msg+='Our servers are being updated between 3 and 4 a.m. ';
msg+='During this time, theremay be minor disruptions to service.</div>';
var elNote=document.createElement('div');
elNote.setAttribute('id','note');
elNote.innerHTML=msg;
document.body.appendChild(elNote);
function dismissNote(){
	document.body.removeChild(elNote);
}
var elClose=document.getElementById('close');
elClose.addEventListener('click',dismissNote,false);*/


//确定位置
/*var sx=document.getElementById('sx');
var sy=document.getElementById('sy');
var px=document.getElementById('px');
var py=document.getElementById('py');
var cx=document.getElementById('cx');
var cy=document.getElementById('cy');
function showPosition(event){
	sx.value=event.screenX;
	sy.value=event.screenY;
	px.value=event.pageX;
	py.value=event.pageY;
	cx.value=event.clientX;
	cy.value=event.clientY;
}
var el=document.getElementById('body');
el.addEventListener('mousemove',showPosition,false);*/


//键盘事件
/*var el;
function charCount(e){
	var textEntered,charDisplay,counter,lastkey;
	textEntered=document.getElementById('message').value;
	charDisplay=document.getElementById('charactersLeft');
	counter=(16-(textEntered.length));
	charDisplay.textContent=counter+' characters left.';
	lastkey=document.getElementById('lastKey');
	lastkey.textContent='Last key in ASCII code: '+e.keyCode;
}
el=document.getElementById('message');
el.addEventListener('keyup',charCount,false);*/


//表单事件
/*var elForm,elSelectPackage,elPackageHint,elTerms,elTermsHint;
elForm=document.getElementById('formSignup');
elSelectPackage=document.getElementById('package');
elPackageHint=document.getElementById('packageHint');
elTerms=document.getElementById('terms');
elTermsHint=document.getElementById('termsHint');
function packageHint(){
	var pack=this.options[this.selectedIndex].value;
	if(pack==='monthly'){
		elPackageHint.innerHTML='Save $10 if you pay for 1 year!';
	}else{
		elPackageHint.innerHTML='Wise choice!';
	}
}
function checkTerms(event){
	if(!elTerms.checked){
		elTermsHint.innerHTML='You must agree to the terms.';
		event.preventDefault();
	}
}
elForm.addEventListener('submit',checkTerms,false);
elSelectPackage.addEventListener('change',packageHint,false);*/

代码下载：http://download.youkuaiyun.com/detail/qq_17615475/9351249