Question

我正在为我的学校项目制作一个简单的游戏，基本的想法就是当你按下按钮开始游戏时，随机图像会淡入，你必须在30秒内点击尽可能多的游戏。我使用Math.random和Javascript for if语句，JQuery用于内置onclick和fadeTo。该功能不起作用，我不知道为什么。这是我的HTML

<!DOCTYPE html>
<html>
<head>
<title>My test game</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>Click as many as you can in 30 seconds</h1>
<input id="clickMe" type="button"  value="clickme"onclick="randomNumFunc();" />
<!-- Game Area -->
<div id="game-area">
<div id="circle1"></div>
</div>
<!-- Javascript/Jquery -->
<script src="js/JQuery.js"></script>
<script src="js/script.js"></script>
</body>

CSS：

body {
background-color: #CEF6F5;
}

#game-area {
border: 5px solid black;
height: 500px;
background-color: white;
}

#circle1 {
-moz-border-radius: 50px/50px;
-webkit-border-radius: 50px 50px;
border-radius: 50px/50px;
border: solid 21px #f00;
width: 50px;
height: 50px;  
opacity: 0.5;
}

和Javascript / Jquery：

/* RNG variable */
var randomNum = Math.floor((Math.random() * 3) + 1);

/* Picture Assignments */
var pic1 = 1;
var pic2 = 2;
var pic3 = 3;

/* RNG Code */

function randomNumFunc() {
document.getElementById('#circle1').innerHTML;
if (randomNum == 1) {
$(document).ready(function() {
  $(document).fadeTo('fast', 1);
});
$(document).onclick(function() {
  $(document).fadeTo('fast', 0);
});
}
}

Answer 1

您的<input>元素应为，

<input id="clickMe" type="button" value="clickme"/>

javaScript / jQuery代码看起来像，

$(document).ready(function() {
var randomNum = Math.floor((Math.random() * 3) + 1);
    $('#clickMe').click(function(){
      if(randomNum == 1){
        $('#circle1').fadeTo('fast', 1);
      }
    else{
       $('#circle1').fadeTo('fast', 0);
     }
    })

});

Answer 2

我认为这就是你想要的：

的script.js：

$(document).ready(function() {

    var pic1 = 1;
    var pic2 = 2;
    var pic3 = 3;

    var randomNum = Math.floor((Math.random() * 3) + 1); //every time you click it, will be generate a new randonNum
    console.log(randoNum); //It will show in console the number

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

        if (randomNum  == 1) {
            $('#circle1').fadeIn('fast');
        } else {
            $('#circle1').fadeOut('fast');
        }
    });

});

您可以删除输入中的onClick方法：

<input id="clickMe" type="button"  value="clickme" />

Javascript / JQuery Math.random onclick淡入淡出

2 个答案: