|
这几天的学习中，遇到了一些案例：
1.给添加的列表打印第几行：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<ul id="list">
</ul>
<button id="ton" onclick="creat()">添加事件</button>
</body>
<script>
var list=document.getElementById("list");
var ton=document.getElementById("ton");
var i = 0;
function creat() {
var li = document.createElement("li");
li.innerHTML="列表";
li.setAttribute("name",++i)
li.setAttribute("onclick","test("+i+")");
list.appendChild(li);
}
function test(i){
alert(i);
}
</script>
</html>
在这里运用setAttribute这个方法，对Li的name值和onclick进行修改，再在下面设置一个函数，来显示该列表的序列，这里需要注意的就是在onclick这里对这个事件进行添加和修改。
2.冒泡算法的运用
var arrey=[1,7,6,75,64];//length=5 max index=4
function bj(arrey){
for(i=0;i<arrey.length-1;i++){
for(var j = 0; j < arrey.length-1-i;j++){
if(arrey[j]>arrey[j+1]){
var ls = arrey[j];
arrey[j]=arrey[j+1];
arrey[j+1]=ls;
}
}
}
return arrey;
}
bj(arrey);
document.write(arrey);
这里是在确定的数值下进行排序，运用冒泡算法，设置了一个新的ls作为过度变量，下面的就是通过输入来进行排序：
var sr;
var szz = [];
var i = 0;
function bj() {
while (sr != "exit") {
sr = prompt("请输入一个数组（exit结束）");
if (sr == "exit") {
break;
}
else if (sr = Number(sr)) {
szz[i] = Number(sr);
}
i++;
}
return szz;
}
bj();
function px() {//冒泡算法例子
for (var k = 0; k < szz.length - 1; k++) {
for (j = 0; j < szz.length - 1 - k; j++) {
if (szz[j] > szz[j + 1]) {
var ls = szz[j];
szz[j] = szz[j + 1];
szz[j + 1] = ls;
}
}
}
return szz;
}
px();
document.write(szz);
定义一个空数组，然后通过输入等于sr在把sr赋值到空数组内形成数组。
3.鼠标移动：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<>>, initial-scale=1.0">
<title>Document</title>
<style>
#move {
background-color: red;
width: 100px;
height: 100px;
position: relative;
}
body{
height: 900px;
}
</style>
</head>
<body>
<div id="move">盒子随鼠标移动</div>
</body>
<script>
var sj = document.getElementById("move");
var body = document.getElementsByTagName("body");
body[0].onmousemove = function (event) {
var x = event.clientX;
var y = event.clientY;
sj.style.left = x+"px";
sj.style.top = y+"px";
}
</script>
这里使用了onmousemove,在鼠标进入内容的时候，里面的内容跟着鼠标移动。
clientX ? ? ?鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角x轴的坐标； ?不随滚动条滚动而改变
clientY ? ? ? ?鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角y轴的坐标； ?不随滚动条滚动而改变；
4.劣质版贪吃蛇
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
<style>
#maxbox {
width: 900px;
height: 700px;
background-color: gray;
border: 2px solid black;
position: relative; /*距离原来位置的距离 （记）*/
}
#snake {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
}
#douzi {
width: 50px;
height: 30px;
background-color: blue;
position: absolute; /*现在是距离maxbox的位置*/
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="maxbox">
<div id="snake"></div>
<div id="douzi"></div>
</div>
</body>
<script>
alert("开始游戏，WSAD移动");
var snake = document.getElementById("snake");
var douzi = document.getElementById("douzi");
var body = document.getElementsByTagName("body");
douzi.style.left = Math.random() * 846 + "px";
douzi.style.top = Math.random() * 616 + "px";
body[0].onkeydown = function (event) {
var onkey = event;
var keyCode = onkey.keyCode; //snake键盘移动
switch (keyCode) { //keyCode表示的是键值表，键盘每个值对应数字
case 65:
if (snake.offsetLeft < 10) {
break;
}
snake.style.left = snake.offsetLeft - 10 + "px";
break;
case 68:
if (snake.offsetLeft >= 850 || snake.offsetLeft + snake.offsetWidth >= 900) {
// if (snake.offsetLeft >= 850 || snake.offsetLeft + snake.offsetWidth > 89（0~9）不能等于十) {
break;
}
snake.style.left = snake.offsetLeft + 10 + "px";
break;
case 83:
if (snake.offsetTop >= 650) {
break;
}
snake.style.top = snake.offsetTop + 10 + "px";
break;
case 87:
if (snake.offsetTop < 10) {
break;
}
snake.style.top = snake.offsetTop - 10 + "px";
break;
}
if (snake.offsetLeft + snake.clientWidth >= douzi.offsetLeft //触碰时豆子变化以及蛇的加长
&& snake.offsetLeft <= douzi.offsetLeft + douzi.clientWidth //offsetLeft 距离父元素的左边的边距 offsetTop 距离父元素的上边边的边距(注意，要注意设置父元素的postion这里是距离父元素的距离，父元素没定位，则相对于页面)
&& snake.offsetTop + snake.clientHeight >= douzi.offsetTop //clientWidth 返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）
&& snake.offsetTop <= douzi.offsetTop + douzi.clientHeight //offsetWidth 返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
) {
douzi.style.left = Math.random() * 846 + "px"; //随机数Math.random
douzi.style.top = Math.random() * 616 + "px";
snake.style.width = (snake.clientWidth + 20) + "px"; //增大
if (snake.style.width == 150 + "px") { //游戏结束，设置多少结束游戏
alert("游戏结束");
window.location.reload(); //刷新页面
}
}
}
// var timer = setInterval(function(){ // 每隔多是时间改变，定时器
// douzi.style.left=Math.random() * 846 + "px";
// douzi.style.top=Math.random() * 616 + "px";
// }, 2000);
</script>
1.在这里使用的是onkeydown，当键盘按下去的时候会发生的事件
2.keycode是键值表，键盘上的值对应相应的值
3.clientWidth ?返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）
4.offsetWidth ?返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
5.offsetLeft 距离父元素的左边的边距 。offsetTop 距离父元素的上边边的边距 (注意，要注意设置父元素的postion这里是距离父元素的距离，父元素没定位，则相对于页面)
6.window.location.reload();表示的是刷新页面。
在这里设置触碰的时候是设置的&&所以必须同时满足这些条件，才会触发。
总结：做许多页面的时候，代码会出现运用的时候样式出错，可以在页面上检查，看第几行出现错误，同时许多代码不是能熟练运用，只有做到许多类似的页面的时候，才能熟练运用。许多时候可以运用事件委托来解决问题，事件委托：本来应该绑定在子元素的内容，可以绑定在父元素上，运用事件冒泡的理论，当点击子元素时，就会触发父元素，形成效果。
|