小贝子编程

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



我希望能够在我用javascript代码单击下面的按钮时使单词"HERE"随机改变其位置。我已经在同一文件中有另一个javascript代码，但是另一个单词（"成为"）工作正常;但是似乎当我将这两个代码放在同一个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() + "%",
})
})
});

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

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

同样在CSS中，我们需要使.here具有position: absolute否则您的top和left命令不起作用。请记住，Math.random()给出一个介于 0~1 之间的值，因此移动不会引人注目:)但我认为你可以自己调整一下。您还需要调整绝对位置以使其看起来正确。

//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>

好吧，您的第一个问题是您正在尝试为元素按钮设置单击侦听器，但这不是您在此处传递的内容： 

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

它实际上应该是： 

$('#button').click(function(){

因为你已经在使用 jQuery，所以不需要按 id 为按钮创建一个变量，你可以只使用 ID。

接下来，要让它移动，为什么不使用jQuerys偏移函数呢？ 

$('#button').click(function(){
    $('.here').offset({
        top: 100 * Math.random(),
        left: 100 * Math.random(),
    })
});

这也将设置顶部和左侧的偏移量。

工作解决方案：

//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(){
  //UPDATED THIS TO USE #
  $('#button').click(function(){
    $('.here').offset({
      top: 100 * Math.random(),
      left: 100 * Math.random(),
    })
  });
});
@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); }
}
<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>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium