<html>
<head>
<title>question 5</title>
</head>
<body>
<button id="b0" onclick="start()">Start Game</button>
<br>
<img src ="happy_fish.png" id ="fish" onclick="mySore()">
<script type="text/javascript">
var image_tracker = 'happy' ;
var image = document.getElementById('fish');
image.style.display = "none";
function change() {
if (image_tracker == 'happy'){
image.src = 'happy_fish.png';
image_tracker = 'sad';
}
else{
image.src = 'sad_fish.png';
image_tracker = 'happy';
}
}
var timer;
function start(){
image.style.display = "block";
timer = setInterval ('change();',600);
}
function stop() {
clearInterval (timer);
}
function mySore() {
if( image_tracker == 'sad' ){
var x = document.getElementById("myNumber").stepUp();
if ( x >= 10){
clearInterval (timer);
}
}
else{
var y = document.getElementById("myNumber").stepDown();
if ( y <= -10){
clearInterval (timer);
}
}
}
</script>
<p><strong>Your Score: <input type="number" id="myNumber"></strong>
</body>
</html>
在这段代码中,我想将number的值存储在一个变量中,这样在if-else语句中我可以将该数字的值与10和-10进行比较,并在if-else语句中执行该操作。我还要打印出来,如果数字超过10,它将打印出你赢的,当数字变得小于-10时,它将打印出你的损失。
你可以将这个<p id="message"></p>
元素放在你的input
旁边,在你的if-else
语句中添加以下语句var xVal=document.getElementById("myNumber").value;
和if(xVal>=10){ clearInterval (timer); document.getElementById("message").innerHTML="You Win"}
,与其他案例做同样的工作。检查以下工作解决方案:
<html>
<head>
<title>question 5</title>
</head>
<body>
<button id="b0" onclick="start()">Start Game</button>
<br>
<img src ="https://images.pexels.com/photos/45910/goldfish-carassius-fish-golden-45910.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" id ="fish" onclick="mySore()" height="200" width="200">
<script type="text/javascript">
var image_tracker = 'happy' ;
var image = document.getElementById('fish');
image.style.display = "none";
function change() {
if (image_tracker == 'happy'){
image.src = 'https://images.pexels.com/photos/45910/goldfish-carassius-fish-golden-45910.jpeg?auto=compress&cs=tinysrgb&h=650&w=940';
image_tracker = 'sad';
}
else{
image.src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSCvJNQB6U62UvdD5oinU1hbpUWeUDAniae39-rlP6T7ONJARhQ';
image_tracker = 'happy';
}
}
var timer;
function start(){
image.style.display = "block";
timer = setInterval ('change();',1600);
}
function stop() {
clearInterval (timer);
}
function mySore() {
if( image_tracker == 'sad' ){
var x = document.getElementById("myNumber").stepUp();
var xVal=document.getElementById("myNumber").value;
if ( xVal >= 10){
clearInterval (timer);
document.getElementById("message").innerHTML="You Win";
image.style.display = "none"; document.getElementById("myNumber").disabled=true
}
}
else{
var y = document.getElementById("myNumber").stepDown();
var yVal=document.getElementById("myNumber").value;
if ( yVal < -10){
document.getElementById("message").innerHTML="You lost";
image.style.display = "none"; document.getElementById("myNumber").disabled=true
clearInterval (timer);
}
}
}
</script>
<p><strong>Your Score: <input type="number" id="myNumber"></strong></p>
<p id="message"></p>
</body>
</html>