大佬教程收集整理的这篇文章主要介绍了JavaScript CSS 移动元素，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
亲爱的程序员们，我正在做一个帮助学生学习英语的网站项目。该网站应该给学生随机单词，然后学生必须正确地对这些单词进行排序才能造句或提问。我被困在元素移动中，当学生点击它们时，按钮必须彼此相邻移动，我已经让按钮移动了，但它没有按我想要的方式工作。 最后感谢您的耐心等待 这是我的代码 注意：如果我的语言有错误，我的母语不是英语，抱歉。
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>
另一种方法，我们在 position:relative 上使用 messages 的组合，在每个 position:absolute 上使用 button。我们按照原始索引在这里操作 left 的 button 位置。我已经克隆了原始节点以跟踪在可见节点中设置为正确索引的左移位置。一个限制是给每个按钮一个相等的宽度，以便在它们以正确的顺序放置时获得正确的 left 位置。
var question=["Does","?"];
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,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 移动元素全部内容，希望文章能够帮你解决JavaScript CSS 移动元素所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。