时间戳

首页 > 解决方案 > 如何使用javascript通过鼠标单击使单词随机更改其位置？

javascript - 如何使用javascript通过鼠标单击使单词随机更改其位置？

问题描述

我希望能够让“HERE”这个词随机改变它的位置，因为我用一个javascript代码点击它下面的按钮。我已经在同一个文件中有另一个 javascript 代码，但是另一个单词（“BECOME”）工作得很好；但似乎当我将这两个代码放在同一个 javascript 文件中时，“HERE”一词的代码由于某种原因停止工作，我无法弄清楚。我仍然是 javascript 的新手，所以我遇到了麻烦......非常感谢帮助！

HTML：

<link rel="stylesheet" href="css_become.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<!--Helena Luz, up201506747-->
</head>
<body>
<!--HERE-->
<header>

<h4>Here is everyw<span>here</span></h4>
<h5>(it depends where you are)</h5>

</header>


<h1 class="here">Here!</h1>


<h2 id="button">reposition me!</h2>
<!--HERE-->

<!--BECOME-->
<div id="container">
<p><span>Become</span>
<br>to come into existence
<br>to come to be
<br>to undergo <span>change</span>
</p>
</div>

<div id="float">

<div class="dot">
<h4 id="become_original">Become</h4>
</div>

</div>

<h2 id="button1">Transform me!</h2>
<!--BECOME-->

<script src="javascript_become.js" type="application/javascript"> </script>

</body>
</html>

CSS：

@font-face {
font-family: BAUHS93;
src: url(fontes/BAUHS93.TTF);
}

@font-face {
font-family: Amatic;
src: url(fontes/AmaticSC-Regular.ttf);
}

@font-face {
font-family: bb-book;
src: url(fontes/bb-book.otf);
}

@font-face {
font-family: bebas;
src: url(fontes/BEBAS__.TTF);
}

@font-face {
font-family: mod;
src: url(fontes/MOD20.TTF);
}

@font-face {
font-family: monotonia;
src: url(fontes/monotonia.otf);
}

body {
margin:0;
padding:0;
border: solid 10px #000;
background-color: #EE3E4E;
border: solid 10px #000;
}

h1, h2, h4, h5, p, button {
font-family: Helvetica;
font-weight: bold;
text-transform: uppercase;
color: #000;
font-size: 35px;
line-height: 38px;
}

/*here's button*/
#button {
width:295px;
margin: auto;
margin-top: 2.5%;
border: 0px;
background-color: inherit;
}

#button:hover {text-decoration: underline;}


.here {
color: #FFF;
text-align: center;
width:500px;
margin:auto;
margin-top: 7.5%;
}

/* for become */
.class1 {
font-family: Amatic;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 25px;
}

.class2 {
 font-weight: Regular;
 font-family: BAUHS93;
 }

.class3 {
font-family: bb-book;
}

.class4 {
font-family: bebas;
font-style:oblique;
}

.class5 {
font-family: mod;
text-transform: uppercase;
}

.class6 {
font-family: monotonia;
}


/*circle*/
.dot {
height: 465px;
width: 465px;
border-radius: 100%;
margin: 0 auto;
background-color: #F5CDFF;
animation-name: cores;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
display: flex;
align-items: center;
margin-top: -5%;
overflow: hidden;
}

#container {
margin: 15% 0 6% 0;
}

#become_original {
font-size: 100px;
margin: 0 auto;
}

#float {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

/*become's button*/
#button1 {
background-color: inherit;
width: 300px;
margin:auto;
margin-top:2.5%;
margin-bottom:2.5%;
}

#button1:hover {text-decoration: underline;}

span{color: #FFF;}

/*animations*/

@keyframes cores {
0%   {background-color: #F5CDFF;}
25%   {background-color:#00ADEF;}
50%  {background-color: #EE3E4E;}
100%  {background-color:#F5CDFF;}
 }

@keyframes floating {
from { transform: translate(0,  0px); }
65%  { transform: translate(0, 15px); }
to   { transform: translate(0, 0px); }
}

JAVASCRIPT：

//JAVASCRIPT FOR THE WORD BECOME - IS WORKING FINE

const classes = ["class1", "class2", "class3", "class4", "class5", "class6"];

var button1;
var selectedIndex = 0;

document.getElementById("button1").addEventListener("click", function(){

if(++selectedIndex >= classes.length) selectedIndex = 0;

document.getElementById("become_original").className = classes[selectedIndex];

});

//JAVASCRIPT FOR THE WORD "HERE" WHICH ISN'T WORKING

$(document).ready(function(){
var button;
button = document.getElementById('button');

$('button').click(function(){
$('.here').css({
top: (100 * Math.random()).toString() + "%",
left: (100 * Math.random()).toString() + "%",
})
})
});

标签： javascripthtmlcss

解决方案

好的，纠正了一些事情，首先你使用的是 Vanilla Javascript 和 jQuery 的 ix。转换后的代码现在可以运行普通的 Vanilla。

您的 javascript 现在在页面加载时运行。

同样在 CSS 中，我们需要使.herehaveposition: absolute否则您的top和left命令无效。请记住Math.random()，给出一个 0~1 之间的值，所以 move 并不戏剧化 :) 但我认为你可以自己调整它。您还需要调整绝对位置以使其看起来正确。

//JAVASCRIPT FOR THE WORD BECOME - IS WORKING FINE

const classes = ["class1", "class2", "class3", "class4", "class5", "class6"];

var button1;
var selectedIndex = 0;

document.addEventListener('DOMContentLoaded', function() {

  // Set up click event for the 'become'
  document.getElementById("button1").addEventListener("click", function() {
    if (++selectedIndex >= classes.length) selectedIndex = 0;
    document.getElementById("become_original").className = classes[selectedIndex];
  });
  
  // Set up HERE
  document.getElementById('button').addEventListener('click', function() {
    let here = document.querySelector('.here');
    here.style.top = `${Math.random()}%`;
    here.style.left = `${Math.random()}%`;
    console.log('Moved here');
  });


});
  @font-face {
  font-family: BAUHS93;
  src: url(fontes/BAUHS93.TTF);
}

@font-face {
  font-family: Amatic;
  src: url(fontes/AmaticSC-Regular.ttf);
}

@font-face {
  font-family: bb-book;
  src: url(fontes/bb-book.otf);
}

@font-face {
  font-family: bebas;
  src: url(fontes/BEBAS__.TTF);
}

@font-face {
  font-family: mod;
  src: url(fontes/MOD20.TTF);
}

@font-face {
  font-family: monotonia;
  src: url(fontes/monotonia.otf);
}

body {
  margin: 0;
  padding: 0;
  border: solid 10px #000;
  background-color: #EE3E4E;
  border: solid 10px #000;
}

h1,
h2,
h4,
h5,
p,
button {
  font-family: Helvetica;
  font-weight: bold;
  text-transform: uppercase;
  color: #000;
  font-size: 35px;
  line-height: 38px;
}


/*here's button*/

#button {
  width: 295px;
  margin: auto;
  margin-top: 2.5%;
  border: 0px;
  background-color: inherit;
}

#button:hover {
  text-decoration: underline;
}

.here {
  color: #FFF;
  text-align: center;
  width: 500px;
  margin: auto;
  margin-top: 7.5%;
  position: absolute;
}


/* for become */

.class1 {
  font-family: Amatic;
  font-weight: bold;
  text-transform: lowercase;
  letter-spacing: 25px;
}

.class2 {
  font-weight: Regular;
  font-family: BAUHS93;
}

.class3 {
  font-family: bb-book;
}

.class4 {
  font-family: bebas;
  font-style: oblique;
}

.class5 {
  font-family: mod;
  text-transform: uppercase;
}

.class6 {
  font-family: monotonia;
}


/*circle*/

.dot {
  height: 465px;
  width: 465px;
  border-radius: 100%;
  margin: 0 auto;
  background-color: #F5CDFF;
  animation-name: cores;
  animation-duration: 4s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  display: flex;
  align-items: center;
  margin-top: -5%;
  overflow: hidden;
}

#container {
  margin: 15% 0 6% 0;
}

#become_original {
  font-size: 100px;
  margin: 0 auto;
}

#float {
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}


/*become's button*/

#button1 {
  background-color: inherit;
  width: 300px;
  margin: auto;
  margin-top: 2.5%;
  margin-bottom: 2.5%;
}

#button1:hover {
  text-decoration: underline;
}

span {
  color: #FFF;
}


/*animations*/

@keyframes cores {
  0% {
    background-color: #F5CDFF;
  }
  25% {
    background-color: #00ADEF;
  }
  50% {
    background-color: #EE3E4E;
  }
  100% {
    background-color: #F5CDFF;
  }
}

@keyframes floating {
  from {
    transform: translate(0, 0px);
  }
  65% {
    transform: translate(0, 15px);
  }
  to {
    transform: translate(0, 0px);
  }
<!--HERE-->
<header>

  <h4>Here is everyw<span>here</span></h4>
  <h5>(it depends where you are)</h5>

</header>


<h1 class="here">Here!</h1>


<h2 id="button">reposition me!</h2>
<!--HERE-->

<!--BECOME-->
<div id="container">
  <p><span>Become</span>
    <br>to come into existence
    <br>to come to be
    <br>to undergo <span>change</span>
  </p>
</div>

<div id="float">

  <div class="dot">
    <h4 id="become_original">Become</h4>
  </div>

</div>

<h2 id="button1">Transform me!</h2>

推荐阅读