用js 实现简单的随机点名

最新推荐文章于 2024-04-24 18:14:24 发布

courageFei

最新推荐文章于 2024-04-24 18:14:24 发布

阅读量3.7k

点赞数 2

分类专栏： JavaScript笔记

本文链接：https://blog.csdn.net/qq_36647038/article/details/82263422

版权

JavaScript笔记专栏收录该内容

50 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>随机</title>
</head>
<style>
  * {
    padding: 0;
    margin: 0;
  }

  #dv {
    width: 800px;
    height: 600px;
    background-color: rgba(150, 243, 223, 0.7);
    margin: 0 auto;
    position: relative;
    border-radius: 10px;
    margin-left: 400px;

  }

  td {
    border-radius: 15px;
    box-shadow: 1px 2px 5px 2px #54d8fd5c;

  }

  input {
    background-color: #fff;
    border-radius: 50%;
    width: 100px;
    height: 50px;
    outline-style: none;
    border: none;
    box-shadow: 0px 5px 9px 0px#2196f375;
  }

  .input1 {
    position: absolute;
    bottom: 20px;
    margin-right: 20px;
    left: 170px;


  }

  .input2 {
    position: absolute;
    bottom: 20px;
    margin-right: 20px;
    left: 320px;

  }

  .input3 {
    position: absolute;
    bottom: 20px;
    left: 470px;

  }

  .bgimg {
    padding-top: 20px;
    position: fixed;
    width: 250px;
    height: 1000px;
    background-color: rgba(196, 123, 255, 0.404);
  }

  .bgimg img {
    opacity: 0.8;
    width: 200px;
    height: 110px;
  }

  body {
    background-image: url("./images/14.jpg");


  }

  input {
    cursor: pointer;
  }
</style>

<body id="bd">
  <div id="dvM" style="position: absolute;">
    <img src="./images/tianshi.gif" alt="">
  </div>
  <div class="bgimg" id="bgimgId">
    <img src="./images/jianbian11.png" alt="">
    <img src="./images/jianbian12.png" alt="">
    <img src="./images/jianbian13.png" alt="">
    <img src="./images/jianbian14.png" alt="">
    <img src="./images/jianbian15.png" alt="">
  </div>
  <div id="dv">
    <input type="button" name="" id="btn1" value="start" class="input1">
    <input type="button" name="" id="btn2" value="end" class="input2">
    <input type="button" id="btn3" value="double" class="input3">
  </div>
  <script>
    function dvFly() {
      var dvM = document.getElementById("dvM");
     //判断图片是否加载完，没加载完就返回
      if (!dvM) {        
        return;
      }
      var intX = window.event.clientX;
      var intY = window.event.clientY;
      dvM.style.left = intX + "px";
      dvM.style.top = intY + "px";
    };
    document.onmousemove = dvFly;
    //创建行列数组元素
    var list = [
      ["one", "two", "three", "four", "five"],
      ["one", "two", "three", "four", "five"],
      ["one", "two", "three", "four", "five"],
      ["one", "two", "three", "four", "five"],
      ["one", "two", "three", "four", "five"],
    ];

    //创建一个表格
    var table = document.createElement("table");
    table.style.margin = "0 auto";
    table.style.paddingTop = "50px";
    table.style.color = "white";
    //将表格添加到div里面，div是他的父元素。
    document.getElementById("dv").appendChild(table);
    //创建一个空数组，用来存储所有人的名字。
    var tds = [];
    var showTime;
    var current;
    //遍历list确定他的行数和列数。
    for (var i = 0; i < list.length; i++) {
      //创建行，并追加到表格中。
      var tr = document.createElement("tr");
      table.appendChild(tr);
      //循环遍历每个list的每一项，每一项的长度就是列数，
      for (var j = 0; j < list[i].length; j++) {
        //创建单元格
        var td = document.createElement("td");
        //设置单元格中间的内容就是list里面的几行几列的值。
        td.innerText = list[i][j];
        //将单元格追加到每一行中
        tr.appendChild(td);
        td.style.backgroundColor = "rgba(200, 200, 200, 0.2)";
        td.style.margin = "5px 7px";
        td.style.padding = "30px  60px";
        //把单元格推入空数组tds中。          
        tds.push(td);

      }
    }
    //声明变量，存储随机色
    var r, g, b;
    var excTime = null;
    for (var i = 0; i < 100; i++) {
      setInterval(function () {
        r = parseInt(Math.random() * 256);
        g = parseInt(Math.random() * 256);
        b = parseInt(Math.random() * 256);
        for (var j = 0; j < 100; j++) {
          tds[j].style.border = "2px solid rgb(" + r + "," + g + "," + b + ")";
        }
      }, 1500);

    }
    //为按钮添加点击事件（开始点）
    document.getElementById("btn1").onclick = function () {
      clearInterval(excTime);//取消excTime的执行
      //setInterval设置固定间隔时间调用函数
      excTime = setInterval(function () {
        //排他事件  将每一个单元格的样式设为一致的
        for (var i = 0; i < tds.length; i++) {
          tds[i].style.backgroundColor = "rgba(200, 200, 200, 0.2)";
          tds[i].style.boxShadow = "0px 2px 5px 3px #b461f1d4";

        }
        //设置随机数,用random存储这个随机数
        var random1 = Math.floor(Math.random() * tds.length);

        //随机点到的样式改变
        tds[random1].style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
        tds[random1].style.boxShadow = "0px 2px 10px 1px #000";
      }, 100);

    };
    //设置按钮2的点击事件
    document.getElementById("btn2").onclick = function () {
      clearInterval(excTime);

    }
    //为按钮3添加点击事件（开始点）
    document.getElementById("btn3").onclick = function () {
      clearInterval(excTime);//取消excTime的执行
      //setInterval设置固定间隔时间调用函数
      excTime = setInterval(function () {
        //排他事件  将每一个单元格的样式设为一致的
        for (var i = 0; i < tds.length; i++) {
          tds[i].style.backgroundColor = "rgba(200, 200, 200, 0.2)";
          tds[i].style.boxShadow = "0px 2px 5px 3px #b461f1d4";

        }
        //设置随机数,用random存储这个随机数
        var random1 = Math.floor(Math.random() * tds.length);
        var random2 = Math.floor(Math.random() * tds.length);

        //随机点到的样式改变
        tds[random1].style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
        tds[random1].style.boxShadow = "0px 2px 10px 1px #000";
        tds[random2].style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
        tds[random2].style.boxShadow = "0px 2px 10px 1px #000";
      }, 100);

    };


    var imgObjs = document.getElementById("bgimgId").children; //获取id为 mask的子元素列表 
    for (var i = 0; i < imgObjs.length; i++) { //循环遍历mask子元素，为每一个添加点击事件
      imgObjs[i].style.cursor = "pointer";
      imgObjs[i].onclick = function () {
        document.getElementById("bd").style.background = "url(" + this.src + ")";//将当前被点击的图片的路径给了body
        document.body.style.backgroundRepeat = "no-repeat";
        document.body.style.backgroundSize = "100%";
      };
    }


  </script>
</body>

</html>

这里写图片描述

三个按钮，分别是点单个人，停止，双人点名。
可以依据人数的多少修改数组中的元素。
右边的几张图片用来依据点名人的心情来选择自己喜欢的渐变色背景图。
点名的过程中单元格会变色，被选中的背景色也会变化，因为本人觉得可以让随机点名看起来彩色斑斓点。
为了综合知识点，本人还用了小图片会跟随鼠标，但是截图没截到，代码中可以看出来。
总的来说，本人综合了用了一下几个知识点
- 动态创建表格。
- 随机色就是Math.random() 的应用。
- window.event.clientX和 window.event.clientY的应用。
- 最后本人不保证没有小bug ，才疏学浅，有待提高。

courageFei

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
用js 实现简单的随机点名

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &l
复制链接

扫一扫