目录
div中子节点操作
HTML DOM createElement() 方法
createElement() 方法通过指定名称创建一个元素，所有主要浏览器都支持 createElement() 方法
例子：向div末尾添加节点
<body style="height: 3000px;position: relative;">
<div id="box">
<p>1</p>
<p>2</p>
</div>
<script type="text/javascript">
var div = document.getElementById('box')
var a = document.createElement('p')
a.innerHTML = 'what the place happen ???'
a.style.backgroundColor = "red"
console.log(a)
//添加子节点
div.appendChild(a)
</script>
</body>
运行结果：
例子：在div中间插入节点，注意这里的div中<p>2</p></div>分开会有一个文本节点
<body style="height: 3000px;position: relative;">
<div id="box">
<p>1</p>
<p>2</p></div>
<script type="text/javascript">
var div = document.getElementById('box')
var a = document.createElement('p')
a.innerHTML = 'what the place happen ???'
a.style.backgroundColor = "red"
console.log(a)
//插入子节点
div.insertBefore(a,div.lastChild)
</script>
</body>
运行结果：
例子：在div中删除最后一个节点
<body style="height: 3000px;position: relative;">
<div id="box">
<p>1</p>
<p>2</p></div>
<script type="text/javascript">
var div = document.getElementById('box')
var a = document.createElement('p')
a.innerHTML = 'what the place happen ???'
a.style.backgroundColor = "red"
console.log(a)
//删除最后一个子节点
div.removeChild(div.lastChild)
</script>
</body>
运行结果：
例子：创建一个input，添加到div中
<body style="height: 3000px;position: relative;">
<div id="box">
<p>1</p>
<p>2</p></div>
<script type="text/javascript">
//创建一个input
var input = document.createElement('input')
//给input添加属性
input.setAttribute('type','text')
input.setAttribute('placeholder','what')
//将input添加到div中
document.getElementById('box').appendChild(input)
</script>
</body>
运行结果：
小球碰撞边界实验
先绘制一个边界框，然后在边界框内创建一个小球，注意边界框用相对定位，小球用绝对定位
HTML
<div id="box">
<div id="ball">
</div>
</div>
CSS
<style type="text/css">
#box{
width: 600px;
height: 400px;
border: solid 1px black;
position: relative;
}
#ball{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: yellow;
position: absolute;
top: 0px;
left: 0px;
}
</style>
效果如下：
然后使用JavaScript代码让小球运动，碰到边界框后弹回
JavaScript
<script type="text/javascript">
var ball = document.getElementById('ball');
//定时移动
speedx = 5;
speedy = 5;
setInterval(function(){
ball.style.left = ball.offsetLeft + speedx +'px';
ball.style.top = ball.offsetTop + speedy + 'px';
//碰到边界框弹回,速度值相反
if(ball.offsetTop >= 400 -50 || ball.offsetTop <= 0){
speedy *= -1;
}
if(ball.offsetLeft >= 600 -50 || ball.offsetLeft<=0){
speedx *= -1;
}
},50)
</script>
运行结果：
input焦点事件
例子：聚焦input框的内容，控制台输出焦点事件
<body style="height: 3000px;position: relative;">
<input type="text" id="input" value=""/>
</div>
<script type="text/javascript">
var input = document.getElementById('input')
//增加聚焦监听事件
input.addEventListener('focus',function(){
console.log('聚焦事件')
},false)
input.addEventListener('blur',function(){
console.log('离焦事件')
},false)
</script>
</body>
运行结果：
飞机大战游戏
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body style="height: 3000px;position: relative;">
<div id="mainScreen">
<div id="bg1" class="bg"></div>
<div id="bg2" class="bg"></div>
<!--创建飞机-->
<div id="airplane">
</div>
</div>
<script src="js/test.js" type="text/javascript" charset="utf-8"></script>
</body>
</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)
运行结果：
图片素材：
一起学习，一起进步 -.- ，如有错误，可以发评论
