js点名器

白菜心好吃

于 2024-01-09 11:47:36 发布

阅读量354

点赞数 12

文章标签：前端 css

本文链接：https://blog.csdn.net/KK123_456_/article/details/135476336

版权

总代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    *{
      margin: 0px;
      padding: 0px;
      background-color: cornsilk;
    }
    .d1{
      margin: auto;
      margin-top: 150px;
      /*border: 1px solid black;*/
      border-radius: 60px;
      background-color: springgreen;
      width: 800px;
      height: 400px;
      position: relative;
    }
    .d1:hover{
      box-shadow: 0px 0px 65px 30px #00ff7f;
    }
    .d1 > h2{
      width: 300px;
      height: 80px;
      text-align: center;
      line-height: 80px;
      color: cornsilk;
      position: absolute;
      font-size: 55px;
      left: 260px;
      background-color: springgreen;
      /*border: 1px solid black;*/
    }
    .d1 > #hh{
      width: 200px;
      height: 200px;
      position: absolute;
      left: 310px;
      top: 90px;
      font-size: 20px;
      letter-spacing: 20px;
      text-align: center;
      line-height: 200px;
      border-radius: 200px;
    }
    #ks{
      width: 200px;
      height: 40px;
      position: absolute;
      left: 310px;
      top: 320px;
    }
  </style>

</head>
<body>
  <div class="d1">
    <h2>是谁呢？？</h2>
    <div id = "hh">???</div>
    <button id="ks">开始</button>
  </div>

  <script>
    window.addEventListener("load",function () {

<!--    获取标签-->
    let name = document.getElementById("hh");
    let button = document.getElementById("ks");
    let div = document.getElementsByClassName("d1");


  // 创建数组
    let arrName = ["司岱钰","张晨林","王志超","胡钰乾","殷俊峰","李佳和","王泽烔"];

  // 创建随机数
    let time = null;
    let hh = 0;
    let fn = 0;
    button.onclick = function (){
      if (hh == 1) {
        time = window.clearInterval(time);
        button.innerHTML = "开始";
        hh = 0;
      }else{
        hh = 1;
        time = self.setInterval(function () {
          // 创建随机数
          name.innerHTML = arrName[Math.floor(Math.random()*arrName.length)]
        },30);
        console.log(fn++)
        button.innerHTML = "结束";
      }
    }
    })
  </script>
</body>
</html>

1.html部分

  <div class="d1">
    <h2>是谁呢？？</h2>
    <div id = "hh">???</div>
    <button id="ks">开始</button>
  </div>

2.css部分

  <style>
    *{
      margin: 0px;
      padding: 0px;
      background-color: cornsilk;
    }
    .d1{
      margin: auto;
      margin-top: 150px;
      /*border: 1px solid black;*/
      border-radius: 60px;
      background-color: springgreen;
      width: 800px;
      height: 400px;
      position: relative;
    }
    .d1:hover{
      box-shadow: 0px 0px 65px 30px #00ff7f;
    }
    .d1 > h2{
      width: 300px;
      height: 80px;
      text-align: center;
      line-height: 80px;
      color: cornsilk;
      position: absolute;
      font-size: 55px;
      left: 260px;
      background-color: springgreen;
      /*border: 1px solid black;*/
    }
    .d1 > #hh{
      width: 200px;
      height: 200px;
      position: absolute;
      left: 310px;
      top: 90px;
      font-size: 20px;
      letter-spacing: 20px;
      text-align: center;
      line-height: 200px;
      border-radius: 200px;
    }
    #ks{
      width: 200px;
      height: 40px;
      position: absolute;
      left: 310px;
      top: 320px;
    }
  </style>

3.js部分代码解释

document.getElementById------是用来获取id名称的

document.getElementsByclassName-------是用来获取类（class）名的

定义的变量名 hh 本质就是true 、false 用 0、1代替了（用于做判断）

Math.random()生成0到1之间的随机数

Math.floor()向下取整

  <script>
    window.addEventListener("load",function () {

<!--    获取标签-->
    let name = document.getElementById("hh");
    let button = document.getElementById("ks");
    let div = document.getElementsByClassName("d1");


  // 创建数组
    let arrName = ["司岱钰","张晨林","王志超","胡钰乾","殷俊峰","李佳和","王泽烔"];

  // 创建随机数
    let time = null;
    let hh = 0;
    let fn = 0;
    button.onclick = function (){
      if (hh == 1) {
        time = window.clearInterval(time);
        button.innerHTML = "开始";
        hh = 0;
      }else{
        hh = 1;
        time = self.setInterval(function () {
          // 创建随机数
          name.innerHTML = arrName[Math.floor(Math.random()*arrName.length)]
        },30);
        console.log(fn++)
        button.innerHTML = "结束";
      }
    }
    })
  </script>