0
点赞
收藏
分享

微信扫一扫

DOM----基础语法(onclick,onmouseover, setInterval , onkeydown)

1.onclick  点击事件

//一.练习DOM onclick 点击事件
// var div = document.getElementsByTagName("div")[0];
// div.style.width = "100px";
// div.style.height = "200px";
// //div.style.backgroundColor = "red";
// div.style.marginBottom = "50px";

// //点击一次 背景色变成蓝色,再点击一次还原为红色
// var count = 0;
// var i = 2;
// div.onclick = function() {
// count ++;
// if(count % i == 1 ) {
// this.style.color = "blue";
// }else {
// this.style.color = "pink";
// }
// }

// 二。选项卡:点击那个button,那个高亮,并显示对应内容
// var btn = document.getElementsByTagName('button');
// var div = document.getElementsByClassName('content');
// for( var i = 0 ; i < btn.length ; i ++ ) {
// (function (n) {

// btn[i].onclick = function () {
// for( var j = 0 ; j < btn.length ; j++ ) {
// btn[j].className = "";//点击其他button,原button高亮背景色消失
// div[j].style.display = "none";//点击其他button,盒子消失
// }
// this.className = "active";//给当前点击button加上黄色
// div[n].style.display = "block";//当前点击的button显示对应盒子
// }

// }(i) )
// }

  二.onmouseover  鼠标移入事件

DOM----基础语法(onclick,onmouseover, setInterval , onkeydown)_高亮

 

 三.setInterval (移动)/onkeydown(键盘事件)/  clearintval (清空移动的方法)

//setInterval 每隔多少秒,执行下列函数
//clearIntval 清空运动的物体
//三让物体运动起来
// var follow = 1;
// var empty = setInterval(function () {
// follow += follow /100; //和下面毫秒一块进行使用,使运动的物体变得缓慢
// div.style.top = parseInt(div.style.top) + follow + "px";//将类型转换成整数,在进行赋值
// div.style.left = parseInt(div.style.left) + follow + "px";
// //判断物体是否晕倒到300,到达300则停下来
// if( parseInt(div.style.top) > 300 && parseInt(div.style.left) >300 ) {
// clearInterval(empty);
// };
// },10);

//四
//onkeydown 键盘事件,按下按键,执行JS代码
//上 38 下 40 左 37 右 39
//通过键盘事件,点击上下左右剪,分别进行移动
var speed = 5;
btn.onclick = function () {
speed++;//点击button,给div加速
}
document.onkeydown = function (e) {
switch(e.which) {
case 38 :
div.style.top = parseInt(div.style.top) - speed + "px";
break;
case 40 :
div.style.top = parseInt(div.style.top) + speed + "px";
break;
case 37 :
div.style.left = parseInt(div.style.left) + speed + "px";
break;
case 39 :
div.style.left = parseInt(div.style.left) - speed+ "px";
}
}

  四.QuerySelectorAll()//创建副本,镜像(//类似于创建副本,之后在用方法创建出来的元素,增删改查都不会显示在这里)

DOM----基础语法(onclick,onmouseover, setInterval , onkeydown)_点击事件_02

 

举报

相关推荐

0 条评论