本文共 5119 字，大约阅读时间需要 17 分钟。

目录

div中子节点操作

HTML DOM createElement() 方法

createElement() 方法通过指定名称创建一个元素，所有主要浏览器都支持 createElement() 方法

例子：向div末尾添加节点

	
   
	    
    
1
		
    
2
	
   
			

运行结果：

例子：在div中间插入节点，注意这里的div中<p>2</p></div>分开会有一个文本节点

	
   
		
    
1
		
    
2
   
		

运行结果：

例子：在div中删除最后一个节点

	
   
		
    
1
		
    
2
   
		

运行结果：

例子：创建一个input，添加到div中

	
   
		
    
1
		
    
2
   
		

运行结果：

小球碰撞边界实验

先绘制一个边界框，然后在边界框内创建一个小球，注意边界框用相对定位，小球用绝对定位

HTML

CSS

效果如下：

然后使用JavaScript代码让小球运动，碰到边界框后弹回

JavaScript

运行结果：

input焦点事件

例子：聚焦input框的内容，控制台输出焦点事件

运行结果：

飞机大战游戏

HTML代码：

CSS代码：

*{	margin: 0;	padding: 0;}/*主窗口界面*/#mainScreen{	width: 512px;	height: 768px;	margin: 0 auto;	position: relative;	/*背景图片滚动超出隐藏*/	overflow: hidden;}/*背景图片样式*/.bg{	width: 512px;	height: 768px;	position: absolute;	background-image: url(../img/bg3.jpg);}#bg2{	top: -768px;}/*飞机图片样式*/#airplane{	width: 109px;	height: 82px;	background-image: url(../img/air.png);	position: absolute;	left: 200px;	top: 670px;}/*子弹样式*/.bullent{	position: absolute;	width: 5px;	height: 5px;	border-radius: 50%;	background-color: yellow;	}/*敌人样式*/.tank{	position: absolute;	width: 50px;	height: 50px;	background-image: url(../img/tank.png);	background-size: 50px 50px;}/*游戏结束*/.gameover{	width: 400px;	height: 100px;	color: red;	position: absolute;	top: 200px;	left: 100px;	font-size: 30px;}

JavaScript代码：

//让背景动起来var jsbg1 = document.getElementById('bg1')var jsbg2 = document.getElementById('bg2')var timebg = setInterval(function(){	//背景图片滚动	jsbg1.style.top = jsbg1.offsetTop + 1 +'px'	jsbg2.style.top = jsbg2.offsetTop + 1 +'px'	//判断一张图片是否走完	if(jsbg1.offsetTop >= 768){		jsbg1.style.top = '-768px'	}	if(jsbg2.offsetTop >= 768){		jsbg2.style.top = '-768px'	}},10)var mainscreen = document.getElementById('mainScreen')//拖拽让飞机动起来var plane = document.getElementById('airplane')//给飞机添加鼠标按下事件plane.addEventListener('mousedown',function(e){	var ev = e || window.event	//飞机当前位置	basex = ev.pageX	basey = ev.pageY	console.log(basex,basey)	//飞机移动位置	movex = 0	movey = 0	//给窗口添加监听事件,鼠标移动	mainscreen.onmousemove = function(e){		var ee = e || window.event		movex = ee.pageX - basex		basex = ee.pageX		movey = ee.pageY - basey		basey = ee.pageY		plane.style.left = plane.offsetLeft + movex + 'px'		plane.style.top = plane.offsetTop + movey + 'px'	}	//鼠标抬起时取消事件	plane.addEventListener('mouseup',function(){		mainscreen.onmousemove = null	},false)},false)//发射子弹var timebullent = setInterval(function(){	//创建子弹div	var bullent = document.createElement('div')	//给子弹添加一个类名,在CSS中修饰子弹	bullent.className = 'bullent'	bullent.style.left = plane.offsetLeft + 53 +'px'	bullent.style.top = plane.offsetTop -10 + 'px'	mainscreen.appendChild(bullent)		//让子弹飞	var bullentfly = setInterval(function(){		bullent.style.top = bullent.offsetTop -5 + 'px'		//当子弹超出主屏幕时		if(bullent.offsetTop <= -20){			//关闭让子弹飞			clearInterval(bullentfly)			mainscreen.removeChild(bullent)		}	},50)	bullent.timer = bullentfly},500)//随机数  敌人位置function randomNum(min,max){	return parseInt(Math.random() * (max - min) + min)}//随机颜色function randomcolor(){	var r = parseInt(Math.random() * 256)	var g = parseInt(Math.random() * 256)	var b = parseInt(Math.random() * 256)	var colorstring = "rgb(" + r + "," + g + "," + b + ")"	return colorstring}//敌方下落var timetank = setInterval(function(){	//创建敌人div	var tank = document.createElement('div')	//给子弹添加一个类名,在CSS中修饰子弹	tank.className = 'tank'	tank.style.left = randomNum(0,462) + 'px'	tank.style.top = '0px'	mainscreen.appendChild(tank)		//让敌人进攻	var tankfly = setInterval(function(){		tank.style.top = tank.offsetTop + 10 + 'px'		//当子弹超出主屏幕时		if(tank.offsetTop >= 768){			//关闭让子弹飞			clearInterval(tankfly)			mainscreen.removeChild(tank)		}	},50)		tank.timer = tankfly},1000)//子弹和敌人碰撞检测var pzjc = setInterval(function(){	var alltanks = document.getElementsByClassName('tank')	var allbullents = document.getElementsByClassName('bullent')	for(var i = 0;i < allbullents.length;i++){		for(var j = 0;j < alltanks.length;j++){			var b = allbullents[i]			var t = alltanks[j]			//子弹和敌人碰撞检测，然后全部移除			if(pzjcfun(b,t)){				clearInterval(b.timer)				clearInterval(t.timer)				mainscreen.removeChild(b)				mainscreen.removeChild(t)				break			}		}	}},100)var pzjcfun = function(obj1,obj2){	var obj1left = obj1.offsetLeft	var obj1top = obj1.offsetTop	var obj1width = obj1left + obj1.offsetWidth	var obj1height = obj1top + obj1.offsetHeight 		var obj2left = obj2.offsetLeft	var obj2top = obj2.offsetTop	var obj2width = obj2left + obj2.offsetWidth	var obj2height = obj2top + obj2.offsetHeight 		if( !(obj1left > obj2width || obj1width < obj2left ||obj1top > obj2height ||obj1height < obj2top)){		return true	}else{		return false	}}//飞机死亡检测var diejc = setInterval(function(){	var alltanks = document.getElementsByClassName('tank')	for(var i = 0;i < alltanks.length;i++){		if(pzjcfun(alltanks[i],plane)){			for(var j = 0;j<100;j++){				clearInterval(j)			}			var gameover = document.createElement('p')			gameover.className = 'gameover'			gameover.innerHTML = '你失败了，游戏结束'			mainscreen.appendChild(gameover)			break		}	}},100)

运行结果：

图片素材：

一起学习，一起进步 -.- ，如有错误，可以发评论

转载地址：https://kongchengji.blog.csdn.net/article/details/97135991 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！