JS basis
You may be selected Hbudile or vis code , etc.
Introducing external <script> </ script> and <link> introduced into the same
Variables are var types can all be defined, assigned why Why type but int, double , etc. may not be the same, in which can only be number type, if the assignment was not undefinde
Function definition
Function function name () {
} And function names here if the relationship with the same function name method, will be a function of the same function name front cover
The basic syntax
Various API consult the documentation is ready for use
DOM Object
Document Object Model and xml as we need to get the contents of the document is parsed as we need, document.body.clientWidth get the document width, what we need are available through JS obtain
Typing Games
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c1{
width: 40px;
height: 40px;
background-color: blue;
text-align: center;
line-height: 40px;
font-size: 25px;
position: absolute;
}
</style>
</head>
<body>
<input type="button" value="开始" onclick="start()" />
<input type = "button" value = " End" the onclick = "STOP ()" />
<P> <span ID = "sorce"> 0 </ span> Integral </ P>
<Script> var Timer = null ;
var Timer2 = null ;
// create a storage div arr added and the time of creation var arr = [];
function Start () {
IF (Timer == null ) {
Timer = the window.setInterval (createDiv, 800 );
Timer2 = the window.setInterval (moveDiv, 500 );
}
}function stop(){
window.clearInterval (Timer);
//Div also stops movement
window.clearInterval (Timer2);
Timer = null ;
}
function moveDiv () {
// iterate
for ( var I = 0; I <arr.length; I ++ ) {
// highly
var Top = the parseInt (ARR [I] .style.top);
// Analyzing and height of the document, and delete the body of the array div div
var height = document.documentElement.clientHeight;
IF (Top + 40> height) {
document.body.removeChild (ARR [I]);
arr.splice (I, . 1 );
} the else {
Top = Top + 10 ;
ARR [I] .style.top = Top + "PX" ;
}
// div mobile
}
}
function createDiv () {
// create a div
var D = document.createElement ( "div" );
// generates a random number of letters
var random = Math.random () * + 26 is 65 ;
var I = the parseInt (random);
var= C the String.fromCharCode (I);
// add to the text div
d.innerText = C;
// Create a class attribute
d.className = "C1" ;
// get the length of the text
var width = document.documentElement.clientWidth ;
// range is obtained div generated
left = Math.random () * (width-240) +120 ;
// add to positioning the div attribute
d.style.left = left + "PX" ;
d.style. Top = "0px" ;
// add to the array
arr.push (D)
// appended to the body rear
document.body.appendChild (D);
}
// keyboard Analyzing
document.onkeydown = function (E) {
IF (Timer == null ) {
return ;
}
// iterate is then determined whether that character
var C = the String.fromCharCode (e.keyCode);
var sorce = document.getElementById ( "sorce" );
for ( var I = 0; I <arr.length; I ++ ) {
var C1 = arr[i].innerHTML;
if(c==c1){
document.body.removeChild(arr[i]);
arr.splice(i,1);
sorce.innerHTML=parseInt(sorce.innerHTML)+1;
return;
}
}
}
</script>
</body>
</html>