<html5+css3+js>各种事件

来源：互联网发布：大数据平台功能编辑：程序博客网时间：2024/06/05 05:10

(《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.csdn.net/detail/qq_17615475/9351249

0 0