master

分支 (1)

管理

管理

master

fundamentals-of-java-script
/
202311015

今日份日志
// 定义数组
let 名称 = [];
let 名称 = [元素1,元素2...];

// 数组赋值
名称[下标] = 值;

// push:向数组的末尾添加一个元素
名称.push = 值;

// unshift:向数组的头部添加一个元素
名称.unshift = 值;

// pop:删除最后一个元素，并返回这个元素
名称.pop();    // 可以定义一个变量来接收一下 let 变量名 = 数组名称.pop();

// shift:删除第一个元素，并返回这个元素
数组名称.shift();

// splice:删除指定下标的元素，并返回
数组名称.splice(下标,删除几个元素);

// 随机数
Math.random();  // 返回[0,1)

// 向下取整
Math.floor();
Math.floor(Math.random()*10; // 返回0-9

// 获取标签并返回值给标签
<p id="p2"></p>
let p2P = document.querySelector('#p2'); //  #表示id，.表示class
p2P.innerHTML = 要返回的值
练习
<!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>
    * {
      text-align: center;
    }
  </style>
</head>

<body>
  <h1>抽奖池</h1>
  <br>
  <h2>待抽选手</h2>
  <p id="p2"></p>
  <br>
  <h2>中奖选手</h2>
  <p id="p3"></p>
  <button class="b1">开始抽奖</button>
  <button class="b2">重置</button>
  <script>
    // 抽奖的选手
    let names = ['湫', '魔女', '绯色', '雪碧', '绫禄', '花花', '捺捺', '虹柒'];
    // 数组下标
    // let namesIndex = names.length;
    // // console.log(namesIndex);
    // // 随机数
    // let rand = Math.floor(Math.random() * namesIndex);
    // // console.log(rand);
    // let getName = names.splice(rand, 1);
    // console.log(getName);
    // 获取各个标签
    let p2P = document.querySelector('#p2');
    let p3P = document.querySelector('#p3');
    let btn = document.querySelector('.b1');
    let btn2 = document.querySelector('.b2');
    p2P.innerHTML = names;
    btn.onclick = function () {
      let names = ['湫', '魔女', '绯色', '雪碧', '绫禄', '花花', '捺捺', '虹柒'];
      let namesIndex = names.length;
      // console.log(namesIndex);
      // 随机数
      let rand = Math.floor(Math.random() * namesIndex);
      if (namesIndex <= 0) {
        alert('没人让你抽了');
        return;
      }
      // console.log(rand);
      let getName = names.splice(rand, 1);
      p2P.innerHTML = names;
      p3P.innerHTML = getName;
    }
    btn2.onclick = function () {
      let names = ['湫', '魔女', '绯色', '雪碧', '绫禄', '花花', '捺捺', '虹柒'];
      p2P.innerHTML = names;
      p3P.innerHTML = '';
    }
  </script>
</body>

</html>