Question

$scope.resetValue= function () {
    $scope.pageType= "select";
}

当我把光标放在它上面时，我想让第二个按钮移动到一个随机位置。我不明白为什么这不起作用;请帮忙！这是我的学校作业需要使用JS DOM，所以请不要提出其他方法。

Answer 1

document.getElementsByClassName()会返回HTMLCollection而不是单个元素。您可以通过引用HTMLCollection中的第一个元素来解决这个问题：

var buttonTag = document.getElementsByClassName('button2')[0];

或使用document.querySelector()：

var buttonTag = document.querySelector('.button2');

Answer 2

在moveButtonRand()功能中使用此功能：

buttonTag[0].style.top=positionTop+"%";
buttonTag[0].style.left=positionLeft+"%";

或者为该按钮添加ID，然后使用：

var buttonTag=document.getElementById('id_button2');

Answer 3

＆＃13;

function alertKWEB() {
  alert("Me too");
}

function alertKWEB2() {
  alert("K★W★E★B");
}

var m = Math;
m.c = m.ceil;
m.f = m.floor;
m.r = m.random;

function moveButtonRand() {
  var bTag = document.querySelector('.button2');
  var min = 1;
  var max = 95;
  // inclusive random number btw two values
  var res = m.f(m.r() * (max - min + 1)) + min;
  bTag.style.top = res + "%";
  bTag.style.left = res + "%";
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./files/jquery-1.11.2.min.js"></script>
  <script src="./files/bootstrap.min.js"></script>
  <link rel="stylesheet" href="./files/font-awesome.min.css">
  <style>
    body {
      font-family: "Helvetica Neue", Helvetica, Arial, NanumBarunGothic, NanumGothic, "Apple SD Gothic Neo", sans-serif;
    }
    
    a {
      font-size: 36px;
      font-weight: 500;
      text-decoration: none;
      transition: color 0.3s;
      color: #0099cc;
      background-color: transparent;
      box-sizing: border-box;
    }
    
    a:hover {
      color: #4dd2ff;
      outline: none;
      border-bottom: 1px dotted;
    }
    
    hr {
      margin-bottom: 23px;
      border: 0;
      border-top: 1px solid #b8b8b8;
    }
    
    .button2 {
      position: absolute;
    }
  </style>

</head>

<body>
  <div class="main" style="text-align: center; width: 100%; height: 100%">
    <h1><a href="https://kweb.korea.ac.kr/">Do you love KWEB?</a></h1>
    <hr>
    <button onclick="alertKWEB()">I do</button>
    <button class="button2" onclick="alertKWEB2()" onmouseover="moveButtonRand()">.....</button>
  </div>
</body>

</html>

＆＃13;

此脚本选择类为＆＃34; .button2＆＃34;的按钮。使用上述使用 document.querySelector 的建议。此外，它采用了一些减少冗长的捷径。但是，最重要的是，它使用MDN建议的技术来改善随机性。

通过使用Javascript设置CSS来移动按钮

3 个答案: