个人中心
gpt4 book ai didi

JavaScript CSS 移动元素

转载 作者：行者123 更新时间：2023-12-04 03:37:18 25 4
gpt4 key购买 nike

亲爱的程序员们，我正在做一个帮助学生学习英语的网站元素。该网站应该给学生随机的单词，然后学生必须正确地对这些单词进行排序才能造句或提问。我被困在元素移动中，当学生点击它们时，按钮必须彼此相邻移动，我已经让按钮移动但它没有按我想要的那样工作。最后感谢您的耐心等待这是我的代码注意:我不是以英语为母语的人，如果我的语言有误，请见谅。

var question=["Does","he","play","chess","?"];
var randquestion=shuffle(question);
document.getElementById("message").innerHTML=question.length;
var temp="";

for(var i=0;i<question.length;i++)
{
  temp+="<button name=btn class='button button1' id='animate' type=button onclick='myFunction'>"+randquestion[i]+"</button>";
}
document.getElementById("message").innerHTML=temp;
for(var i=0;i<question.length;i++)
{
  document.getElementsByName("btn")[i].onclick=myFunction;
}

function myFunction() 
{
  myMoveDown(this);
}
var id = null;
function myMoveDown(elm) {
  var elem = elm;  
  var pos = 0;
  var pos2=0;
  clearInterval(id);
 id = setInterval(frame, 3);
  function frame() {
    if (pos == 250) {
      clearInterval(id);
    } else {
      pos+=10; pos2-=10;
      elem.style.top= pos + "px"; 
      elem.style.left = pos2 + "px"; 
    }
  }
}

function getRndInteger(min, max) {
  //This JavaScript function always returns 
  //a random number between min and max (both included)
  return Math.floor(Math.random() * (max - min + 1) ) + min;
}
function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;
  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
}
body {
  background-color: #1E0555;
  text-align: center;
}
.button {
  border: 4px;
  border-radius: 5px;
  border-color: black;
  color:black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  margin: 1px 4px;
  cursor: pointer;
}
.button1 {background-color: #b1f01f;} /* Green */

.divStyle{
  margin: 100px 4px;
  text-align:left;
}
#animate {
  border: 4px;
  border-radius: 5px;
  border-color: black;
  color:black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  margin: 1px 4px;
  cursor: pointer;
  position:relative;
  background-color: #b1f01f;;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Learn English" />
    <title>Document</title>
    <link rel="stylesheet" href="CSS/myStyle.css" />
  </head>
  <body>
    <div id="message"></div>
    <div class="divStyle" id="message2"></div>

    <script src="index.js"></script>
  </body>
</html>

最佳答案

它可能没有你想要的那么花哨，但我想使用 order 和 flex 来处理 myMoveDown 中发生的排序问题> 实现。我的是一个简单的方法，它从每个疑问词 的actualWordIndex 中提取线索，并应用与 CSS 相同的方法。

我仍然会说寻找更好的答案。这只是众多方法中的一种(虽然不是可访问性友好的)。如果成功，我可能会添加一些其他实现(可能在其他实现中，您仍将使用实际索引，但也会为 left 乘以或添加位置偏移。)。

var question=["Does","he","play","chess","?"];
var randquestion=shuffle([...question]);
document.getElementById("message").innerHTML=question.length;
var temp="";

for(var i=0;i<question.length;i++)
{
  temp+="<button name=btn class='button button1' type=button onclick='myFunction()'>"+randquestion[i]+"</button>";
}
document.getElementById("message").innerHTML=temp;
for(var i=0;i<question.length;i++)
{
  document.getElementsByName("btn")[i].onclick=myFunction;
}

let words = document.querySelectorAll("#message > button");

function myFunction() 
{ 
  myMoveDown(this);
}
var id = null;
function myMoveDown(elm) {
  let actualWordIndex = question.indexOf(elm.innerText);
  elm.style.top=`${window.innerHeight - 100}px`;
  elm.style.order = `${actualWordIndex+1}`
}

function getRndInteger(min, max) {
  //This JavaScript function always returns 
  //a random number between min and max (both included)
  return Math.floor(Math.random() * (max - min + 1) ) + min;
}
function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;
  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
}
body {
  background-color: #1E0555;
  text-align: center;
}
#message{
display:flex;
}
.button {
  border: 4px;
  border-radius: 5px;
  border-color: black;
  color:black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
    position:relative;
  font-weight: bold;
  margin: 1px 4px;
  cursor: pointer;
  transition:order 0.2s;
}
.button1 {background-color: #b1f01f;} /* Green */

.divStyle{
  margin: 100px 4px;
  text-align:left;
}

}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Learn English" />
    <title>Document</title>
    <link rel="stylesheet" href="CSS/myStyle.css" />
  </head>
  <body>
    <div id="message"></div>
    <div class="divStyle" id="message2"></div>

    <script src="index.js"></script>
  </body>
</html>

我们在 messages 上使用 position:relative 和在每个 button 上使用 position:absolute 的组合的另一种方法.我们根据原始索引在此处操作 button 的 left 位置。我已经克隆了原始节点以跟踪打乱的左侧位置以设置为我们可见节点中的正确索引。一个限制是为每个按钮提供相同的宽度，以便在它们按正确的顺序放置时获得正确的 left 位置。

var question=["Does","he","play","chess","?"];
var randquestion=shuffle([...question]);
document.getElementById("message").innerHTML=question.length;
var temp="";


for(var i=0;i<question.length;i++)
{
  temp+="<button name=btn class='button button1' type=button onclick='myFunction()'>"+randquestion[i]+"</button>";
}
document.getElementById("message").innerHTML=temp;
let sumLeft = 0;
for(var i=0;i<question.length;i++)
{
 const btn =  document.getElementsByName("btn")[i];
 btn.onclick=myFunction;
 btn.style.left=`${sumLeft}px`;
 sumLeft += parseInt(btn.offsetWidth);
}

let message = document.querySelector("#message");
let clonedMessage = message.cloneNode(true);
let words = document.querySelectorAll("#message > button");
let clonedWords = clonedMessage.children;
function myFunction() 
{ 
  myMoveDown(this);
}
var id = null;
function myMoveDown(elm) {
  let actualWordIndex = question.indexOf(elm.innerText); 
  const orderedLeft = clonedWords[actualWordIndex].style.left;
  const orderedTop = clonedWords[actualWordIndex].style.top;
  elm.style.left = orderedLeft;
  elm.style.top = `${orderedTop+window.innerHeight-80}px`;
}

function getRndInteger(min, max) {
  //This JavaScript function always returns 
  //a random number between min and max (both included)
  return Math.floor(Math.random() * (max - min + 1) ) + min;
}
function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;
  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
}
body {
  background-color: #1E0555;
  text-align: center;
}
#message{
position:relative;
}
.button {
  border: 4px;
  border-radius: 5px;
  border-color: black;
  color:black;
  padding: 15px;
  text-align: center;
  width:100px;
  text-decoration: none;
  display: inline-block;
  
  font-size: 16px;
  position:absolute;
  font-weight: bold;
  margin: 1px 4px;
  cursor: pointer;
  transition:all ease-in 0.2s;
  left:0;
}
.button1 {background-color: #b1f01f;} /* Green */


}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Learn English" />
    <title>Document</title>
    <link rel="stylesheet" href="CSS/myStyle.css" />
  </head>
  <body>
    <div id="message"></div>
    <div class="divStyle" id="message2"></div>

    <script src="index.js"></script>
  </body>
</html>

我敢打赌还有另一种方法，而不是 top 和 left 定位，而是使用 transform...translate 组合。

关于JavaScript CSS 移动元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66664078/

25 4 0
文章推荐： python - 如何在不达到递归限制的情况下 pickle 具有子对象或邻居关系的 class() 对象并在加载时保留对象
文章推荐： assembly - MSP430 CMP运算符
文章推荐： meteor - "415 Error"查询 Spotify token 时
文章推荐： asp.net-mvc - 为什么无法导航到Web API Controller
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com