jQuery网页版键盘打字练习

来源：互联网 2023-03-16 23:55:16 版权归原作者所有，如有侵权，请联系我们

jQuery网页版键盘打字练习

工具/原料

adobe dreamweaver

方法/步骤

新建html文档。

jQuery网页版键盘打字练习

1该信息未经许可获取自百度经验

书写hmtl代码。

div class="showCont">

ul>

/ul>

div class="line">!--竖线-->/div>

/div>

div class="funCont">

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>

/div>

div class="keyCont">

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 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 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 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> /

/div>

jQuery网页版键盘打字练习

书写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>

jQuery网页版键盘打字练习