JS案例学以致用并加以发挥

最新推荐文章于 2024-08-14 15:45:18 发布

杰哥不要阿

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量41

点赞数

文章标签： javascript 前端开发语言学习

本文链接：https://blog.csdn.net/m0_65517946/article/details/131586424

版权

本文展示了两个JavaScript实现的案例，一个是使用键盘控制小球移动的游戏，另一个是投票选举系统。游戏通过键盘上下左右键控制小球移动，碰撞检测增加趣味性；投票系统则实现了动态更新票数和进度条展示，用户点击按钮可实时改变投票结果。这两个案例展示了JS在网页交互和数据处理中的应用。

摘要由CSDN通过智能技术生成

一、小球游戏

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小球游戏</title>
  <style>
    #screen {
      width: 1500px;
      height: 600px;
      border: 1px solid lightcoral;
      position: relative;
    }

    #ball {
      width: 100px;
      height: 100px;
      background-color: hotpink;
      border-radius: 50%;
      position: absolute;
      top: 250px;
      left: 700px;
    }

    #footer {
      width: 1500px;
      height: 100px;
      position: relative;
    }

    #board {
      width: 300px;
      height: 50px;
      background-color: plum;
      text-align: center;
      line-height: 50px;
      position: absolute;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="screen" onclick="start()">
    <div id="ball"></div>
  </div>
  <div id="footer">
    <div id="board" onclick="start()">
      开始游戏
    </div>
  </div>
  <script>
    //获取foot
    let board = document.getElementById("board");
    //挡板的位置
    let board_x = 0, border_y = 0;
    document.onkeydown = function (event) {
      //左键为39 右键37
      let keyCode = event.keyCode;
      console.log(keyCode);
      switch (keyCode) {
        case 37:
          if (board_x <= 0) {
            break;
          }
          //向左边移动
          board_x -= 30;

          board.style.left = board_x + 'px';
          break;
        case 39:
          if (board_x >= 1200) {
            break;
          }
          //向右边移动
          board_x += 30;
          board.style.left = board_x + 'px';
          break;
        default: ;
      }

    }

    //生成0到1500的随机整数
    let r = Math.floor(Math.random() * 1500);
    //小球撞顶随机点的坐标(r,50)
    //球心的坐标（x,y）
    let x = 800, y = 300;
    //计算x和y之间运动距离之间的倍数关系
    let x_y = (x - r) / (y - 50);
    //表示单位时间内沿着y轴向上运动一个单位
    let dy = -1;
    //x轴在一个单位时间内运动的单位
    let dx = x_y * dy;
    //获取元素
    let ball = document.getElementById("ball");

    //绑定事件
    function start() {
      // alert("游戏开始")
      setInterval(() => {
        //上下碰撞
        if (y <= 50 || y >= 550) {
          dy = -dy;
          //如果没接住
          if (y >= 550) {
            if (x <= board_x || x >= board_x + 300) {
              alert("很遗憾，游戏结束咯!");
              window.location.reload();
            }
          }
        }

        //左右碰撞
        if (x <= 50 || x >= 1450) {
          dx = -dx;
        }
        //计算单位时间内坐标的位置
        y += dy;
        x += dx;
        //控制小球
        ball.style.left = x - 50 + 'px';
        ball.style.top = y - 50 + 'px';
      }, 0.01);
    }
  </script>
</body>

</html>

静态效果如下：

二、键盘左右上下键控制小球移动

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .f {
      width: 600px;
      height: 600px;
      position: relative;
    }

    .z {
      width: 100px;
      height: 100px;
      background-color: pink;
      border-radius: 50%;
      position: absolute;
    }
  </style>
</head>

<body>
  <div class="f">
    <div class="z" id="ball"></div>
  </div>
</body>
<script>
  //根据id获取dom元素
  let ball = document.getElementById('ball')
  let x = 50, y = 50 //球心的初始坐标
  let dy = 10; //按一次键盘，y轴方向移动的距离
  let dx = 10; //按一次键盘，x轴方向移动的距离
  //感知键盘keyCode下40上38左37右39
  document.onkeydown = function (e) {
    switch (e.keyCode) {
      case 38:
        y -= dy
        ball.style.top = y - 50 + 'px'
        break
      case 40:
        y += dy
        ball.style.top = y - 50 + 'px'
        break
      case 37:
        x -= dx
        ball.style.left = x - 50 + 'px'
        break
      case 39:
        x += dx
        ball.style.left = x - 50 + 'px'
        break
    }
  }
</script>

</html>

三、投票选举

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }

    a,
    img {
      border: 0;
    }

    .vote {
      width: 530px;
      margin: 100px auto;
    }

    .vote h2 {
      height: 24px;
      line-height: 24px;
      font-size: 18px;
      font-weight: 400;
      margin-bottom: 20px;
      text-align: center;
    }

    #div1 {
      width: 520px;
      height: 30px;
      position: relative;
    }

    #div2 {
      margin: 30px 20px 0 0;
      width: 250px;
      height: 325px;
      float: left;
      display: inline;
      position: relative;
    }

    #div3 {
      margin-top: 30px;
      margin-left: 2px;
      width: 250px;
      height: 325px;
      float: left;
    }

    .a_1,
    .a_2 {
      position: absolute;
      top: 0;
      color: #fff;
      text-align: center;
      height: 30px;
      line-height: 30px;
    }

    .a_1 {
      left: 0;
      background: paleturquoise;
    }

    .a_2 {
      right: 0;
      background: lightpink;
    }

    .vote input {
      padding-top: 20px;
      width: 250px;
      position: absolute;
      color: #fff;
      border-radius: 1rem;
      text-decoration: none;
      padding: 1rem 2rem;
      margin-bottom: 1rem;
      min-width: 10rem;
      text-align: center;
      background-color: #6a4;
      border: 0;
      cursor: pointer;
    }

    .diaphane {
      color: #000;
      margin: 10px 0;
      text-align: center;
    }

    input {
      width: 80px;
      height: 40px;
      background-color: cornsilk;
      border: none;
      color: salmon;
      font-size: large;
      border-radius: 10px;
      cursor: pointer;
      box-shadow: 0 8px 5px gainsboro;
      margin-left: 20px;
    }
  </style>
</head>

<body>
  <h2>投票结果公布:</h2>
  <div id="div1">
    <div class="a_1">50%</div>
    <div class="a_2">50%</div>
  </div>
  <div id="div2">
    <div>
      <img src="img/zls02.jpg" height="100%" width="100%" />
    </div>
    <div class="diaphane" id="result_1">
      <p>票数:0</p>
    </div>
    <input type="button" name="aa" value="投小赵" />
  </div>
  <div id="div3">
    <div>
      <img src="img/jjy.jpg" height="100%" width="100%" />
    </div>
    <div class="diaphane" id="result_2">
      <p>票数:0</p>
    </div>
    <input type="button" name="aa" value="投小鞠" />
  </div>

</body>
<script>
  window.onload = function () {
    //获取div1及下面的div
    var oDiv = document.getElementById('div1');
    var aDiv = oDiv.getElementsByTagName('div');
    //获取点击按钮
    var aBtn = document.getElementsByTagName('input');
    //初始化百分比数字
    var lNum = 50;
    var rNum = 50;
    //计算进度条宽度
    var lNums = (rNum / (lNum + rNum)) * 520;
    var rNums = 520 - lNums;
    //设置进度条width宽度
    aDiv[1].style.width = parseInt(lNums) + 'px';
    aDiv[0].style.width = 520 - parseInt(lNums) + 'px';
    //设置进度条百分比数字
    aDiv[0].innerHTML = sub((lNum / (lNum + rNum)) * 100 + "") + "%";
    aDiv[1].innerHTML = sub((1 - lNum / (lNum + rNum)) * 100 + "") + "%";
    //初始化投票数
    var leftNum = 0;
    var rightNum = 0;
    //绑定投票按钮点击事件
    aBtn[0].onclick = function () {
      //每次点击累加投票数
      lNum = lNum + (++leftNum);
      //计算div对应长度
      var lNumss = parseInt(leftNum / (leftNum + rightNum) * 520);
      //设置进度条width宽度
      aDiv[0].style.width = lNumss + 'px';
      aDiv[1].style.width = (520 - lNumss) + 'px';
      //计算div百分比数字
      aDiv[0].innerHTML = sub((leftNum / (leftNum + rightNum)) * 100 + "") + "%";
      aDiv[1].innerHTML = sub((1 - leftNum / (leftNum + rightNum)) * 100 + "") + "%";
      //设置投票数
      document.getElementById("result_1").innerHTML = "小赵票数：" + leftNum;
    }
    //绑定投票按钮点击事件
    aBtn[1].onclick = function () {
      //每次点击累加投票数
      rNum = rNum + (++rightNum);
      //计算div对应长度
      var rNumss = parseInt(rightNum / (leftNum + rightNum) * 520);
      //设置进度条width宽度
      aDiv[0].style.width = (520 - rNumss) + 'px';
      aDiv[1].style.width = rNumss + 'px';
      //计算div百分比数字
      aDiv[0].innerHTML = sub((leftNum / (leftNum + rightNum)) * 100 + "") + "%";
      aDiv[1].innerHTML = sub((1 - leftNum / (leftNum + rightNum)) * 100 + "") + "%";
      //设置投票数
      document.getElementById("result_2").innerText = "小鞠票数：" + rightNum;
    }
    //保留小数点后两位
    function sub(str) {
      var index = str.lastIndexOf(".");
      if (index == -1) {
        return str;
      }
      return str.substring(0, index + 3);
    }
  }

</script>

</html>

效果如下：

总结：

学习JS案例是一种深入理解和掌握JS编程的有效方式。通过实际案例的编写和分析，可以将理论知识应用到实际问题中，提升编程技能。案例涵盖了各种应用场景，如网页交互、数据处理、动画效果等，通过解决实际问题，加深对JS语法和概念的理解。通过案例学习，可以掌握DOM操作、事件处理、异步编程等关键技术，培养解决问题的能力和编程思维。不断练习和挑战新的案例，可以不断提高JS编程水平，为实际项目开发提供有力支持。