js对dom操作小练习

js对dom操作小练习_第1张图片

点击星星消失,会减慢进度条的移动(后撤),直到进度条满掉,游戏结束

游戏实现步骤:

1. 点击开始星星在随机位置随机大小,游戏进行的秒数开始计时,进度条往后移
2.点击暂停后,秒表暂停,弹出框框,全都暂停。
3. 再点击开始,一切继续,直到进度条满,游戏结束

html代码:
进度条设置两个span:都是inline-block属性

<body>
    <div id="box">
    <input type="button" value="start" onclick="start()">
  <input type="button" value="stop" onclick="stop()"> 
  <span id="time">游戏进行了0</span>
  <span id="tiao"><span id="tiao1"></span></span>
</div>
</body>

css代码:

html,body{
     
    display:flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;   
}
input{
     
    height:40px;
    font-size: 25px;
    width:100px;
}
#tiao{
     
    display: inline-block;
    border:2px rgb(255, 94, 0) solid;
    width:150px;
    height:30px;
}
#tiao1{
     
    margin-top:2.5px;
    display:inline-block;
    height:25px;
    background-color:pink;
}

js代码

点击开始游戏:

  1. 设置两个定时器:秒表和图片。
    秒表:1秒改变一次
    图片设置半秒改变一次
function start(){
     
     p=setInterval("time()",1000)
     t = setInterval("star()",500);
}
  1. 计时器:
    获取time的dom用innerhtml进行改变,每秒执行一次,每执行一次加一
function time(){
     
    m++;
    var m1=document.getElementById("time");
    m1.innerHTML="游戏进行了"+m+"秒";
}
  1. 图片的位置(随机)
    利用createElement直接创建一个img标签,在对标签添加样式。
    用绝对定位的top和left来改变他的位置,大小由width改变。
function star(){
     
    //在点击暂停时确定后继续;
    //创建星星size
    var stars=document.createElement("img");
    var w=Math.floor(Math.random()*80+20);
    stars.width=w;
      //创建星星位置。
      var x=Math.floor(Math.random()*1400)+60;
      var y=Math.floor(Math.random()*500+60);
      stars.style.position="absolute"
    stars.style.top=y+"px";
    stars.style.left=x+"px";
    stars.src="stars.gif";
    document.body.appendChild(stars);
  1. 进度条的控制
    设置count全局变量:
    每500毫秒前进6px;点击星星后count减3

    删除被点的星星就是删除该节点用parentNode.removeChild,删除父节点的子节点
function restar(){
     
    count=count-3;
    //删除被点击的小行星
    this.parentNode.removeChild(this);
}
  1. 暂停
    clearInterval(计时器)
  2. 结束刷新
    location.reload();

全部js代码

//开始游戏
var count=0;var t;
var m=0;
var p;
function start(){
     
     p=setInterval("time()",1000)
     t = setInterval("star()",500);
    
}
function star(){
     
    //在点击暂停时确定后继续;
    //创建星星size
    var stars=document.createElement("img");
    var w=Math.floor(Math.random()*80+20);
    stars.width=w;
      //创建星星位置。
      var x=Math.floor(Math.random()*1400)+60;
      var y=Math.floor(Math.random()*500+60);
      stars.style.position="absolute"
    stars.style.top=y+"px";
    stars.style.left=x+"px";
    stars.src="stars.gif";
    document.body.appendChild(stars);
        stars.onclick=restar;
    count++;

    var  tiao1=document.getElementById("tiao1");
    tiao1.style.width=count*6+"px";
    if(count>25){
     
    alert("game over");
    clearInterval(t);
    location.reload();
    }
}
function stop(){
     
   var i= alert("暂停游戏");
    clearInterval(t);
    clearInterval(p);
}
function time(){
     
    m++;
    var m1=document.getElementById("time");
    m1.innerHTML="游戏进行了"+m+"秒";
}
function restar(){
     
    count=count-3;
    //删除被点击的小行星
    this.parentNode.removeChild(this);
}

你可能感兴趣的:(js,dom,小练习)