Day41
总结
我是最棒的！基础不牢，地动山摇！
定时器
setTimeout
setTimeout()：到了多少时间后执行(只执行一次)
clearTimeout() ：取消定时器
setInterval
setInterval()：每隔多长时间执行(不断执行)
clearInterval() ：取消定时器
DOM文档对象模型
获取DOM的三种方式
window.onload = function(){}方法，当加载完毕后执行匿名函数中的内容
- 根据id获取dom（最常用）
var dom = document.getElementById(“myspan”);
-
根据名字获取dom
bys = document.getElementsByName(“hobby”);
-
根据标签名获取dom
var inputs = document.getElementsByTagName(“input”);
获取根节点
var rootEle = document.documentElement;
//获取网页的高度和宽度
rootEle.clientHeight
rootEle.clientWidth
//获取内容节点
地鼠游戏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.ds{
width: 50px;
border-radius: 50%;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function(){
setInterval(function(){
//创建img元素标签 <img/>
var imgEle = document.createElement("img");
//<img src="image/1.jpg"/>
imgEle.src = "image/1.jpg";
//设置class属性 <img class="ds" src="image/1.jpg"/>
imgEle.className="ds";
//获取网页的宽度
var width = document.documentElement.clientWidth;
//获取网页的高度
var height = document.documentElement.clientHeight;
//设置随机距离左边的宽度
imgEle.style.left = (Math.random()*width)+"px";
//设置随机距离顶部的高度
imgEle.style.top = (Math.random()*height)+"px";
//给图片注册一个点击事件
imgEle.onclick = function(){
//注册一个点击事件，删除点击的节点
this.parentNode.removeChild(this);
}
//把自己创建的img标签加到body里面
document.body.appendChild(imgEle);
/*
* 元素标签操作属性：
* 1.内置属性(在写属性的时候，ide工具有提示)
* 语法格式： 标签元素.属性名 = 值（设置值）
* 标签元素.属性名(取值)
* 2.自定义属性(元素标签本身没有改属性)
* 标签元素.setAttribute(key,value);设置属性
* 标签元素.getAttribute(key);获取属性
*/
},1000);
}
</script>
</head>
<body>
</body>
</html>
innerHTML和innerText
innerHTML
如果用它获取值，他就是获取指定标签中所有的值，如果设置值，设置的值html代码，会被浏览器解析
innerText
如果用它获取值，他只会获取指定标签元素中纯文本值，不能获取html值，设置的值有html代码，它会当成纯文本进行展示
属性的操作
内置属性
var username = document.getElementById("username");
//获取值（内置属性）
console.debug(username.value);
//设置值(内置属性)
username.value = "你被我干掉了。。。。。。";
自定义属性
//自定义属性设置值
username.setAttribute("xxx","哈哈哈");
//获取自定义属性的值
var attr = username.getAttribute("xxx");
console.debug(attr);
特殊的内置属性
//复选框和单选框 checked
var hobby = document.getElementById("hobby");
//动态展示它是否被选中，设置true或者false就行了
hobby.checked = !hobby.checked;
//readonly 只读
//disabled 禁用
var nameEle = document.getElementById("name");
var sexEle = document.getElementById("sex");
nameEle.readOnly = !nameEle.readOnly;
sexEle.disabled = !sexEle.disabled;
事件驱动编程
常见的事件类型
| 事件 | 含义 |
|---|---|
| click | 单击事件 |
| dblclick | 双击事件 |
| mouseup | 鼠标抬起 |
| mousedown | 鼠标按下 |
| mouseout | 鼠标溢出 |
| mousemove | 鼠标移动 |
| mouseover | 鼠标移入 |
| onsubmit | 提交验证 |
form表单的常用事件
- onsubmit（返回false阻止提交，返回true允许提交）
- onreset（重置之前执行指定的函数，false阻止重置，true重置成功）
- focus（焦点）
- blur（失去焦点）
注册事件的三种方式
-
onclick(用的比较多)
<input type="button" onclick="clickBtn()" value="注册方式1" /> -
通过dom对象注册
//获取dom对象 var dom = document.getElementById("clickBtn2"); //通过dom对象注册点击事件 dom.onclick = function(){ alert("BBBBBBBBBBB"); } -
通过给dom 对象添加监听器(不常用)
//方式3： dom = document.getElementById("clickBtn3"); function go(){ console.debug("CCCCCCCCCCCCCC"); } function go1(){ console.debug("DDDDDDDDDDDDDDD"); } if(dom.addEventListener){ dom.addEventListener("click",go) dom.addEventListener("click",go1) dom.removeEventListener("click",go); dom.removeEventListener("click",go1); }else{ dom.attachEvent("onclick", go); dom.attachEvent("onclick",go1); dom.detachEvent("onclick",go); dom.detachEvent("onclick",go1); }
方式2与方式3的区别
方式3在同一个事件源上，我们可以同时加多次相同事件，而方式2是不行的，并且方式3的兼容性差，addEventListener()只支持IE8以上的浏览器。
打字游戏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.letter{
border: 3px solid blue;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
background: black;
color: red;
font-size: 40px;
border-radius: 50%;
position: absolute;
top: 0px;
left: 0px;
}
.score{
border: 3px solid blue;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
font-size: 40px;
position: absolute;
top: 0px;
right: 2px;
}
</style>
<script type="text/javascript">
//要产生A - Z 的随机数 所以要随机产生65-91的随机数
//定义一个数组，该数组把所有的字母div装进来
var letters = [];
/**
* 随机产生字母
*/
function createLetter(){
//创建字母的div元素
var letterDiv = document.createElement("div");
//设置样式
letterDiv.className = "letter";
//距离右边的距离
var right = document.documentElement.clientWidth - 130;
//距离左边的距离
var left = 85;
//产生存放随机产生的字母div的位置
letterDiv.style.left = parseInt(Math.random()*(right-left)+left)+"px";
//产生A-Z对应的ASCII值
var randomNum = parseInt(Math.random()*26+65);
//把ASCII值转为字母
var c = String.fromCharCode(randomNum);
//给指定的div设置值
letterDiv.innerHTML = c;
//把分数div放到body元素标签内部
document.body.appendChild(letterDiv);
//把创建的字母div放到数组中
letters.push(letterDiv);
}
/**
* 移动分数div
*/
function moveLetter(){
//安全距离
var clientHeight = document.documentElement.clientHeight-100;
for(var k in letters){
//拿到具体的字母div
var letter = letters[k];
//设置每隔div距离顶部的距离
letter.style.top = (letter.offsetTop+2)+"px";
//当前div字母距离顶部的高度高于了安全距离
if(letter.offsetTop>clientHeight){
//删除数组中的元素
letters.splice(k,1);
//把body中的元素也一并删除
letter.parentNode.removeChild(letter);
//减分数
document.getElementById("score").innerHTML--;
}
}
}
function addKeypressListener(){
//获取事件对象
var e = event;
//通过事件对象拿到当前点击的键盘字母
var key = e.key;
//把字母变为大写
key = key.toUpperCase();
for(var k in letters){
//拿到具体的字母div
var letter = letters[k];
//拿到div中的值
var c = letter.innerHTML;
if(key === c){
//把对应的字母删除掉
letters.splice(k,1);
//在body中删除该字母
letter.parentNode.removeChild(letter);
//添加分数
document.getElementById("score").innerHTML++;
break;//删除完毕之后，马上结束循环
}
}
}
//开始游戏
function startGame(){
//给键盘添加一个点击事件
document.documentElement.addEventListener("keypress",addKeypressListener);
//每隔30毫秒移动分数div
moveLetterId = setInterval(moveLetter,30);
//每隔1s创建一个分数div
letterId = setInterval(createLetter,1000);
//禁用开始按钮
document.getElementById("startGame").disabled = true;
document.getElementById("suspendGame").disabled = false;
}
//暂停游戏
function suspendGame(){
//结束定时器
clearInterval(moveLetterId);
clearInterval(letterId);
//结束监听
document.documentElement.removeEventListener("keypress",addKeypressListener);
document.getElementById("startGame").disabled = false;
document.getElementById("suspendGame").disabled = true;
}
</script>
</head>
<body>
<div>
<input type="button" onclick="startGame()" id="startGame" value="开始游戏" /><br />
<input type="button" onclick="suspendGame()" id="suspendGame" value="暂停游戏" />
</div>
<div class="score" id="score">0</div>
</body>
</html>