jQuery网页版键盘打字练习
1、新建html文档。
2、书写hmtl代艨位雅剖码。<div class="showCont"><稆糨孝汶;ul></ul><div class="line"><!--竖线--></div></div><div class="funCont"><p><span id="uTime">时间:0</span> <span id="result">结果:0</span><a id="state">开始(space)</a> <label>个数 <input disabled="true" type="text" id="allNum" value="100"> </label></p></div><div class="keyCont"><p> <a id="k1">1</a><a id="k2">2</a><a id="k3">3</a><a id="k4">4</a><a id="k5">5</a> <a id="k6">6</a><a id="k7">7</a><a id="k8">8</a><a id="k9">9</a><a id="k0">0</a> <a>-</a><a>=</a> </p><p class="pdl2"> <a id="kQ">Q</a> <a id="kW">W</a> <a id="kE">E</a> <a id="kR">R</a> <a id="kT">T</a> <a id="kY">Y</a> <a id="kU">U</a> <a id="kI">I</a> <a id="kO">O</a> <a id="kP">P</a> <a>[</a> <a>]</a> </p><p class="pdl4"> <a id="kA">A</a> <a id="kS">S</a> <a id="kD">D</a> <a id="kF">F</a> <a id="kG">G</a> <a id="kH">H</a> <a id="kJ">J</a> <a id="kK">K</a> <a id="kL">L</a> <a>;</a> <a>'</a> <a>|</a> </p><p class="pdl6"> <a id="kZ">Z</a> <a id="kX">X</a> <a id="kC">C</a> <a id="kV">V</a> <a id="kB">B</a> <a id="kN">N</a> <a id="kM">M</a> <a><</a> <a>></a> <a>?</a> <a>\</a> </p></div>
3、书写css代码。<style>* { padding: 0; margin: 0; list-style: none; }body { background-color: #8DE2F0; padding-top: 150px; }input { border: none; outline: none; }.showCont { width: 800px; height: 80px; border: 1px solid #fff; margin: 20px auto; position: relative; overflow: hidden; }.showCont ul { height: 80px; top: 0; left: 320px; position: absolute; }.showCont ul li { float: left; width: 80px; height: 80px; line-height: 80px; text-align: center; color: #fff; font-size: 30px; font-family: "Arial"; }.line { height: 80px; width: 80px; border-left: 1px solid #fff; border-right: 1px solid #fff; position: absolute; top: 0; left: 320px; }.funCont { width: 800px; height: 30px; margin: 0 auto; color: #fff; font: 16px "微软雅黑"; line-height: 30px; }.funCont a, .funCont label { float: right; margin-right: 10px; }.funCont input[type='text'] { width: 50px; line-height: 30px; height: 30px; border-radius: 3px; color: #666; font-size: 20px; text-align: center; border-bottom: 2px solid #6eaeb9; }.funCont a:hover { color: #6eaeb9; }.keyCont { width: 750px; height: 282px; margin: 20px auto; border: 1px solid #fff; padding-left: 50px; padding-top: 68px; }.keyCont p { display: block; width: 100%; clear: both; }.keyCont p a { display: block; float: left; width: 50px; height: 50px; line-height: 50px; text-align: center; background-color: #fff; color: #8DE2F0; font-size: 20px; margin: 3px 2px; border-radius: 4px; font-weight: bold; border-bottom: 2px solid #6eaeb9; }.pdl2 { padding-left: 20px; }.pdl4 { padding-left: 40px; }.pdl6 { padding-left: 60px; }</style>
4、书写并添加js代码。<script src="js/jquery-latest.js"></script>
5、代码整体结构。
6、查看效果。
