js对dom操作小练习

最新推荐文章于 2022-11-15 23:21:14 发布

小杨样样扬

最新推荐文章于 2022-11-15 23:21:14 发布

阅读量626

点赞数 1

文章标签： js dom 小练习

本文链接：https://blog.csdn.net/weixin_44463600/article/details/103100921

版权

在这里插入图片描述

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

游戏实现步骤：

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秒改变一次
图片设置半秒改变一次

function start(){
     p=setInterval("time()",1000)
     t = setInterval("star()",500);
}

计时器：
获取time的dom用innerhtml进行改变，每秒执行一次，每执行一次加一

function time(){
    m++;
    var m1=document.getElementById("time");
    m1.innerHTML="游戏进行了"+m+"秒";
}

图片的位置（随机）
利用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);

进度条的控制
设置count全局变量：
每500毫秒前进6px；点击星星后count减3
删除被点的星星就是删除该节点用parentNode.removeChild，删除父节点的子节点

function restar(){
    count=count-3;
    //删除被点击的小行星
    this.parentNode.removeChild(this);
}

暂停
clearInterval(计时器)
结束刷新
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);
}

小杨样样扬

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
js对dom操作小练习

点击星星消失，会减慢进度条的移动（后撤），直到进度条满掉，游戏结束游戏实现步骤：1. 点击开始星星在随机位置随机大小，游戏进行的秒数开始计时，进度条往后移2.点击暂停后，秒表暂停，弹出框框，全都暂停。3. 再点击开始，一切继续，直到进度条满，游戏结束html代码：<body> <div id="box"> <input type="but...
复制链接

扫一扫