JS基础
可以选择Hbudile或者vis code等
外部导入<script></script>和<link>导入一样的
变量都为 var类型全部都可以定义，赋值为什么就为什么类型，但是int,double等可能不一样，在其中只能为number类型，如果不赋值则为undefinde
函数定义
Function 函数名(){
}这里之和函数名有关系如果有相同的函数名方法，则会覆盖前一个相同函数名的函数
基本语法
各种API查阅文档就可以使用了
DOM对象
文档对象模型和xml一样我们需要对文档进行解析获得我们需要的内容如，document.body.clientwidth获得文档的宽度等，我们需要的东西都可以通过JS获得
打字游戏
<!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="结束" onclick="stop()"/>
<p><span id="sorce">0</span>积分</p>
<script>
var timer=null;
var timer2=null;
//创建一个arr存放div并且在创建的时候添加
var arr= [];
function start(){
if(timer==null){
timer = window.setInterval(createDiv,800);
timer2 = window.setInterval(moveDiv,500);
}
}
function stop(){
window.clearInterval(timer);
//也要停止div的移动
window.clearInterval(timer2);
timer=null;
}
function moveDiv(){
//遍历数组
for(var i=0;i<arr.length;i++){
//获得高度
var top = parseInt(arr[i].style.top);
//判断高度和文档的高度，删除body中的div和数组中的div
var height = document.documentElement.clientHeight;
if(top+40>height){
document.body.removeChild(arr[i]);
arr.splice(i,1);
}else{
top=top+10;
arr[i].style.top=top+"px";
}
//div移动
}
}
function createDiv(){
//创建一个div
var d = document.createElement("div");
//生成字母的随机数
var random=Math.random()*26+65;
var i = parseInt(random);
var c = String.fromCharCode(i);
//添加到div的文本
d.innerText=c;
//创建一个class属性
d.className="c1";
//获得文本的长度
var width = document.documentElement.clientWidth;
//获得生成的div的范围
left=Math.random()*(width-240)+120;
//添加到div中的定位属性中
d.style.left=left+"px";
d.style.top="0px";
//添加到数组中
arr.push(d)
//追加到body后面
document.body.appendChild(d);
}
//键盘判断
document.onkeydown=function(e){
if(timer==null){
return;
}
//遍历数组然后判断是否为该字符
var c=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>
